img标签核心属性包括src、alt、width、height、loading、srcset和sizes。src定义图片路径，是显示图片的基础；alt提供替代文本，对无障碍访问和SEO至关重要，帮助视障用户和搜索引擎理解图片内容；width和height预先声明尺寸，避免布局偏移，提升用户体验；loading支持懒加载（lazy）或立即加载（eager），优化页面性能；srcset与sizes配合实现响应式图片，根据不同设备加载合适尺寸的图片，节省带宽并保证清晰度。此外，decoding可优化解码方式，crossorigin处理跨域问题，referrerpolicy控制referrer信息，ismap和usemap支持图像映射。合理使用这些属性能显著提升网页性能、可访问性和用户体验。
在HTML中插入图片，
img标签最核心的属性无疑是
src和
alt。
src指向图片资源的地址，是图片能显示出来的基础；而
alt则提供了图片的文字描述，对可访问性和搜索引擎优化（SEO）都至关重要。除此之外，
width和
height属性也几乎是必备的，它们能帮助浏览器预留空间，避免页面布局跳动，显著提升用户体验。
img标签插入图片时，需要关注的属性远不止
src和
alt。从最基础的图片路径到复杂的响应式和性能优化，这些属性共同决定了图片如何被加载、显示以及对用户体验的影响。
src属性是图片的源地址，没有它，图片就无法显示。这没什么好说的，是基石。
alt属性是图片的替代文本。当图片无法加载时，或者屏幕阅读器读取页面内容时，
alt文本就会出现。它不仅仅是为了辅助视障用户，对搜索引擎理解图片内容也至关重要。我个人觉得，很多开发者会随意填写甚至忽略这个属性，但从长期来看，无论是网站的可访问性还是SEO表现，这都是一个非常大的失误。
width和
height属性用于指定图片的显示宽度和高度。这两个属性非常关键，尤其是在现代Web开发中。它们告诉浏览器图片将占据多少空间，这样浏览器在图片实际加载完成之前就能预留出相应的布局空间。这有效避免了“累积布局偏移”（Cumulative Layout Shift, CLS），也就是页面内容在图片加载时突然跳动的情况，对用户体验的提升非常明显。
loading属性是一个相对较新的属性，但其重要性不容小觑。它可以设置为
lazy（懒加载）或
eager（立即加载）。
loading="lazy"告诉浏览器，只有当图片即将进入视口时才加载它。这对于长页面中位于屏幕下方的图片来说，能显著减少初始页面加载时间，提升性能。对于首屏的关键图片，则应保持默认或明确设置为
eager。
srcset和
sizes属性则用于实现响应式图片。
srcset允许你提供同一图片的不同尺寸或不同像素密度的版本，浏览器会根据设备的屏幕分辨率、像素密度等选择最合适的图片。
sizes属性则描述了图片在不同视口大小下将占据的宽度。这两个属性结合使用，可以确保用户在任何设备上都能获得最佳的图片质量，同时避免加载过大的图片浪费带宽。 还有一些不那么常用但同样有用的属性，比如
decoding（提示浏览器如何解码图片）、
crossorigin（处理跨域资源共享问题，比如当图片被用作Canvas纹理时）、
referrerpolicy（控制发送的referrer信息）等。这些通常在特定场景下才会用到，但了解它们能让你在遇到复杂问题时有更多的解决思路。
为什么alt
属性对图片SEO和无障碍访问至关重要？
在我看来，
alt属性的重要性经常被低估了。它不仅仅是一个简单的文字描述，而是连接图片内容与用户、搜索引擎之间的桥梁。
从无障碍访问的角度看，
alt属性是视障用户理解图片内容的唯一途径。当他们使用屏幕阅读器浏览网页时，阅读器会朗读出
alt文本，让他们能够“听”到图片所表达的信息。如果
alt属性缺失或描述不准确，那么这部分用户就会完全错过图片传达的内容，这无疑是一种数字鸿沟。一个好的
alt文本应该简洁、准确地描述图片内容，并且与上下文相关。比如，一张展示“猫咪在阳光下睡觉”的图片，其
alt文本可以是“一只橘色的猫咪在窗边晒太阳睡觉”。
对于搜索引擎优化（SEO）来说，
alt属性同样不可或缺。搜索引擎的爬虫无法“看”懂图片，它们需要文字信息来理解图片内容。
alt文本提供了这种文字线索，帮助搜索引擎判断图片与页面主题的相关性，进而影响图片搜索结果的排名。同时，它也能增强整个页面的语义化，提升页面的整体SEO表现。一个缺乏
alt文本的图片，在搜索引擎眼中几乎是隐形的，错失了潜在的流量入口。我见过太多网站，图片多得惊人，但
alt属性都空着，这简直是白白浪费了SEO的机会。所以，每次我审查网站时，
alt属性都是我必查项之一。
如何利用width
、height
和loading
属性优化图片加载性能？
图片加载性能是用户体验的关键一环，而
width、
height和
loading这三个属性在其中扮演着至关重要的角色。
首先是
width和
height。以前，人们觉得这两个属性只是为了控制图片显示大小，但现在，它们更重要的作用是防止“累积布局偏移”（CLS）。当浏览器渲染页面时，如果不知道图片的确切尺寸，它就无法为图片预留空间。一旦图片加载完成并显示出来，页面内容就可能突然向下或向上移动，导致用户正在阅读或点击的元素位置发生变化。这种体验非常糟糕，想想你正要点一个按钮，结果图片一加载，按钮移位了，你点到了别的地方，这很让人沮丧。通过明确指定
width和
height，浏览器在图片加载前就能知道其尺寸，从而预留出正确的空间，页面布局就不会跳动，大大提升了用户体验，也对Google的Core Web Vitals指标有积极影响。
接着是
loading属性，特别是
loading="lazy"。懒加载是一种非常有效的性能优化策略。想象一下，一个长页面有很多图片，如果所有图片都在页面初始加载时就尝试下载，那页面的加载速度会非常慢，用户可能还没看到下面的内容就离开了。
loading="lazy"告诉浏览器，只有当图片即将进入用户的视口（也就是用户快要看到它了）时才开始下载。这样，浏览器可以优先加载用户当前能看到的内容，减少了不必要的网络请求和带宽消耗，显著提升了页面的初始加载速度和响应性。但这里有个小陷阱，对于首屏（Above-the-fold）的关键图片，你反而不应该使用懒加载，因为它们是用户最先看到的，应该尽快加载。对于这类图片，要么不设置
loading属性（默认是
eager），要么明确设置为
loading="eager"，甚至可以配合
fetchpriority="high"来进一步提示浏览器优先加载。
@@##@@ @@##@@ @@##@@
响应式图片：srcset
和sizes
属性如何提升用户体验？
在各种设备屏幕尺寸层出不穷的今天，仅仅提供一张图片已经无法满足需求了。如果给手机用户加载一张为桌面端设计的大尺寸图片，不仅浪费带宽，还会拖慢加载速度；反之，如果给桌面用户加载一张小尺寸图片，又会显得模糊不清。
srcset和
sizes属性就是为了解决这个痛点，实现响应式图片，从而显著提升用户体验。
srcset属性允许你提供一个逗号分隔的图片URL列表，每个URL后面跟着该图片的固有宽度（例如
800w）或像素密度描述符（例如
2x）。浏览器会根据设备的屏幕宽度、像素密度以及网络状况等因素，智能地选择最合适的图片进行加载。这样，高分辨率屏幕设备可以加载更清晰的图片，而低分辨率设备则加载尺寸较小的图片，既保证了视觉质量，又优化了加载性能。
sizes属性则与
srcset配合使用，它告诉浏览器在不同视口大小下，图片将占据多少宽度。它由一个媒体条件列表和对应的宽度值组成。例如，
sizes="(max-width: 600px) 480px, 800px"表示当视口宽度小于600px时，图片宽度为480px；否则为800px。浏览器会根据这个信息，结合
srcset中提供的图片宽度，来选择最适合当前布局的图片。
@@##@@
在这个例子中：
srcset
提供了三张不同宽度的图片。sizes
告诉浏览器：- 当视口宽度小于600px时，图片占据100%的视口宽度。
- 当视口宽度在601px到1200px之间时，图片占据50%的视口宽度。
- 当视口宽度大于1200px时，图片宽度为800px。
浏览器会根据这些信息，从
srcset中挑选最匹配当前渲染尺寸的图片。这虽然看起来比单张图片复杂一些，但对于现代网站来说，投入这些精力是绝对值得的。它能确保你的用户在任何设备上都能获得快速、清晰的图片体验，这直接影响着他们对网站的感知和满意度。
还有哪些高级img
属性值得关注？
除了那些常用和对性能至关重要的属性，
img标签还有一些更高级、更细致的属性，它们在特定场景下能提供额外的控制和优化能力。
decoding属性是一个比较有意思的性能优化点。它向浏览器提示图片应该如何解码。它可以设置为
sync、
async或
auto。
sync
：指示浏览器同步解码图片，这意味着解码会阻塞渲染。这通常是默认行为。async
：指示浏览器异步解码图片，不会阻塞其他内容的渲染。这对于不那么重要的图片可以提升页面的响应性。auto
：由浏览器自行决定最佳的解码方式。 我个人在实践中，对于那些非关键的、可以稍后才显示的图片，会考虑使用decoding="async"
，希望浏览器能更智能地处理，不让图片解码拖慢首屏渲染。
crossorigin属性与跨域资源共享（CORS）有关。当你从不同的源（比如CDN）加载图片，并且希望在
canvas上操作这张图片，或者需要获取图片的像素数据时，就必须设置这个属性。它可以是
anonymous（匿名模式，不发送用户凭证）或
use-credentials（发送用户凭证）。如果没有设置
crossorigin，或者设置不正确，那么在
canvas上操作跨域图片时可能会遇到安全限制，导致“被污染”的
canvas无法导出数据。这是我在处理图片上传预览或图像编辑功能时经常会遇到的问题，忘记这个属性会导致很多奇怪的错误。
referrerpolicy属性则允许你控制在发出图片请求时，浏览器应该发送多少referrer信息。这对于保护用户隐私或满足某些服务器端统计需求很有用。它可以有多种值，例如
no-referrer（不发送任何referrer信息）、
origin（只发送源站信息）、
same-origin（只在同源请求时发送referrer）等。根据网站的安全和隐私策略，合理设置这个属性可以避免不必要的隐私泄露。
ismap和
usemap属性则与客户端图像映射（Client-side Image Maps）相关。
ismap是一个布尔属性，当
img标签在一个
a标签内部时，它会将图片点击的坐标发送到服务器。而
usemap则指向一个元素的
name或
id，允许你在图片上定义可点击的区域（
area标签）。虽然现在这种方式不如CSS和JavaScript灵活，但在一些老旧系统或特定场景下，它们仍然有其用武之地。
这些属性可能不是每个项目都会用到，但了解它们的存在和作用，能在你遇到更复杂的需求时，提供更多的解决方案。Web开发就是这样，细节往往藏着魔鬼，也藏着优化的机会。
