Jamstack网站上的图像优化指南

这篇文章得到了我们亲爱的朋友们的支持童话世界，一个友好的无头CMS，具有可视化编辑器、嵌套组件和可定制的网站和应用程序内容块。谢谢大家！

今天，在互联网上创造内容是常态，而不是例外。建立个性化网站、将产品数字化并开始看到结果从未如此简单。但是，当我们都开始大规模地创建内容，用越来越多的数据填充网络，并存储数百个zettabytes的内容时，会发生什么呢？

嗯，正是在这个时候，大品牌和托管平台，如谷歌或Netlify，寻求解决方案来优化我们产生的数据，使网络更轻，因此更快，促进措施和技术来提高我们网站的性能，并奖励那些这样做的人在他们的搜索引擎排名中的更好的位置。这就是为什么今天，网络表现和在线表现一样重要和时尚。

目录:

• 什么是Web性能？
• 为什么图像优化对Jamstack网站如此重要？
• 常见问题的修复
• 使用影像服务CDN的优势
• 案例研究:Jamstack站点中的图像组件
• 结论

什么是WEB性能？

网络性能是指网站加载的速度，下载的速度，以及应用程序在用户浏览器上的显示方式。它既是应用程序的客观度量，也是感知的用户体验(UX)。

如果你最大限度地减少加载时间，提高UX，让你的网站更快，更多的用户将能够访问你的网站，无论设备或互联网连接，增加访客保留，忠诚度和用户满意度，这将最终帮助你实现你的业务目标，并在搜索引擎中排名更好。

图像与网页表现的关系

很明显，当我们想到内容时，首先想到的是文本。但是，如果我们把文本放在一边，还有什么其他选择呢？视频？图像？是的，图像在今天的网络上扮演着非常重要的角色，不仅仅是在100%专注于这项资产的平台上，比如拼趣或者不溅，但在我们每天浏览的大多数网页上。

根据2021年末的网络年鉴，95.9%的网页包含至少一个%3Cimg%3E标签，99.9%的人至少产生过一次对图像资源的请求。

—媒体、图像、网络年鉴2021章节

就像图像在内容创作中的应用一样，优化它们是提高页面加载速度的关键并在尽可能短的时间内渲染，因为图像比任何其他资源占用更多的字节。虽然在过去几年中，由于使用了新的图像优化技术，每页图像传输的大小已经减少，但仍有许多工作要做。

图像是性能和UX的关键元素，从核心网络生命衡量标准，例如最大容量涂料试图识别给定页面上最重要的折叠内容，证明了这一点。

根据在中进行的分析网络年鉴的性能部分，的img标签代表42%的LCP元素的网站，而71-79%的页面有形象作为LCP元素，因为它们也可以使用CSS作为背景应用。这些数据清楚地表明，没有经过良好优化的图像，就不会有好的性能。

钥匙以用户为中心的指标通常取决于页面上图像的大小、数量、布局和加载优先级。这就是为什么我们的很多性能指南都在谈论图像优化。

—艾迪·奥斯马尼

为什么图像优化对JAMSTACK网站如此重要？

您可能已经知道，图像优化是在理想条件下交付高质量图像必须经历的过程，有时需要借助图像转换API和全球内容交付网络(CDN)使过程更简单和可扩展。

虽然优化图像在任何应用程序中都是必须的，但在Jamstack生态系统中，考虑到Jamstack架构的主要目标之一是提高web性能，优化图像甚至更为重要。

Jamstack是一种架构方法，它将web体验层从数据和业务逻辑中分离出来，提高了灵活性、可伸缩性、性能和可维护性。

—Jamstack.org

Jamstack站点是分离的:前端与后端是分离的，并且预先构建在高度优化的静态页面在被部署之前。但也不是一成不变的。通过使用JS和API与后端服务对话，它还允许动态内容。

你可能会问，图片和静态网站架构有什么关系？作为网页年鉴地址图片对Jamstack网站的影响,图像是一个好的UX的主要瓶颈。大部分责任在于使用较旧的格式，如PNG和JPEG，而不是使用下一代格式，如WebP或AVIF，使用户等待太长时间，并在核心网站生命指标中产生糟糕的分数。

但是，如果您担心由于大型、优化不佳的图像而无法获得预期的性能，请不要担心，因为这正是您阅读本文的目的！

