网页图片代码详解：HTML 中常用的写法与属性

图片是网页内容的重要组成部分。写好图片标记，不只是让图片显示出来，还要考虑图片无法加载时怎么办、不同屏幕该下载哪个尺寸、图片是否会造成布局跳动，以及辅助技术能否理解它的含义。本文从常见写法开始，逐步说明关键属性、响应式图片、性能与安全边界。

为避免本文正文中的代码被浏览器当作图片直接显示，代码示例里用 HTML 实体表示尖括号。例如，< 在示例区域显示为字符 <。复制运行时，应把示例中的 < 和 > 分别还原为 < 和 >。示例使用的 images/flower.jpg 等路径是占位路径，运行前请替换为项目里的真实资源。

一、最常见的图片写法

HTML 图片元素通常通过 src 指定资源地址，通过 alt 提供替代文本。它是空元素，不需要结束标签。

<img src="images/flower.jpg" alt="一朵盛开的黄色向日葵">

在实际 HTML 文件中，浏览器看到的结构应当是一个图片元素。请勿在生产页面中把示例里的 < 和 > 原样保留：那样它们只是普通文本，不会创建元素。

src 的值可以是相对于当前页面的路径、相对于网站根目录的路径，或完整的 URL。例如：

<img src="images/flower.jpg" alt="花朵">
<img src="/assets/flower.jpg" alt="花朵">
<img src="https://cdn.example.com/flower.jpg" alt="花朵">

相对路径的解析位置容易造成误会。images/flower.jpg 通常相对于当前页面地址；以斜杠开头的 /assets/flower.jpg 通常相对于站点根路径。若页面位于嵌套目录，前者可能指向与预期不同的位置。排查图片不显示时，先在浏览器开发者工具的网络面板检查请求 URL、状态码和响应内容。

二、alt：替代文本不是图片标题

alt 是最重要的图片属性之一。它用于在图片无法呈现时提供替代信息，也供屏幕阅读器等辅助技术理解图片内容。替代文本应围绕图片在当前页面中的作用来写，而不是机械地罗列画面细节。

• 有信息的图片：简洁描述其传达的信息，例如“2024 年各季度销售额变化”。
• 作为链接或按钮内容的图片：描述操作目的，例如“前往首页”，不要只写“房子图标”。
• 纯装饰图片：使用空替代文本，即 alt=""，让辅助技术通常可以忽略它。
• 包含文字的图片：如果图片上的文字有意义，应提供相同信息；更好的做法通常是把文字作为真实文本排版。

对于装饰性图片，空值与省略属性不是一回事。省略 alt 可能导致辅助技术朗读文件名或 URL；明确写成空字符串，才是在表达“这张图片对理解内容没有额外贡献”。

<img src="images/divider.png" alt="">

不要把 alt 写成文件名、关键词清单，或类似“图片：图片：图片”的重复描述。替代文本应简洁、有上下文，也不必使用“这是……的图片”作为固定前缀。屏幕阅读器通常会自行告知用户这里是图片。

三、宽高属性与布局稳定

width 和 height 用来提供图片的固有尺寸，值为不带单位的非负整数，通常对应像素尺寸。它们不是 CSS 长度值：不要写 width="100%"，也不要在属性值中写 px。

<img
  src="images/flower.jpg"
  alt="一朵黄色向日葵"
  width="1200"
  height="800">

为图片提供正确的宽高信息，可以让浏览器在文件下载完成前预留相应比例的空间，减少内容突然移动。这里应填写图片的固有宽高比例，而不是页面上希望显示的任意尺寸。若资源尺寸是 1200 × 800，显示区域可以小于原图，但宽高比例应与原图一致。

响应式布局通常由 CSS 控制显示尺寸。例如给内容图片设置 max-width: 100%，可以避免图片宽于容器；height: auto 则让高度随宽度按比例变化。为了便于运行，下面示例中的样式写在页面内部；实际项目也可以放入 CSS 文件。

