在HTML中插入图片的核心方法是使用<img>标签，通过src属性指定图片路径，并务必添加alt属性以提升可访问性和SEO效果。
许多初学者在搭建网站时，往往只关注文字内容的排版，却忽略了图片这一视觉核心元素，图片不仅能打破纯文本的枯燥感，更是传递信息、提升用户体验的关键，仅仅把图片放上去是不够的，如何正确地插入、优化以及管理图片，才是决定页面加载速度和搜索引擎排名的隐形门槛，本文将深入解析HTML图片插入的完整流程，从基础语法到高级优化，助你构建高效、规范的网页。
如何正确编写img标签代码
HTML5标准中，<img>是一个自闭合标签，这意味着它不需要结束标签，它的结构非常简洁，但包含的属性却至关重要，一个标准的图片插入代码通常包含src、alt和width/height这几个核心属性。
src属性：图片的来源路径
src（source）是<img>标签中唯一必需的属性，它告诉浏览器去哪里找到图片文件,路径的写法直接决定了图片能否正常显示。
- 相对路径：这是最常用的方式，如果图片文件与HTML文件在同一目录下，只需写文件名，如
<img src="photo.jpg">，如果图片在子文件夹中，如images文件夹，则写<img src="images/photo.jpg">，相对路径有利于网站迁移，因为只要文件夹结构不变,链接就不会失效。 - 绝对路径：指图片在服务器上的完整URL地址，例如
<img src="https://example.com/images/logo.png">，这种方式适用于引用外部资源或CDN上的图片，但缺点是如果网站更换域名,所有绝对路径都需要修改。 - 根路径：以斜杠开头，表示从网站根目录开始查找，如
<img src="/images/photo.jpg">，这种方式在大型网站结构中非常有用，能确保无论HTML文件在哪个子目录下,都能正确找到根目录下的资源。
alt属性：替代文本的重要性
alt（alternative text）属性用于描述图片内容，当图片加载失败、用户禁用图片显示或屏幕阅读器用户浏览网页时，alt文本会替代图片出现。
业内专家指出，alt属性不仅是无障碍访问（Accessibility）的核心要求，也是搜索引擎理解图片内容的重要依据，一个优秀的alt文本应该简洁明了地描述图片内容，例如<img src="cat.jpg" alt="一只橘猫坐在窗台上晒太阳">，而不是简单的<img src="cat.jpg" alt="图片1">。
width和height属性：预留空间防布局抖动
虽然现代CSS可以处理图片尺寸，但在HTML中直接指定width和height属性仍然是一个良好的实践，它的主要作用是让浏览器在图片加载前预留出相应的空间，避免图片加载过程中页面布局发生跳动（CLS，Cumulative Layout Shift）。
<img src="photo.jpg" alt="风景" width="800" height="600">，这里指定的尺寸应与图片的实际像素比例一致，浏览器会自动缩放图片以适应这些尺寸,从而保持页面稳定。
图片格式选择与性能优化
选择合适的图片格式和进行适当的优化，是提升网页加载速度的关键，不同的格式适用于不同的场景,盲目使用高分辨率图片只会拖慢网站速度。
常见图片格式对比
| 格式 | 支持透明度 | 压缩类型 | 适用场景 | 文件大小趋势 |
|---|---|---|---|---|
| JPEG | 否 | 有损 | 照片、复杂色彩图像 | 小 |
| PNG | 是 | 无损 | 图标、Logo、需要透明背景的图片 | 中 |
| WebP | 是 | 有损/无损 | 现代网站通用，兼容性好 | 极小 |
| SVG | 是 | 矢量 | 图标、简单图形、Logo | 极小 |
- JPEG：适合存储照片类图像，文件体积小，但压缩是有损的，多次保存会导致质量下降,不支持透明度。
- PNG：支持透明度，适合需要透明背景的图标或Logo，无损压缩意味着文件体积通常比JPEG大,不适合存储大量照片。
- WebP：由Google开发，提供了优于JPEG和PNG的压缩效率，在同等质量下，WebP文件体积通常比JPEG小25%-34%，现代浏览器几乎都支持WebP,是当前的推荐格式。
- SVG：基于XML的矢量图形格式，无论放大多少倍都不会失真，文件体积极小，适合简单的图形、图标和Logo。
图片压缩与懒加载
即使选择了合适的格式，原始图片往往仍然过大，使用在线工具或软件（如TinyPNG、ImageOptim）对图片进行压缩，可以在肉眼难以察觉质量损失的情况下,大幅减小文件体积。
懒加载（Lazy Loading）是现代网页性能优化的标配，通过给<img>标签添加loading="lazy"属性，浏览器只会加载可视区域内的图片，其余图片在用户滚动到附近时才加载，这能显著减少首屏加载时间,提升用户体验。
<img src="large-photo.jpg" alt="大图" loading="lazy">
响应式图片与多尺寸适配
随着移动设备的普及，网站必须在不同屏幕尺寸下都能良好显示，传统的固定尺寸图片在手机上可能过大，导致加载缓慢或显示不全，HTML5提供了srcset和sizes属性来解决这个问题。
srcset属性：提供多种尺寸选项
srcset允许你为同一张图片提供多个不同分辨率或尺寸的文件,浏览器会根据设备的屏幕密度和视口宽度自动选择最合适的图片。
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
alt="响应式图片示例"
sizes="(max-width: 600px) 100vw, 800px">
在这个例子中，浏览器会检查设备的视口宽度，如果视口小于600像素，它会选择400px宽的图片；如果视口在600到1200像素之间，它可能会选择800px宽的图片；如果视口大于1200像素,则选择1200px宽的图片。
使用picture元素进行格式切换
除了尺寸适配，你还可以使用<picture>元素来提供不同格式的图片，以支持更先进的压缩格式，浏览器会从上到下检查<source>标签,选择第一个支持的格式。
<picture> <source srcset="photo.webp" type="image/webp"> <source srcset="photo.jpg" type="image/jpeg"> <img src="photo.jpg" alt="响应式图片"> </picture>
这样，支持WebP的浏览器会加载WebP格式的图片，获得更好的性能；而不支持WebP的旧浏览器则会回退到JPEG格式,确保图片正常显示。
常见问题与排查技巧
在实际开发中，图片不显示或显示异常是常见问题,以下是一些常见的排查步骤和解决方案。
图片路径错误
这是新手最常遇到的问题，检查src属性中的路径是否正确，如果是相对路径，确保图片文件确实存在于指定的文件夹中，可以使用浏览器的开发者工具（F12），在Network标签页中查看图片请求的状态码，如果是404错误，说明路径错误；如果是403错误,可能是权限问题。
图片格式不被支持
虽然现代浏览器支持多种格式，但某些老旧环境或特定配置下可能不支持WebP或SVG，确保提供回退方案，如使用<picture>元素或提供JPEG/PNG备用。
图片显示模糊
如果图片在高分辨率屏幕（如Retina屏）上显示模糊，可能是因为你提供的图片分辨率不足，建议使用srcset提供2x或3x分辨率的图片,或者使用SVG矢量图形。
图片加载缓慢
检查图片是否经过压缩，是否使用了懒加载，以及是否使用了CDN加速，对于全球访问的网站,使用CDN可以显著缩短图片加载时间。
HTML图片插入看似简单，实则蕴含了路径管理、格式选择、性能优化和响应式适配等多重考量，掌握<img>标签的正确用法，结合srcset、loading="lazy"等现代特性，不仅能提升网站的加载速度和用户体验，还能为SEO加分，每一张图片都应该有其存在的意义,并通过最佳实践呈现出来。
首发原创文章，作者：世雄 - 原生数据库架构专家，如若转载，请注明出处：https://idctop.com/article/352073.html
