关于在不影响质量和速度的情况下在网络上显示图像，你需要知道的一切。
你还记得上一次你点击了一个链接，网页花了几分钟才展开，就像世界上最慢的窗帘一样？不管那张图片有多漂亮，那一定是一个令人沮丧的经历。如果你没有等待足够长的时间去看那个页面，你并不孤单。一个页面如果需要超过1到3秒的时间来加载，就会有用户跳出的风险。
没有人有耐心忍受一个缓慢的网站--尤其是在移动设备上--而图像是一个页面上下载总字节数的最大贡献者。
这里有一些有效的技巧，可以让你的用户享受你网站上的精彩图片，同时又不占用他们的带宽和影响质量。
什么是图像优化？
图像优化是提供最优质的图像的过程，同时保持其尽可能小的尺寸。换句话说，优化图像可以让你以最佳的格式、尺寸和分辨率来创建和显示图像，以提高用户参与度。
你为什么要关心图像优化？
互联网是沉重和笨重的，这背后的原因之一是图片的数量过多。但生动的视觉效果和美丽的图片是提供良好用户体验的关键，在电子商务中，你需要以吸引人的方式展示你的产品，优化图片变得至关重要。
这就是为什么图像优化很重要。缩小你的图像尺寸以使其更轻，并不意味着它需要看起来像一团无法区分的像素，所以你不必为了速度而牺牲质量，反之亦然。
优化你的图像会带来各种好处。
- 改善用户体验。 你的用户不希望等待你的图片加载。如果图片有关键或紧急内容，他们可能没有时间等待。在任何情况下，你要确保你的用户能够在你的页面上完成他们想要的和预期的任务，并尽可能少地遇到路障。
- 更好的页面性能。 大型的、未经优化的图片会减慢你的页面加载速度。你的网站越快，你的用户就越高兴。
- 增强可视性。 优化图像也有SEO的优势。经过优化的图片为搜索引擎提供了上下文信息，并使视觉内容更容易被接受--这确保了你的图片在谷歌的图片搜索中的排名。不仅如此，当你的页面加载得更快时，谷歌的搜索算法会以更多的可见度作为回报。
优化图片的最佳做法
有几种优化图片的方法。这里有一些建议，供那些想在显示视觉内容时确保最佳用户体验的开发者参考。
使用 <img> 标签
HTML <img> 标签和 CSS background-image 属性都提供了相似的结果——即显示视觉内容。但他们又有一些不同。
使用 <img> 标签可以让您更好地控制用户如何使用您的图片内容。 <img> 标签在以下情况下特别合适：
- 你的图像不仅仅是装饰性的，它是内容的一部分。
- 你的用户可能会把页面打印出来，你希望图像也能被打印出来。
- 该图像有一个基本的语义（如警告图标），你要确保这个背景能传达给屏幕阅读器等辅助技术。
- 你想让图像从搜索引擎中受益。谷歌不会自动索引背景图像。
- 你要依靠浏览器按照文本大小的比例缩放和渲染你的图像。
<img>标签也能帮助你的页面更快加载，并带有几个有用的优化属性，如srcset和大小（后面会有更多介绍）。
利用下一代图像格式的优势。
优化图像的另一个好方法是使用下一代格式，如WebP，以获得卓越的压缩和质量特性。WebP图像的文件大小比JPEG和PNG版本至少要小25-30%。与传统格式相比，WebP图像不仅加载速度更快，而且消耗的移动数据也更少。例如，Facebook发现，改用WebP图像后，JPEG的文件大小节省了25-35%，PNG的文件大小节省了80%。
并非所有的网络浏览器都支持WebP；然而，当你在HTML中使用<picture>标签与<source>时，它可以实现向后兼容，这意味着所有的浏览器都可以显示正确优化的图像格式。
使图像可以用alt文本访问。
替代文本，也被称为alt描述或alt文本，对图形的功能和外观进行准确的、与背景相关的描述。这不仅对改善一般的用户体验至关重要，而且对帮助残疾用户访问你的内容也是如此。除了提高数字可访问性之外，具体和写得好的alt文本有助于图片在搜索中获得更高的排名，并为你的网站吸引更多的流量。这也是良好用户体验的最佳实践；如果一张图片的加载速度不够快，用户仍然应该能够将其悬停在上面，了解它是什么。
就像alt文本很重要一样，标记那些除了增加装饰以外没有其他目的的图像也很重要。那些不是内容的一部分，只是为了增强页面外观的背景图片，需要有以 "演示 "为值的角色属性。
用srcset创建响应式图像。
除了图标和标识之外，大多数图片都需要调整大小以适应不同的屏幕尺寸。你可以用srcset创建响应式图像，而不是用固定的尺寸创建图像。
使用带有不同宽度的不同图形选项的srcset属性，可以让你根据用户的设备显示宽度向他们提供不同的图像。这可以确保他们无论如何访问你的网站，都能得到同样好的体验，同时提高性能，减少数据浪费。
最好使用w单位而不是x（x处理像素密度，更适合于固定尺寸的图像）。w单位可以帮助你根据屏幕宽度获取正确的图像。例如，<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="...">告诉浏览器根据用户的分辨率来显示正确的图像。
支持分辨率与尺寸的切换。
当浏览器在首次加载时预取图像时，它不知道应该以何种尺寸来渲染图像。 除非你在<img>标签上指定尺寸属性，否则浏览器会认为你的图像是整个页面的宽度，最终可能会获取过大的图像。
sizes属性是一种有用的方法，可以确保你事先让浏览器知道图像有多少像素宽。sizes属性可以让你指定图像的某些条件，以及如果这些条件为真，图像将填充的槽的宽度。你也可以不提供图像的绝对宽度（像素），而是用vw单位指定它所占屏幕的估计百分比。
保留你的长宽比。
当你根据屏幕尺寸调整图片的大小时，不要忘记保持图片的长宽比。 当你不优化你的图像以使其完全响应时，你可能会导致意外的布局变化。当你的页面上的图像改变位置或大小时，它可能会影响它周围内容的位置。这影响了理解力、可用性和整个用户体验。
你可以通过在HTML中指定图像的宽度和高度，并结合正确的CSS宽度和将CSS高度设置为 "自动"，来轻松地减少布局的变化。CSS中的object-fit属性是一个很好的补充。它可以让你告诉浏览器图像是否需要填满页面、覆盖、包含或缩小。
用fechpriority快速加载你的关键图像。
你的网页上有一些图片需要在第一次加载时被获取，作为最大内容图（LCP）的一部分。例如，你的网站上那张漂亮的折页上方的英雄图像显然是高度优先的。你希望这个图片能马上被用户看到，以达到最大的效果。使用fetchpriority="high"可以让你向浏览器指定这个图片需要被优先处理，浏览器不需要马上把资源花在其他图片上（比如折叠下面的图片）。
用懒加载和异步解码来加快性能。
使用loading="lazy"是一个很好的方法，告诉浏览器不要浪费宝贵的资源加载不在视口中的图片，在折叠上方。任何在用户向下滚动之前不会立即显示在网页上的东西都会被取消优先级，这有助于节约资源，合理使用资源，提高网站的性能。这只适用于折页以下和非LCP图像。
浏览器加载图像的方式在默认情况下没有进行性能优化。然而，你可以通过使用decoding="async"来解决这个问题，对于任何不在折页上方的东西。解码图片对性能有影响，所以如果你指定折叠线以下的非LCP图片不必先解码，这有助于提高网站的性能，使页面加载更快。你也可以为这些图片设置fetchpriority="low"。
自动化的图像优化
Cloudinary
Cloudinary 是一种数字资产管理器，具有图像组件，可自动执行图像格式和性能优化，以适应最终用户的设备。
Next.js 图片
Next.js 是一个 React 框架，可让您构建快速且用户友好的网站。 Next.js 图片 组件是 HTML <img> 的扩展。它使用现代图像格式自动调整图像大小，自动防止布局变化，并延迟加载首屏以下的图像，仅举几例。
Nuxt 图片
Nuxt 是 Vue.js 的开源框架。 <img> 标签的直接替代品。它专为图像优化而构建，与 Next.js Image 类似，它会自动调整图像大小、生成响应大小、支持原生延迟加载等。
Gatsby 图像插件
Gatsby是一个全栈式的前端框架，带有性能优化、SEO功能、可访问性和其他选项。Gatsby图像插件](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/)可以让你在保持高性能的同时将优化的图像添加到你的网站。
Builder.io
Builder.io用完全优化的图片生成所有内容。Builder带有先进的图像优化选项，因此，你可以简单地用Builder的性能至上、API驱动的产品来自动处理，而不是硬编码。例如，为您网站上的每张图片创建适当的尺寸属性可能是一个乏味和耗时的过程。但是，当你使用Builder时，它会分析你的图像，因为它与你的页面布局有关，并确定你的图像在所有设备尺寸下的精确尺寸，自动生成最佳尺寸属性。
腾讯云数据万象
腾讯云对象存储与数据万象服务，会自动将 png, jpg 图片转换为 webp 格式提供给前端（如果支持）。
Cloudflare
Cloudflare 提供图像托管与自动优化功能，同时只需为图像存储及请求次数付费，无需过分担心带宽问题。