常见问题的修复

在大多数web性能测量工具中，例如网页测试或者PageSpeed洞察，当我们生成关于网站状态的报告时，我们可以找到与图像相关的参数。这些参数涉及大小、格式、编码等等，即我们的图像有多优化。

在本节中，我们将列举由于使用图像而经常出现的问题，以及针对每一个问题的理论优化技术。

1.使用压缩文件

想象一下在一个项目中工作，比如开发到，成百上千的人可以上传内容到你的平台而不被审查。在这种情况下，您的项目应该具有大型高分辨率图像，因为不是每个人都知道带宽消耗和加载速度的下降。

解决办法

很明显，我们想给我们的内容创作者自由，但是我们不能对将在我们的网站上显示的图像的分辨率或传送和下载速度抱有侥幸心理。

解决方法是优化我们的图像，压缩它们并减小它们的尺寸几乎没有质量损失。有两种众所周知的压缩技术:

1. 有损压缩
   这种压缩类型使用的算法删除不太重要的数据以减小文件大小。
   当考虑使用这种有损技术时，我们必须记住两件事:通过丢弃部分图像信息，图像质量将受到负面影响，如果有人用这种技术压缩一张图片，而我们想再次压缩它，它会损失更多的质量。
2. 无损压缩
   另一方面，无损压缩压缩数据而不影响图像质量。
   这种技术允许图像在随后的压缩中不损失质量。尽管如此，它还是会导致文件变大，这是我们在质量不能改变项目价值主张的情况下尽量避免的。

当决定使用这些技术时，最重要的是了解我们的用户以及他们想从我们的网站上找到什么。如果我们考虑社交网络，我们可以看到两个明显的趋势，那些专注于文本和多媒体内容。

很明显，对于以文本为中心的社交网络来说，损失一点点图像质量对他们来说不是一个大问题，并且可以减少五分之一的图像文件大小，这意味着性能的大幅提高。因此，有损压缩显然是这种情况下的理想技术。然而，对于专注于图像内容的社交网络来说，最重要的事情是以优异的质量交付图像，因此无损压缩在这里会发挥更好的作用。

提示: 在使用图像服务CDN时，通常包括压缩，但了解更多可以帮助我们压缩图像的工具总是好的。为此，我为您带来了开源工具，您可以使用这些工具将图像压缩添加到您的开发工作流程中:

• Calibre图像操作是由性能专家在口径在拉取请求中自动压缩JPEGs、png和WebPs
• Imgbot，它将抓取GitHub中的图像文件，并在应用无损压缩后提交pull请求。

2.以下一代(NEXT-GEN)格式提供，高效编码

上述问题的部分原因可能是使用旧的图像格式如JPG和巴布亚新几内亚更差的压缩和更大的文件大小。但在决定是否采用下一代图像格式时，压缩不仅是一个重要因素，而且是其编码/解码速度和质量改善的重要因素。

虽然近年来我们确实听到了很多关于下一代格式的消息，如WebP、AVIF或JPEG XL，但仍然令人惊讶的是许多网站没有迁移到这些格式并继续下去提供了差的UX和差的性能结果。

解决办法

现在是我们走向一个更美好世界的时候了，在这个世界中，我们的图像压缩和它们的质量没有直接关系，我们可以在不改变它们的视觉外观的情况下让它们占用尽可能少的空间，并且使用下一代格式。

通过使用下一代格式，我们将能够大幅缩小我们图像的尺寸，制作它们下载更快和消费更少的带宽，提高我们网站的UX和性能。

“现代图像格式(AVIF或WebP)可以将压缩率提高50%，并提供更好的每字节质量，同时仍具有视觉吸引力。”

— Addy Osmani(图像优化专家)

让我们看看两种最有前途的格式，以及它们之间的区别。

• WebP

这是一种图像格式支持有损和无损压缩，与JPEG相比文件大小减少25-34%,以及动画阿尔法呢透明度，文件大小比PNG小26%。它显然是这些格式的替代品，直到AVIF和JPEG XL出来了。

它的优点是跨大多数现代浏览器的统一支持，其无损8位透明通道和有损RGB透明，支持各种类型的元数据和动画。另一方面，它不支持HDR或宽色域图像，也不支持渐进解码。

