每星期撷取新一代，最盛行的软件合作开发科学知识与新一代行业趋势，希望大家能够全屏帕西基，喔全力支持，下跪关注，点赞，回帖。
介绍怎样为具备积极响应式体积和当代文件格式的采用者更快地制做 HTML 影像，而不能使您做为合作开发人员的日常生活更为十分困难。
在责任编辑中，介绍怎样使 HTML 影像更适宜具备积极响应式体积和当代文件格式的采用者，而不能使您做为合作开发人员的日常生活更为十分困难。
<img>只需src：更易实行；良好的合作开发实战经验；没积极响应式影像；没暗含预备队功能的当代文件格式；可能将采用更多频宽；最糟的采用者新体验<img>具备srcset特性：中低组织工作；好的合作开发实战经验；全力支持积极响应式影像以减少频宽；没暗含预备队机能的当代文件格式；遗留下潜在性的节约；好的采用者新体验<picture>with multiple <source>andsrcset：全力支持积极响应式影像和具备预备队机能的当代文件格式；宁可在我眼中喷委内瑞拉肉桂汁<img>只需src采用影像配置文件：更易实行并手动以最差体积和文件格式发送影像；合作开发人员和采用者互惠互利！！！
假定我们只有一个从我的域读取影像的基本中文网站。标识符可能将如下表所示右图：
<!DOCTYPE html><html><节录> <img src=”https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png” alt=”配置文件终端产品和磁带机，大背景浅黄色笔法。” ></节录></html>
具有一般而言影像记号且具备 asrc和alt特性的 HTML 文件格式总的来说可以正常组织工作。它按预期提供影像，但该影像存在一些问题。
在电视萤幕上，这张相片会较好，但对于采用小萤幕电子设备的采用者来说，1200 画素宽的相片意味著她们必须浏览比她们须要的Villamblard的相片。浏览可能将须要较长的时间，并且可能将会耗费她们的数据计划服务费。
第 1 步：优化和调整影像大小
这第一步很关键，但我认为大多数人都熟悉，所以我不能太深入。
Squoosh是一个非常棒的应用程序，可以手动执行此操作。
如果影像在您的 GitHub 存储库中，您也可以采用imgbot手动完成。
第 2 步：创建积极响应式影像
影像可以有一个sr
我们可以srcset像这样向我们的影像标签添加一个特性：
<!DOCTYPE html><html><节录> <img srcset=” https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080×540.png 1080w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480×240.png 480w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200×100.png 200w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768×384.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=”配置文件终端产品和磁带机，大背景浅黄色笔法。” ></节录></html>
我链接到五个不同体积的五个不同影像并定义它们相应的视口宽度。如果我们在浏览器中打开我们的影像，视觉上并没真正改变。但在引擎盖下，有一些改良。
当我们在不同的萤幕上重新读取时，打开合作开发工具网络选项卡。
在电视萤幕上，我们将看到像以前一样浏览了全体积影像（Command-Line-Blog-Cover.png）。没什么特别的。
但是，如果我们从 200 画素或更窄的萤幕开始，我们会读取 200×100 画素的影像（Command-Line-Blog-Cover-200×100.png）。
对于采用者而言，该大小将变得更小更快。
仅推送较小影像的一个问题是：如果采用者最初在小萤幕上读取页面，然后将浏览器调整为Villamblard的体积会发生什么？在电视萤幕上拉伸小影像会使它画素化。
特性不能发生这种情况srcset（假定我们提供了正确的影像），因为当从最小萤幕调整到最电视萤幕时，会根据它们的断点浏览新影像。
方便的是，从电视萤幕到小萤幕的另一个方向不能发生相同的行为，因为毕竟，您可以在较小的萤幕上提供大影像，并且可以缩小而不损失质量。随着萤幕变小，您不想浏览额外的影像，因为那样会采用更多数据而没任何额外的好处。
这是一种非常方便的方法，可以通过节约频宽来改善采用者新体验，并通过以正确的体积提供正确的图像来提高性能，但仍有改良的空间。
第 3 步：采用当代影像文件格式
我们正在读取的影像是 PNG，但当代浏览器全力支持新的影像文件格式，例如WebP或AVIF。这些文件格式提供了更高的压缩率而没明显的数据丢失，这意味著我们可以以更小的文件大小有效地提供相同的影像。
再一次，浏览器让我们覆盖了HTML<picture>元素。
类似于srcset特性，相片元素允许我们根据电子设备特性定义不同的影像源来服务。
所以我们可以做一些事情，比如根据电子设备宽度或不同的画素密度提供不同的影像。但是将相片元素与特性区分开来的一件事srcset是我们可以针对不同的 mime 类型。
如果浏览器全力支持，让我们在示例中添加一个包含 AVIF 和 WebP 文件格式的相片元素。当然，我们还希望继续提供积极响应式版本。
gil.com/wp-content/uploads/Command-Line-Blog-Cover.avif 1200w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080×540.avif 1080w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768×384.avif 768w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480×240.avif 480w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200×100.avif 200w”200w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080×540.webp 1080w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768×384.webp 768w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480×240.webp 480w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200×100.webp 200w” > <img src=”https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png” alt=”配置文件终端产品和磁带机，大背景浅黄色笔法。” > </相片></节录></html>
（我们不须要标签srcset，<img>因为它可以做为不全力支持的旧浏览器的预备队srcset。）
好的，我们有一个影像，它只会以最小的体积为采用者提供最当代的影像文件格式。
上面的标识符是不是……很漂亮？
真的让您想向您的中文网站添加新影像，对吗？
正确的！？！？
不！我们做了什么！？！？
第 4 步：开始质疑日常生活选择
（你好黑暗，我的老朋友……）
第 5 步：简化当代影像文件格式
好的，既然我们已经解决了这个问题，很明显，上面的解决方案并不是较好。
对于我们想要定位的每种文件格式和电子设备宽度，我们须要不同版本的影像。在上面的示例中，这是同一影像的11 个版本（5 个 AVIF、5 个 WebP、1 个 PNG）。
尽管浏览器为我们提供了提供更快的影像和提供更快的采用者新体验的机能，但这是以合作开发人员新体验为代价的。
（谁愿意付钱？不是我！）
我们可以在上传影像以生成不同的文件格式和大小时手动执行该过程，然后将这些详细信息存储在数据库中。有一些工具可以提供帮助，例如sharp，但这仍然须要大量组织工作。我很少看到人们这样做，因为要么组织工作量太大，要么她们根本不考虑。
我的建议是外包。
今天我将采用 Akamai 影像和视频配置文件，因为它是我最熟悉的服务，尽管还有其他人做同样的组织工作。主要目标是在不让合作开发人员发疯的情况下为采用者提供最差影像。
我已经设置了一个影像配置文件的实例。
要从我的域中添加影像，我只需将“影像”前缀添加到常规影像 URL。所以“austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png”变成了“images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png”。
没什么太有趣的。
但是让我们回到我们的标识符，去掉<picture>元素，替换旧的 URL，看看我们能做什么：
<!DOCTYPE html><html><节录> <img srcset=” https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080×540.png 1080w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480×240.png 480w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200×100.png 200w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768×384.png 768w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png 1200w” data-fr-src=”https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png” alt=”配置文件终端产品和磁带机，大背景浅黄色笔法。” ></节录></html>
<picture>与将元素与 AVIF 和 WebP一起采用相比，我认为没人会抱怨这一点。这肯定是少了一些组织工作，但是结果呢？
如果我重新读取页面，我们可以看到相同的影像出现（“Command-Line-Blog-Cover.png”），但如果我们查看积极响应标题，事情会变得有点有趣。
尽管请求是针对 PNG 影像的，但积极响应实际上是推送 WebP 数据。这导致影像体积更小，这意味著只需打开影像配置文件，我就已经为我的采用者节约了频宽，而无需做任何事情。
第 6 步：简化积极响应式影像
我们已经改良了文件格式，但是积极响应式影像大小呢？
我仍然将srcset特性设置为在小萤幕上提供小影像，在电视萤幕上提供大影像。但是这个系统仍然依赖于提供五种不同分辨率的五种不同的影像。
还是很痛的。
仅提供上传机能就可以成为一项重要机能，更不用说调整大小和存储不同的影像了。对我们来说幸运的是，因为我们正在采用影像配置文件，我们实际上可以使这个过程变得更简单。
我实际上将多次引用同一个影像，而不是采用五个不同大小的影像。但我将附加一个查询字符串参数，该参数明确定义我想要定位的大小。
<!DOCTYPE html><html><节录> <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=”配置文件终端产品和磁带机，大背景浅黄色笔法。” ></节录></html>
请注意，现在每个影像 URL 都转到相同的“Command-Line-Blog-Cover.png”文件，但其中一些imwidth附加了一个额外的查询字符串。
如果我像以前一样在这个小萤幕上重新读取并调整到Villamblard的萤幕，我们会看到类似的行为。不同体积的不同影像被读取到它们各自的萤幕体积中。
但是这里有一个很大的区别：我们不必创建、上传和管理五张不同大小的不同影像，我们只须要担心一张影像。通过 queer 字符串参数生成不同的大小。
与其他情况相比，它的组织工作量要少得多，尤其是在您采用基于组件的框架时。
但我们可以做的组织工作更少！
我们可以回到只采用影像 URL，并让影像配置文件为我们选择合适的体积。
为了展示它，我喜欢在新标签而不是中文网站中打开影像。将鼠标悬停在浏览器选项卡上会显示影像的体积，1200x600px。
如果我打开我的合作开发工具，我可以转到Elements 选项卡并模拟不同的电子设备，例如 iPhone SE：
现在，当我重新读取时会发生一些有趣的事情。
尽管 URL 完全相同，但我可以看到影像大约是一半大小。将鼠标悬停在标签上可确认体积为 640×320 画素。
最好的部分是什么？确定要提供哪个影像的所有组织工作都是在我（合作开发人员）无需做任何事情的情况下进行的。每次请求都会手动推送电子设备特征，并且 Image Manager 会以更小的影像进行积极响应。
老实说，我实际上无法解释它是怎样组织工作的。这很神奇，而且超级酷，让我的日常生活更轻松，让我的采用者日常生活得更快。
（如果你真的较好奇它是怎样组织工作的，请在 Twitter 上联系我，我会为你找出答案。）
如果您是 Akamai 客户并且您没采用此机能，您应该立即采用它！
可选的“我是个坏蛋”关键步骤：自己动手！
我还想为非 Akamai 客户的人们撷取一些替代方案。有两个开源项目看起来提供了类似的机能，尽管我没亲自采用过它们。
其中之一称为imgproxy。另一个称为Thumbor。只要您习惯采用 Docker，它们看起来都很容易安装。
我真的很喜欢Linode的廉价、强大的 VP。
我是 DIY 方法的忠实拥护者，但我认为它并非没缺点（我的意思是，除了设置和维护之外）。我不确定这些服务在哪里托管影像。如果它们与安装托管在同一台服务器上，则可能将存在两个问题。
也就是说，我认为它仍然值得一试。
如果你确实让它组织工作并且你喜欢它，请回来告诉我它是怎么回事。什么进展顺利，什么没用，什么很棒，和/或缺少什么？
结束的想法
好吧，这就是我今天为你准备的全部内容。我们介绍了处理影像的不同选项及其优缺点。我们从<img>一个src特性开始，添加一个srcset特性，然后<picture>采用不同的<source>标签，最终把它全部烧掉，回到只是特性，但合并了影像配置文件<img>。src
换句话说，这是一个非常迂回的旅程：
<! – 坏 – ><img src=”https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png” alt=”配置文件终端产品和磁带机，大背景浅黄色笔法。”>
对此：
<! – 好 – ><img data-fr-src=”https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png” alt=”配置文件终端产品和磁带机，大背景浅黄色笔法。”>
多么虎头蛇尾。
可能将本来可以节约时间，然后说“改善影像的第一步：采用影像配置文件”，但其中的乐趣在哪里？我也喜欢挖掘原因。
我们甚
无论怎样，我希望您喜欢它，并且希望您实行其中一些解决方案，因为推送具备当代文件格式的较小影像是使互联网成为更快、更环保的地方的好方法。
