为用户和开发人员改进 HTML 图像的 6 个步骤

每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

了解如何为具有响应式尺寸和现代格式的用户更好地制作 HTML 图像，而不会使您作为开发人员的生活更加困难。

1. 只需src：易于实施；良好的开发经验；没有响应式图像；没有带有后备功能的现代格式；可能使用更多带宽；最差的用户体验
2. 具有srcset属性：中等工作；好的开发经验；支持响应式图像以减少带宽；没有带有后备功能的现代格式；留下潜在的节省；好的用户体验
3. with multiple andsrcset：支持响应式图像和具有后备功能的现代格式；宁愿在我眼里喷墨西哥胡椒汁
4. 只需src使用图像管理器：易于实施并自动以最佳尺寸和格式发送图像；开发者和用户双赢！！！

假设我们只有一个从我的域加载图像的基本网站。代码可能如下所示：

具有单个图像标记且具有 asrc和alt属性的 HTML 文档在技术上可以正常工作。它按预期提供图像，但该图像存在一些问题。

在大屏幕上，这张图片会很好，但对于使用小屏幕设备的用户来说，1200 像素宽的图片意味着他们必须下载比他们需要的更大的图片。下载可能需要更长的时间，并且可能会花费他们的数据计划费用。

第 1 步：优化和调整图像大小

这第一步很关键，但我认为大多数人都熟悉，所以我不会太深入。

1. 您网站上的图像应该只有它们需要的大小。如果你的图片只有 600px 宽 x 400px 高，你就不应该让人们下载 1200x800px 的图片。
2. 大多数网站不需要图像是最高质量的。您可以通过压缩图像删除大量不必要的数据而不会降低质量。

Squoosh是一个非常棒的应用程序，可以手动执行此操作。

如果图像在您的 GitHub 存储库中，您也可以使用imgbot自动完成。

第 2 步：创建响应式图像

我们可以srcset像这样向我们的图像标签添加一个属性：

<正文>

我链接到五个不同尺寸的五个不同图像并定义它们相应的视口宽度。如果我们在浏览器中打开我们的图像，视觉上并没有真正改变。但在引擎盖下，有一些改进。

当我们在不同的屏幕上重新加载时，打开开发工具网络选项卡。

在大屏幕上，我们将看到像以前一样下载了全尺寸图像（Command-Line-Blog-Cover.png）。没什么特别的。

但是，如果我们从 200 像素或更窄的屏幕开始，我们会加载 200x100 像素的图像（Command-Line-Blog-Cover-200x100.png）。

对于用户而言，该大小将变得更小更快。

仅发送较小图像的一个问题是：如果用户最初在小屏幕上加载页面，然后将浏览器调整为更大的尺寸会发生什么？在大屏幕上拉伸小图像会使它像素化。

属性不会发生这种情况srcset（假设我们提供了正确的图像），因为当从最小屏幕调整到最大屏幕时，会根据它们的断点下载新图像。

方便的是，从大屏幕到小屏幕的另一个方向不会发生相同的行为，因为毕竟，您可以在较小的屏幕上提供大图像，并且可以缩小而不损失质量。随着屏幕变小，您不想下载额外的图像，因为那样会使用更多数据而没有任何额外的好处。

这是一种非常方便的方法，可以通过节省带宽来改善用户体验，并通过以正确的尺寸提供正确的图像来提高性能，但仍有改进的空间。

" Type="normal"SectionTitle="第 3 步：使用现代图像格式" Type="normal"@@ 我们正在加载的图像是 PNG，但现代浏览器支持新的图像格式，例如WebP或AVIF。这些格式提供了更高的压缩率而没有明显的数据丢失，这意味着我们可以以更小的文件大小有效地提供相同的图像。

再一次，浏览器让我们覆盖了HTML元素。

类似于srcset属性，图片元素允许我们根据设备特性定义不同的图像源来服务。

所以我们可以做一些事情，比如根据设备宽度或不同的像素密度提供不同的图像。但是将图片元素与属性区分开来的一件事srcset是我们可以针对不同的 mime 类型。

如果浏览器支持，让我们在示例中添加一个包含 AVIF 和 WebP 格式的图片元素。当然，我们还希望继续提供响应式版本。

<正文> <图片> <来源 类型="图像/avif" srcset=" https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.avif 1200w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080x540.avif 1080w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768x384.avif 768w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480x240.avif 480w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200x100.avif 200w" > <来源 类型="图像/webp" srcset=" https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.webp 1200w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080x540.webp 1080w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768x384.webp 768w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480x240.webp 480w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200x100.webp 200w" >