<style>
  .content-image {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>

<img
  class="content-image"
  src="images/flower.jpg"
  alt="一朵黄色向日葵"
  width="1200"
  height="800">

若通过 CSS 把图片裁切进固定比例的卡片，可用 object-fit 控制填充方式；cover 会填满盒子并可能裁掉边缘，contain 会完整显示图片但可能留下空白。这些是 CSS 属性，不是图片元素属性。重要主体可能被裁切时，应检查实际断点和容器比例，不能只依赖默认居中裁切。

<style>
  .card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
  }
</style>

<img
  class="card-image"
  src="images/product.jpg"
  alt="木质桌面上的黑色耳机"
  width="900"
  height="600">

四、响应式图片：srcset 与 sizes

同一张图片可能需要多个尺寸版本。手机屏幕通常不需要下载几千像素宽的桌面图片；高像素密度屏幕又可能需要更高分辨率的资源。srcset 和 sizes 可以把候选资源及预期显示宽度交给浏览器，让浏览器结合布局和设备条件选择资源。

一种常见写法使用宽度描述符，例如 480w、960w。这些数字表示候选文件的固有像素宽度，文件实际尺寸应与标注相符。使用宽度描述符时，通常应同时提供 sizes，描述图片在不同条件下预计占据的 CSS 宽度。

<img
  src="images/landscape-960.jpg"
  srcset="
    images/landscape-480.jpg 480w,
    images/landscape-960.jpg 960w,
    images/landscape-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 80vw, 800px"
  alt="山谷间的河流与远处雪山"
  width="1600"
  height="900">

上例中的 sizes 不是图片尺寸清单，而是布局提示：视口宽度不超过 600 CSS 像素时，图片预计约占视口宽度的 100%；在下一个区间约占 80%；更宽时预计为 800 CSS 像素。浏览器再结合设备像素比等因素选择候选资源。浏览器可能综合自身策略进行选择，因此不能把 srcset 理解成开发者对具体文件的绝对指令。

如果候选图片是同一内容、不同分辨率，可使用宽度描述符。若候选资源是同一图片的不同像素密度版本，也可以用密度描述符，例如 1x 和 2x。这两种描述符不要混在同一个 srcset 里使用；采用宽度描述符时配合 sizes，采用密度描述符时通常不需要 sizes。

<img
  src="images/logo-1x.png"
  srcset="images/logo-1x.png 1x, images/logo-2x.png 2x"
  alt="示例公司"
  width="160"
  height="40">

候选文件的宽高比例应相同，除非你是在处理 art direction（针对不同视口提供不同裁切或构图）。仅仅把文件名写进 srcset 并不能保证性能更好：如果候选宽度填错、图片尺寸与布局不匹配，浏览器的选择结果就可能不理想。

五、picture：格式回退与不同构图

picture 元素可以根据媒体条件或浏览器对图片格式的支持情况提供不同资源。它本身不显示图片；内部的 source 用于声明候选，最后仍由一个图片元素承载实际内容和替代文本。由于正文不直接插入图片标签，下面代码用实体展示完整结构；复制运行时按前文说明还原实体。

按格式提供候选资源

<picture>
  <source
    type="image/avif"
    srcset="images/scene.avif">
  <source
    type="image/webp"
    srcset="images/scene.webp">
  <img
    src="images/scene.jpg"
    alt="湖面倒映着群山"
    width="1200"
    height="800">
</picture>

浏览器会按照顺序检查可用的 source，遇到其支持且匹配的候选时选择相应资源；不支持这些格式或条件不匹配时，再使用后备图片。服务器需要正确提供文件内容类型，资源文件也必须确实是相应格式。文件扩展名写成 .avif 并不会自动把 JPEG 转成 AVIF。

按视口改变构图

当窄屏与宽屏需要不同裁切，而不只是不同分辨率时，可以用 media 条件选择构图。通常应保证语义仍然一致，并为最终显示的图片提供恰当替代文本。

