在HTML中，图片的使用已经变得非常灵活和多样化。本教程将介绍如何使用HTML实现一些高级的图片应用。
图片对齐
使用align属性，你可以控制图片在文本中的对齐方式。
- 左对齐：
<img align="left" src="image.jpg" alt="Image description"> - 居中对齐：
<img align="center" src="image.jpg" alt="Image description"> - 右对齐：
<img align="right" src="image.jpg" alt="Image description">
响应式图片
为了确保图片在不同设备上都能良好显示，可以使用<picture>元素和srcset属性。
<picture>
<source media="(min-width: 600px)" srcset="large-image.jpg">
<img src="small-image.jpg" alt="Responsive image">
</picture>
图片映射
图片映射允许你为图片的不同区域定义超链接。
<img src="image-map.jpg" usemap="#image-map" alt="Image map">
<map name="image-map">
<area shape="rect" coords="0,0,100,100" href="/link1" alt="Link 1">
<area shape="circle" coords="200,200,50" href="/link2" alt="Link 2">
</map>
图像懒加载
为了提高页面加载速度，可以使用loading="lazy"属性。
<img src="large-image.jpg" loading="lazy" alt="Lazy loaded image">
相关资源
想要了解更多关于HTML和图片的知识，请访问HTML基础教程。