在网页设计中，图片是传递信息、美化页面和增强用户体验的重要元素。HTML5为图片的显示提供了丰富的技巧和功能。以下是一些简单而实用的HTML5显示图片的技巧，帮助你更好地在网页中展示图片。
1. 使用
标签
HTML5中，
标签用于在网页中嵌入图片。这是最基本且最常用的方法。
src
：指定图片的路径。
alt
：图片无法显示时，显示的替代文本。
2. 图片尺寸自适应
为了使图片在不同设备上都能良好显示，可以使用CSS进行图片尺寸的自适应。
img {
max-width: 100%;
height: auto;
}
这样设置后，图片会根据父元素的宽度自动调整大小，但高度会保持原始比例。
3. 图片懒加载
懒加载是一种优化网页性能的技术，可以减少页面加载时间。HTML5提供了
loading
属性来支持图片懒加载。
当用户滚动到图片位置时，图片才开始加载。
4. 使用
large-image.jpg
；大于768px时，显示
medium-image.jpg
；否则，显示
small-image.jpg
。
5. 响应式图片
响应式图片可以根据设备屏幕尺寸自动调整图片大小。可以使用CSS的
background-size
属性实现。
.img-responsive {
width: 100%;
height: auto;
background-size: cover;
background-position: center;
}
这样设置后，图片会根据容器的大小自动调整，并保持图片的宽高比。
6. 图片格式优化
选择合适的图片格式可以减少图片文件大小，提高网页加载速度。常见的图片格式有：
JPEG：适用于照片类图片，压缩效果好。
PNG：适用于图标、插画等，支持透明背景。
GIF：适用于动画、小图标等，支持简单动画。
7. 图片优化工具
使用图片优化工具可以进一步减小图片文件大小，提高网页加载速度。一些常用的图片优化工具有：
TinyPNG
JPEGmini
Compressor.io
总结
以上是HTML5显示图片的一些简单实用技巧。掌握这些技巧，可以帮助你更好地在网页中展示图片，提升用户体验。