<picture>
  <source
    media="(max-width: 600px)"
    srcset="images/banner-portrait.jpg">
  <source
    media="(min-width: 601px)"
    srcset="images/banner-wide.jpg">
  <img
    src="images/banner-wide.jpg"
    alt="海岸边的灯塔与晚霞"
    width="1600"
    height="600">
</picture>

picture 的 source 不是通用替代文本容器，也不负责显示尺寸。替代文本应写在内部的图片元素上。若不同构图表达的内容确实不同，应谨慎设计内容与文本，不要让屏幕阅读器用户得到与视觉内容不一致的信息。

六、loading、decoding 与优先级

loading="lazy" 可以提示浏览器延后加载距离当前视口较远的图片，适合长页面下方的非关键图片。它是加载策略提示，浏览器可根据实现和条件决定具体行为，并不保证图片精确等到进入视口才开始下载。

<img
  src="images/article-detail.jpg"
  alt="工匠正在打磨木制家具"
  width="1000"
  height="667"
  loading="lazy">

不要给首屏关键图片一律添加懒加载。尤其是页面的主要视觉内容，如果它因此晚些请求，可能拖慢用户看到主要内容的时间。页面下方的普通内容图适合考虑懒加载；首屏图片则应根据真实加载优先级决定。懒加载也不是安全功能，不会校验图片来源或过滤文件。

decoding 用于提示浏览器如何安排图片解码：async 表示可异步解码，sync 表示倾向同步解码，auto 交由浏览器决定。它是提示而非严格的时间保证，通常可以省略，除非经过实际测量确认有必要。

<img
  src="images/diagram.jpg"
  alt="设备连接关系示意图"
  width="1000"
  height="700"
  decoding="async"
  loading="lazy">

fetchpriority 可用于提示资源请求优先级，例如让少数关键图片获得较高优先级。它也只是提示，不应给页面所有图片都设置高优先级；滥用会削弱浏览器安排资源的空间。具体是否使用，应以页面性能数据和目标浏览器支持情况为依据。

七、链接图片与图注

图片可以放在链接里，常用于可点击的缩略图或品牌首页入口。此时替代文本应描述链接目的，而不是只描述图片外观。

<a href="/products/">
  <img
    src="images/products-thumbnail.jpg"
    alt="浏览全部产品"
    width="640"
    height="420">
</a>

若链接图片旁边已经有相同文字，图片可能属于重复信息，可以使用空替代文本，避免屏幕阅读器重复朗读。是否重复取决于页面结构和实际目的，不能一概而论。

图片与说明文字构成一个独立内容单元时，可以使用 figure 和 figcaption。图注是对图片的可见说明；它不等同于替代文本，前者面向所有读者，后者在图片无法呈现时提供替代信息。

<figure>
  <img
    src="images/chart.png"
    alt="图表显示本季度访问量较上季度增长约 18%"
    width="900"
    height="500">
  <figcaption>
    本季度网站访问量较上季度有所增长。
  </figcaption>
</figure>

如果图表承载大量数据，简短的 alt 往往无法完整替代图表内容。可以在正文或相邻表格中提供关键数据与结论，而不是试图把所有信息塞进一个很长的替代文本。

八、背景图片与内容图片的区别

需要传达内容的图片通常应作为 HTML 图片元素提供，以便使用替代文本、尺寸和响应式候选。CSS 背景图片适合装饰用途，例如卡片底纹、色块纹理或不承载独立信息的视觉效果；背景图片没有 alt 属性，不能直接替代需要被辅助技术理解的内容。

<style>
  .hero {
    min-height: 240px;
    background-image: url("images/pattern.svg");
    background-repeat: repeat;
  }
</style>

<section class="hero">
  <h2>服务介绍</h2>
</section>

若背景图实际上包含重要文字或信息，不要只把它放在 CSS 中。应把信息以真实文本或可访问的内容结构呈现，必要时另行提供说明。

九、路径、失败排查与常见错误