尽管请求是针对 PNG 图像的，但响应实际上是发送 WebP 数据。这导致图像尺寸更小，这意味着只需打开图像管理器，我就已经为我的用户节省了带宽，而无需做任何事情。

" Type="normal"SectionTitle="第 6 步：简化响应式图像" Type="normal"@@ 我们已经改进了格式，但是响应式图像大小呢？

我仍然将srcset属性设置为在小屏幕上提供小图像，在大屏幕上提供大图像。但是这个系统仍然依赖于提供五种不同分辨率的五种不同的图像。

还是很痛的。

仅提供上传功能就可以成为一项重要功能，更不用说调整大小和存储不同的图像了。对我们来说幸运的是，因为我们正在使用图像管理器，我们实际上可以使这个过程变得更简单。

我实际上将多次引用同一个图像，而不是使用五个不同大小的图像。但我将附加一个查询字符串参数，该参数明确定义我想要定位的大小。

<正文>

请注意，现在每个图像 URL 都转到相同的“Command-Line-Blog-Cover.png”文件，但其中一些imwidth附加了一个额外的查询字符串。

如果我像以前一样在这个小屏幕上重新加载并调整到更大的屏幕，我们会看到类似的行为。不同尺寸的不同图像被加载到它们各自的屏幕尺寸中。

但是这里有一个很大的区别：我们不必创建、上传和管理五张不同大小的不同图像，我们只需要担心一张图像。通过 queer 字符串参数生成不同的大小。

与其他情况相比，它的工作量要少得多，尤其是在您使用基于组件的框架时。

但我们可以做的工作更少！

我们可以回到只使用图像 URL，并让图像管理器为我们选择合适的尺寸。

为了展示它，我喜欢在新标签而不是网站中打开图像。将鼠标悬停在浏览器选项卡上会显示图像的尺寸，1200x600px。

如果我打开我的开发工具，我可以转到Elements 选项卡并模拟不同的设备，例如 iPhone SE：

现在，当我重新加载时会发生一些有趣的事情。

尽管 URL 完全相同，但我可以看到图像大约是一半大小。将鼠标悬停在标签上可确认尺寸为 640x320 像素。

最好的部分是什么？确定要提供哪个图像的所有工作都是在我（开发人员）无需做任何事情的情况下进行的。每次请求都会自动发送设备特征，并且 Image Manager 会以更小的图像进行响应。

老实说，我实际上无法解释它是如何工作的。这很神奇，而且超级酷，让我的生活更轻松，让我的用户生活得更好。

（如果你真的很好奇它是如何工作的，请在 Twitter 上联系我，我会为你找出答案。）

如果您是 Akamai 客户并且您没有使用此功能，您应该立即使用它！

" Type="normal"SectionTitle="可选的“我是个坏蛋”步骤：自己动手！" Type="normal"@@

我还想为非 Akamai 客户的人们分享一些替代方案。有两个开源项目看起来提供了类似的功能，尽管我没有亲自使用过它们。

其中之一称为imgproxy。另一个称为Thumbor。只要您习惯使用 Docker，它们看起来都很容易安装。

我真的很喜欢Linode的廉价、强大的 VP。

我是 DIY 方法的忠实拥护者，但我认为它并非没有缺点（我的意思是，除了设置和维护之外）。我不确定这些服务在哪里托管图像。如果它们与安装托管在同一台服务器上，则可能存在两个问题。

1. 如果您要生成同一图像的多个版本，则它们必须存在于某个地方。如果他们住在同一个 VPS 上，那可能会变得更贵。尝试对图像使用对象存储之类的东西，因为它的存储费用更便宜。
2. 从同一位置加载图像可能会导致延迟问题。我非常喜欢 Image Manager 如何使用 Akamai CDN 网络，因此图像总是来自离用户最近的位置。这可以大大加快下载时间。

也就是说，我认为它仍然值得一试。

如果你确实让它工作并且你喜欢它，请回来告诉我它是怎么回事。什么进展顺利，什么没用，什么很棒，和/或缺少什么？

结束的想法

换句话说，这是一个非常迂回的旅程：

对此：

多么虎头蛇尾。

可能本来可以节省时间，然后说“改善图像的第一步：使用图像管理器”，但其中的乐趣在哪里？我也喜欢挖掘原因。

我们甚至没有涉及诸如延迟加载、解码或获取优先级之类的内容，但这些内容更具上下文和细微差别，而上面的建议几乎是全面的。

无论如何，我希望您喜欢它，并且希望您实施其中一些解决方案，因为发送具有现代格式的较小图像是使互联网成为更快、更环保的地方的好方法。

" Type="normal"@@-->