HTML图像嵌入与图片标签

网页中图片是最常见的媒体元素，掌握正确的嵌入方式至关重要。

img标签基础

基本语法

HTML

<img src="image.jpg" alt="图片描述">

必要属性

属性	说明	必填
src	图片路径	是
alt	替代文本	是
width	宽度	否
height	高度	否

图片路径

相对路径

HTML

<img src="images/photo.jpg">        <!-- 同级目录 -->
<img src="./images/photo.jpg">      <!-- 当前目录 -->
<img src="../images/photo.jpg">    <!-- 上级目录 -->

绝对路径

HTML

<img src="/assets/images/logo.png">  <!-- 网站根目录 -->
<img src="https://example.com/img.jpg">  <!-- 网络地址 -->

响应式图片

srcset属性

HTML

<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="响应式图片">

picture元素

HTML

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="自适应图片">
</picture>

图片格式选择

格式	适用场景	特点
JPEG	照片、复杂图像	有损压缩，体积小
PNG	图标、透明图片	无损压缩，支持透明
WebP	现代格式替代	更小体积，兼容性好
SVG	图标、矢量图形	可缩放，代码可编辑
AVIF	新一代格式	最优压缩，兼容性有限

懒加载

loading属性

HTML

<img src="image.jpg" alt="图片" loading="lazy">

懒加载延迟加载视口外的图片，提升页面初始加载速度。

图片优化建议

选择合适格式：照片用JPEG/WebP，图标用PNG/SVG
指定尺寸：设置width/height避免布局偏移
使用懒加载：非首屏图片添加loading="lazy"
提供替代文本：alt属性提升可访问性
使用CDN：加速图片分发

要点总结

img标签必须有src和alt属性
srcset和picture实现响应式图片
根据用途选择合适图片格式
loading="lazy"实现原生懒加载
预设尺寸避免CLS（累积布局偏移）