• 路径大小写不一致：本地某些系统对大小写不敏感，线上服务器可能区分大小写。文件名与引用路径应完全一致。
• 资源没有部署：本地能显示，不代表构建发布后文件仍在原目录。确认静态资源被构建工具复制，且最终 URL 有效。
• 服务器返回错误内容：请求可能返回 404 页面，或返回 HTML 而非图片。检查网络面板的状态码、响应类型和实际响应内容。
• 宽高与资源不符：声明尺寸比例和文件固有比例不一致可能造成布局预留错误或拉伸。裁切需求应通过 CSS 或不同构图候选解决。
• alt 写成文件名：文件名通常不是对用户有帮助的替代信息，应根据上下文重新描述。
• 用 CSS 尺寸属性填写百分比：width 属性的 HTML 属性值不是 CSS，响应式宽度应使用样式规则。
• 过度使用懒加载：首屏关键图像若被延后请求，可能影响用户体验；不要把它当成“图片性能优化”的统一开关。
• srcset 候选标注错误：例如把 800 像素宽的文件写成 1200w，会误导浏览器的资源选择。

排查时可以按顺序检查：页面最终生成的标记是否正确、资源 URL 是否符合预期、网络请求是否成功、图片格式是否受浏览器支持、CSS 是否隐藏或裁切了图片。开发者工具的网络与元素面板通常比反复修改文件名更有效。

十、图片相关的安全边界

普通图片资源通过 src 加载时，浏览器会按图片资源处理，但这不意味着可以不受限制地接收或展示任意用户上传内容。上传图片仍需在服务器端进行类型与内容校验，并结合业务需求限制文件大小、处理图像解码风险、生成安全的存储路径。仅检查文件扩展名或客户端提交的 MIME 类型不够可靠，因为这些信息可能与实际文件内容不符。

如果应用允许用户提供外部图片 URL，还需考虑服务器端抓取功能可能遭遇的服务端请求伪造等风险：不要让后端无约束地请求用户指定地址，应限制可访问的协议、主机和网络范围，并对跳转与解析后的目标地址进行校验。若只是让浏览器直接加载外部 URL，通常不会因此让服务器替用户发起请求，但仍可能产生隐私、追踪、内容可用性和第三方服务依赖等问题。

alt 不是安全过滤器，loading 也不是文件校验机制。将不可信文本插入 HTML 时，应使用适当的模板转义或安全 DOM API；不要把用户提供的字符串拼接为未经处理的 HTML。对于图片上传和外链加载，应分别设计服务器校验、访问策略和内容治理，不能依赖某一个前端属性完成安全防护。

十一、可直接改造的完整片段

下面组合了宽高、响应式候选、替代文本和懒加载。它适用于文章正文中非首屏的普通内容图。请将资源文件替换为实际存在、尺寸标注准确的版本；复制时同样需要把代码中的 HTML 实体还原成尖括号。

<style>
  .article-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
  }
</style>

<figure>
  <img
    class="article-image"
    src="images/garden-960.jpg"
    srcset="
      images/garden-480.jpg 480w,
      images/garden-960.jpg 960w,
      images/garden-1440.jpg 1440w"
    sizes="(max-width: 700px) 100vw, 900px"
    alt="温室里整齐排列的番茄植株"
    width="1440"
    height="960"
    loading="lazy"
    decoding="async">
  <figcaption>
    温室中的番茄植株按行栽培，便于日常维护。
  </figcaption>
</figure>

这段代码里的 sizes 是对布局宽度的估算，不会强制图片显示成固定宽度；具体显示宽度仍由 CSS 和页面布局决定。width 与 height 用于声明固有比例，max-width 则让图片适应较窄的容器。若这张图位于首屏且对页面呈现至关重要，应重新评估是否使用 loading="lazy"。

结语

可靠的图片标记可以从几条基本原则开始：为有信息的图片写清楚替代文本，为装饰图片明确提供空替代文本；声明准确的宽高比例，减少布局变化；根据真实布局配置响应式候选；把懒加载留给适合延后加载的图片；将内容图片与装饰背景区分开，并在上传、外链和不可信文本场景中单独考虑安全边界。最后通过浏览器开发者工具验证请求与布局，通常就能避免大多数图片显示和性能问题。