6个步骤来改善用户和开发人员的HTML图像
#html #前端 #发展 #optimization

tldr：

  • <img>与src ：易于实现。良好的开发人员经验。没有响应式图像。没有带有后备的现代格式。可能使用更多的带宽。最糟糕的用户体验。
  • <img>带有srcset属性：中等工作。好的开发人员经验。支持响应式图像以减少带宽。没有带有后备的现代格式。在桌子上保留潜在的节省。可以用户体验。
  • <picture>具有多个<source>和srcset ：支持带有后备的响应式图像和现代格式。宁愿在我眼中喷墨帕替诺果汁。
  • <img>与kude1一起使用Image Manager ：易于实现并自动以最佳尺寸和格式发送图像。开发人员和用户的双赢！

让我们说我们只有一个基本网站，它正在从我的域中加载图像。我们的代码可能看起来像这样：

<!DOCTYPE html>
<html>
<body>
  <img 
    src="https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png"
    alt="Command line terminal and old PC with an indigo brush stroke in the background."
  >
</body>
</html>

具有带有src和alt属性的单个图像标签的HTML文档。从技术上讲，这很好。它按预期提供图像，但此图像有几个问题。

Command Line Blog Cover

在大屏幕上，此图像就可以了，但是对于具有小屏幕设备的用户，1200px宽的图像意味着他们必须下载比所需的更大图像。下载可能需要更长的时间，这可能会花费他们的数据计划。

步骤1：优化和调整图像

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

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

Squoosh是一个非常棒的应用程序。

，如果图像在您的github存储库中使用imgbot。

，您也可以自动完成它。

步骤2：创建响应式图像

图像可以具有srcset属性，允许我们根据某些设备特性（例如设备宽度）为图像定义多个来源。

我们可以像这样添加一个srcset属性：

<!DOCTYPE html>
<html>
<body>
  <img
    srcset="
      https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080x540.png 1080w,
      https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480x240.png 480w,
      https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200x100.png 200w,
      https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768x384.png 768w,
      https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png 1200w"
    src="https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png"
    alt="Command line terminal and old PC with an indigo brush stroke in the background."
  >
</body>
</html>

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

我们在不同屏幕上重新加载时打开DevTools网络选项卡。

在大屏幕上，我们会像以前一样看到完整尺寸的图像（Command-Line-Blog-cover.png）。没什么特别的。

但是，如果我们从200px或更狭窄的屏幕上开始，我们将加载200x100px图像（命令 - blog-cover-cover-200x100.png）。

那个大小将要小得多，用户下载的速度更快。

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

不发生srcset属性（假设我们提供正确的图像），因为从最小的屏幕到最大的屏幕进行调整，新图像被下载与它们的突破点相对应。

方便地，同样的行为不会发生在另一个方向，大屏幕上的大屏幕，因为毕竟，您可以在较小的屏幕上提供大图像，并且可以缩小而不会失去质量。您不想随着屏幕越来越少，您不想下载额外的图像，因为这将使用更多的数据而没有任何添加好处。

，这是一种非常方便的方法，可以通过适当的尺寸提供正确的图像来节省带宽和提高性能，但仍有改进的余地。

步骤3：使用现代图像格式

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

再次，浏览器让我们覆盖了HTML koude4 element。

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

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

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

<!DOCTYPE html>
<html>
<body>
  <picture>
    <source
      type="image/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"
    >
    <source
      type="image/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"
    >
    <img 
      src="https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png"
      alt="Command line terminal and old PC with an indigo brush stroke in the background."
    >
  </picture>
</body>
</html>

（我们不需要srcset在<img>标签上

好吧，我们有一个图像，只能以最小的尺寸为用户提供最现代的图像格式。

上面的代码不恰好是？

确实使您想在网站上添加新图像，对

对！？！？

（ಥ¥¥¥）

神圣的废话！不！我们做了什么！？！？

步骤4：开始质疑生活选择

（ð¶你好黑暗，我的老朋友¶）

步骤5：简化现代图像格式

好吧，既然我们很明显，上面的解决方案不大。

我们需要针对目标的每种格式和设备宽度的图像的不同版本。从上面的示例中，同一图像的S 11 版本（5 Avif，5 WebP，1 PNG）。

尽管浏览器为我们提供了功能以提供更好的图像并提供更好的用户体验，但它以开发人员体验为代价。

（谁想付钱？不是我！）

上传图像以生成不同格式和尺寸，然后将这些详细信息存储在数据库中时，我们可以自动化该过程。有一些工具可以提供帮助，例如sharp，但这仍然很多工作。我很少看到人们这样做，因为这要么太多了，要么没有考虑。

我的建议是外包。

今天，我将使用Akamai Image and Video Manager，因为我最熟悉的服务，尽管有些其他人也从事相同的工作。主要目标是为用户提供最佳图像，而不会使开发人员发疯。

我在images.austingil.com上设置了图像管理器的实例。