• AVIF

它是一种开源的AV1图像文件格式以更好的有损和无损压缩方式存储静态和动态图像比目前网络上最流行的格式，提供了50%的文件大小比JPEG节省。它与...直接竞争JPEG XL，其压缩质量相似，但功能更多。

AVIF格式的优点是它支持动画和图形元素在JPEG有局限性的地方，改进JPEG和WebP压缩，支持12位色深，支持HDR和宽色域、单色和多通道图像，以及带有alpha通道的透明胶片。然而，主要的缺点是AVIF的特点是它是并非与所有浏览器兼容并且它的编码/解码在时间和CPU方面更昂贵，导致一些图像cdn仍然不应用AVIF作为自动格式。

注意：如果您想详细了解每种格式之间的差异，我建议您阅读文章“使用现代图像格式:AVIF和WebP“由艾迪·奥斯马尼，并尝试AVIF和WebP质量设置选取器工具。

请记住，无论您选择哪种格式，如果您想要一个有效的结果，您必须从最佳质量的主图像生成压缩文件。

额外小费：假设您想利用浏览器支持有限的图像格式的特性。在这种情况下，您总是可以使用% 3c图片%3EHTML标记，如下面的代码所示，以便浏览器可以按照提供的顺序选择支持的图像格式。

%3C图片%3E %3C！-如果不支持AVIF，将呈现WebP。-% 3E % 3c source srcset = " img/image . avif " type = " image/avif " % 3E % 3C！-如果不支持WebP，将呈现JPG-%3E % 3c source srcset = " img/image . WebP " type = " image/WebP " % 3E % 3c img src = " img/image . jpg " width = " 360 " height = " 240 " alt = "我们想要的最后一种格式" % 3E % 3C/图片% 3E

3.指定尺寸

当宽度和高度尚未添加属性到%3Cimg%3E标签，浏览器无法计算图像的长宽比，因此没有保留正确大小的占位符框。这会导致图像加载时的布局变化，从而导致性能和可用性问题。

解决办法

作为开发人员，我们有能力提高UX，减少布局变化。我们已经完成了一部分，通过添加宽度和高度对着图像。

乍一看，这似乎是一个简单的任务，但在后台，浏览器在不同的场景中计算这些图像的大小是一项繁琐的工作:

• 用于在响应式设计中调整大小的图像。

如果我们有一个响应式设计，我们会希望图像保持在容器的边缘，使用下面的CSS来实现:

img {最大宽度:100%；高度:自动；}

为了让浏览器在加载前计算图像的长宽比和正确大小，我们的%3Cimg%3E标记必须包含定义的高度和宽度当我们在CSS中指定高度(或宽度)以及相反的属性width(或height)为auto时。

如果没有高度中的属性%3Cimg%3E，上面的CSS最初将高度设置为0，因此当图像加载时会有内容移动。

% 3c img src = " image . webp " width = " 700 " height = " 500 " alt = "完美场景" % 3E % 3c style % 3 eimg { max-width:100%；高度:自动；}%3C/style%3E

• 对于可以改变长宽比的响应图像。

在Chromium的最新版本中，您可以设置宽度和高度属性打开% 3c源%3E元素里面的% 3c图片%3E。这允许父容器在加载图像之前具有正确的高度，并避免不同图像的布局偏移。

% 3c picture % 3E % 3c source media = "(max-width:420 px)" srcset = " small-image . webp " width = " 200 " height = " 200 " % 3E % 3c img src = " image . webp " width = " 700 " height = " 500 " alt = "不同纵横比的响应图像。"%3E % 3C/图片% 3E

注意：要了解更多关于这个话题的信息，我推荐你看看文章“设置图像的高度和宽度也很重要“巴里·波拉德写的。

4.为所有设备优化图像，并适当调整它们的大小

通常，有了CSS，我们就有了让我们的图像占据我们想要的空间的超能力；问题是所有超级大国都负有重大责任。如果我们缩放一个图像，而之前没有针对该用例进行优化，我们将使浏览器加载一个不合适大小的图像从而恶化了装载时间。

当我们谈到未针对显示图像的设备和/或视窗进行优化的图像时，有三种不同的情况:

• 分辨率的变化
  当用于桌面的大图像在较小的屏幕上显示时，从移动设备到桌面会消耗多达4倍的数据，反之亦然，放大后会失去图像质量。