要添加来自域中的图像，我可以暗示将图像前缀添加到常规图像URL中。因此，austingil.com/wp-content/uploads/command-line-blog-cover.png-映射效果。 。

没什么好有趣的。

但是，让我们回到我们的代码，摆脱<picture>元素，替换旧的URL，看看我们可以做什么：

<!DOCTYPE html>
<html>
<body>
  <img
    srcset="
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080x540.png 1080w,
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480x240.png 480w,
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200x100.png 200w,
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768x384.png 768w,
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png 1200w"
    src="https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png"
    alt="Command line terminal and old PC with an indigo brush stroke in the background."
  >
</body>
</html>

我认为，与使用AVIF和WebP的<picture>元素相比，任何人都不会抱怨这一点。这绝对是少的工作，但是结果呢？

如果我重新加载页面，我们可以看到相同的图像遇到了（命令行blog-cover.pngâ），但是如果我们查看响应标题，事情会有所一点有趣的。

尽管请求是PNG图像，但响应实际上是发送WebP数据。这会导致较小的图像大小，这意味着仅通过打开图像管理器，我已经为用户保存带宽而无需做任何事情。

步骤6：简化响应式图像

我们改进了格式，但是响应式图像大小呢？

我仍然设置了srcset属性，可以在小屏幕上提供小图像，并在大屏幕上提供大图像。但是该系统仍然依赖于提供五个不同分辨率的五个不同图像。

仍然很痛苦。

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

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

<!DOCTYPE html>
<html>
<body>
  <img
    srcset="
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png?imwidth=1080 1080w,
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png?imwidth=480 480w,
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png?imwidth=200 200w,
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png?imwidth=768 768w,
      https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png 1200w"
    src="https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png"
    alt="Command line terminal and old PC with an indigo brush stroke in the background."
  >
</body>
</html>

请注意，现在每个图像URL都转到相同的命令行blog-cover.png文件，但是其中一些图像附加了附加的imwidth查询字符串。

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

但是这里有一个很大的区别。而不是必须创建，上传和管理五个不同尺寸的不同图像，我们只需要担心一个图像。不同的大小是通过Queer String参数生成的。

这比其他可能的工作要少得多，尤其是在使用基于组件的框架时。

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

我们可以返回使用图像URL，然后让Image Manager选择适合我们的大小。

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

如果我打开了DevTools，我可以转到“元素”选项卡并模拟其他设备，例如iPhone SE

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

尽管URL完全相同，但我可以看到图像大约是一半的大小。悬停在选项卡上的尺寸为640x320px。

和最好的部分？确定要使用的图像的所有工作都没有我，开发人员必须做任何事情。设备特性是自动发送的，并且图像管理器正在以较小的图像进行响应。

说实话，我实际上可以解释它的工作原理。这只是魔术，它超级酷，使我的生活更轻松，我的用户生活得更好。

（如果您真的很好奇它是如何工作的，hit me up on Twitter和我会为您找到答案。）

如果您是Akamai客户，并且您不使用此功能，则应立即开始使用它！

可选的 - 我是一个坏蛋：滚动自己！

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

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

我真的很喜欢Linode廉价，强大的VPS，如果您想尝试启动其中任何一个实例，则可以使用此链接获得100美元的信用。

linode.com/akatube

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

  1. 如果您重新生成了同一图像的一堆版本，则必须居住在某个地方。如果他们生活在相同的VPS上，那可能会变得更加昂贵。尝试将诸如Object Storage之类的东西用于图像，因为
  2. 从同一位置加载图像可能会导致延迟问题。 Image Manager具有可用的Akamai CDN网络，因此图像将始终来自最近的用户位置。这可以大大加快下载时间。

也就是说，我认为仍然值得检查。

如果您确实可以正常工作并且喜欢它，请回来，让我知道它的发展情况。进展顺利，什么不起作用，什么很棒，缺少什么？

结束思想

好吧，这就是我今天为您服务的。我们浏览了处理图像及其利弊的不同选择。首先从具有src属性的<img>开始，添加了一个srcset属性，带有不同的<source>标签，然后移动到<picture>，并最终将其全部刻录下来，然后用src属性恢复了<img>，但是Informated Image Manager。

。

。

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

<! – BAD – >
<img
  src="https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png"
  alt="Command line terminal and old PC with an indigo brush stroke in the background."
>

对此：

<! – GOOD – >
<img
  src="https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png"
  alt="Command line terminal and old PC with an indigo brush stroke in the background."
>

如何消极。

无论如何，我希望您喜欢它，希望您实施其中一些解决方案，因为以现代格式发送较小的图像是使互联网更快，更绿色的好方法。

非常感谢您的阅读。如果您喜欢这篇文章，请share it。这是支持我的最佳方法之一。如果您想知道何时发布新文章，也可以sign up for my newsletter或follow me on Twitter。

最初在austingil.com上发布。