• 像素密度的变化
  当按像素调整大小的图像在具有较高像素密度的屏幕上显示时，不能提供最佳的图像质量。
• 设计的改变
  当具有重要细节的图像由于没有提供突出显示它们的裁剪图像而在其他屏幕尺寸上失去其用途时。

解决办法

幸运的是，今天我们有响应图像技术来解决上面列出的三个问题，通过向浏览器提供每个图像在大小、分辨率和/或设计上的不同版本，以便他们根据用户的屏幕大小和/或设备特征来确定加载哪个图像。

现在让我们看看这些解决方案是如何在每种情况下用HTML实现的:

1.分辨率更改修复:不同尺寸的响应图像

解决方案是正确调整原始图像的大小根据视口大小。

为此，请使用%3Cimg%3E用标记科学研究委员会属性是不够的，因为它只允许为浏览器指定一个图像文件。但是通过添加srcset和大小属性，我们可以指定相同图像和媒体条件的更多版本，以便浏览器可以选择显示哪一个。

让我们看一个响应图像的简单示例，并理解每个属性:

% 3c img src = " Image-desktop . webp " srcset = " Image-mobile . webp 360 w，image-tablet.webp 760w，Image-desktop . webp 1024 w " size = "(max-width:1024 px)calc(100 VW-4 rem)，1024px" alt="Image为3个视窗提供3种不同的尺寸" %3E

• 科学研究委员会
  我们必须始终添加科学研究委员会属性添加到我们的图像中，以防浏览器不支持srcset和大小属性。这科学研究委员会将作为后备，因此添加一个图像足够大在大多数设备上工作是至关重要的。
• srcset
  这srcset属性用于定义一个一组图像及其相应的宽度描述符(图像宽度以单位表示w)，用逗号分隔，浏览器可以从中选择。
  在上面的例子中，我们可以看到360瓦是一个宽度描述符，它告诉浏览器image-mobile.webp的宽度为360px。
• 大小[可选]
  这大小属性确保响应图像根据其占据的宽度进行加载而不是屏幕大小。
  它由逗号分隔的媒体查询列表，指明图像显示时的宽度在特定条件下，以固定宽度值作为默认值结束。

注意：单位如大众汽车（Volkswagen的缩写）,全身长的,雷姆,calc()，以及像素可以用在这个属性中。唯一不能使用的单位是百分比(%).

一旦我们准备好了我们的响应图像，它就是由浏览器使用指定的参数选择正确的版本在……里srcset和大小属性以及它所知道的关于用户设备。

浏览器过程包括了解设备宽度、检查大小属性，然后从srcset对具有该宽度的图像进行成像。如果没有该宽度的图像，浏览器将选择第一个比从大小(只要屏幕不是高密度)。

2.设备的像素密度更改修复:不同分辨率的响应图像

解决方案是允许浏览器来选择合适分辨率的图像对于每个显示密度。

为此，我们将使用srcset再次，但这一次，与密度描述符，用于根据设备像素密度提供不同的图像，而不是图像大小，也不需要指定大小属性:

% 3c img src = " Image-1440 . webp " srcset = " Image-360 . webp 1x，image-720.webp 2x，image-1440.webp 3x" alt="Image为3种设备密度提供3种不同的分辨率" %3E

• 科学研究委员会
  拥有image-1440.webp作为后备版本。
• srcset
  在这种情况下srcset属性用于为每个密度描述符1x、2x和3x指定一个图像，告诉浏览器哪个图像与每个像素密度相关联。
  在这种情况下，如果设备的像素密度为2.0，浏览器将选择图像版本image-720.webp。

3.设计变更修复:不同显示器的不同图像

解决方案是为每个屏幕尺寸提供具有不同比例或焦点的特别设计的图像这种技术被称为艺术指导。

艺术指导是将完全不同外观的图像提供给不同视窗尺寸以改善视觉呈现的实践，而不是同一图像的不同尺寸版本。

艺术指导技术通过% 3c图片%3E标签，它包含几个% 3c源%3E标签提供不同的图像供浏览器选择，并添加%3Cimg%3E作为退路:

% 3c picture % 3E % 3c source media = "(max-width:420 px)" srcset = " Image-mobile . webp " width = " 360 " height = " 280 " % 3E % 3c source media = "(max-width:960 px)" srcset = " Image-table t . webp " width = " 760 " height = " 600 " % 3E % 3c img src = " Image-desktop . webp " width = " 1024 " height = " 820 " alt = "图像提供

• 画
  不同图像的包装由0或更多% 3c源%3E和一个%3Cimg%3E。
• 来源
  每个% 3c源%3E标签指定了媒体资源，在本例中是一个图像，其srcset属性是该资源的文件路径。
  放置的顺序这个标签的事件。浏览器将读取条件在中定义媒体每个的属性% 3c源%3E 从上到下。如果其中任何一个为真，它将显示该图像，如果后续的为真，则不会被读取。
  一个例子是media="(max-width: 960px)"第二次% 3c源%3E。如果视窗的宽度小于等于960像素但大于420像素，image-tablet.webp会显示出来，但是如果小于420px，image-mobile.webp将会显示。
• img
  当浏览器不支持% 3c图片%3E或者% 3c源%3E标签或者没有满足任何媒体查询，则%3Cimg%3E标记将作为后备值或默认值，并将被加载。因此，在大多数情况下，添加一个合适的大小是至关重要的。

额外小费：您可以将艺术指导技术与不同的分辨率相结合。

% 3c picture % 3E % 3c source media = "(max-width:420 px)" srcset = " Image-mobile . webp 1x，Image-mobile-2x . webp 2x " width = " 360 " height = " 280 " % 3E % 3c source media = "(max-width:960 px)" srcset = " Image-table t . webp 1x，Image-table t-2x . webp 2x " width = " 760 " height = " 600 " % 3E % 3c img src = " Image-desktop . web

通过同时利用宽度和像素密度，您可以扩大显示图像源的标准。

注意：如果您想了解可以帮助您有效地裁剪和调整图像大小的工具，您可以看看提供响应图像通过web.dev

5.在关键资源之后加载您的映像

默认情况下，如果我们不指定图像的优先级，浏览器会在我们站点的关键资源之前加载它们，这会导致性能下降并增加互动时间(TTI)。

解决办法

幸运的是，本地解决方案，如惰性装载允许我们推迟用户最初看不到的屏幕外图像，并专注于最重要的图像，即折叠上方的图像。

为了使用这个本地解决方案，我们必须添加装货属性添加到我们的图像中懒惰的价值:

%3C！-本机惰性加载-% 3E % 3c img src = " image . webp " loading = " lazy " width = " 700 " height = " 500 " alt = " Loaded by appearance " % 3E

这装货属性可以有两个值:

• 懒惰的:推迟资源的加载，直到它到达视区。
• 渴望的:立即加载资源，不管它在哪里。
  虽然这是浏览器的默认行为，但在您希望设置loading="lazy "自动在你的所有图像和手动指定哪些将首先可见。

因为我们的目标是延迟不出现在文件夹上方的图像，所以我们不能添加装货首先显示的属性。否则，我们可以设置loading= "渴望"并补充fetchpriority= "高"更快地装载它们。

额外小费：使用的响应图像% 3c图片%3E元素也只能延迟加载，包括装货属性到回退%3Cimg%3E元素。

% 3c picture %3E % 3c source media = "(max-width:420 px)" srcset = " image-mobile . webp " % 3E % 3c img src = " image-desktop . webp " loading = " lazy " % 3E % 3C/图片% 3E

6.缓存您的图像

如果经常访问的图像没有被缓存，网站的性能会受到影响，因为将对图像提出许多请求已经加载到用户系统中的。

用户应该能够直接从他们的系统中查看图像，而不是再次等待他们下载。

解决办法

解决方案是存储频繁访问的图像用户的浏览器缓存，并使用CDN服务为您将它们缓存在服务器上。

注意：要了解缓存如何为用户工作以及我们可以遵循的不同策略，我推荐这篇演讲和文章”喜欢你的收藏“由萨姆·索罗古德。

一旦我们有了针对图像带给我们的每个问题的优化技术，就值得记住的是，对于图像的可访问性和SEO，还有更多的事情需要考虑，比如中高音属性、文件名及其元数据。

也就是说，是时候看看图像服务将如何为我们省去数百个令人头疼的问题了。我们去那里吧！