时间：2022-12-19 18:20:01
每天分享最新、最流行的软件开发知识和最新的行业趋势，希望大家一键三连，多多支持，跪求关注，点赞，留言。 了解如何为具有响应能力和现代格式的用户更好地创建HTML图像，而不使作为开发人员的生活变得更加困难。 本文介绍了如何将HTML图像匹配到具有高响应能力和现代格式的用户，同时又不使作为开发人员的生活变得更加困难。
我们只需要src。 很容易实施； 优秀的开发经验；无响应性图片； 没有具备备份功能的现代格式，可以使用更多的带宽； 最差的用户体验具有srcset属性。 中等工作； 良好的开发经验； 支持响应映像以减少带宽； 出色的用户体验with multiple andsrcset :支持响应图像和具有备份功能的现代格式，可节省潜在的未格式化的空间； src只是用图像管理器往我眼睛里喷墨西哥胡椒汁。 易于实施，自动以最佳大小和格式发送图片，开发者和用户双赢！ 假设我们只有一个从我的域加载图片的基本网站。 代码应与以下内容类似：
正文
具有单个图像标签并具有asrc和alt属性的HTML文档在技术上可以正常工作。 映像将按预期提供，但存在一些问题。
在大屏幕上，这个图片很好，但对于使用小屏幕设备的用户来说，1200像素宽的图片意味着需要下载比所需更多的图片。 下载可能需要一些时间，并且需要花费数据计划的费用。
第一步：优化图像和调整大小这第一步很重要，但我想很多人都很熟悉，所以不会太深入。
网站上的图像应该只有所需的大小。 如果你的照片只有600px宽，600px高，你就不应该让人们下载1200x800px的照片。 大多数网站不要求图像具有最高质量。 通过压缩图像，可以在不降低质量的情况下删除大量不需要的数据。 Squoosh是一个非常棒的APP应用程序，可以手动执行。
如果图像位于GitHub资源库中，还可以使用imgbot自动完成。
步骤2 :要创建响应图像，可以使用srcset属性。 使用此属性，可以根据特定的设备特性(如设备宽度)定义映像的多个源。
srcset可以通过这种方式向图像标记添加属性。
正文
我链接到五个不同大小的五个不同的图像，并定义它们对应的视口宽度。 即使我们在浏览器中打开我们的图像，在视觉上也不会真正改变。 但是，在引擎盖下，还有一些改进。
要在其他屏幕上重新装入，请打开开发工具的" web "选项卡。
在大屏幕上，您可以看到像以前那样下载了完整大小的图像( Command-Line-Blog-Cover.png )。 没什么特别的。
但是，如果要从小于或等于200像素的屏幕开始，请加载200x100像素的图像( command-line-blog-cover-200 X100.png )。
对用户来说，这个大小更小，更快。
只发送小图像的一个问题是，如果用户首先在小屏幕上加载页面，然后将浏览器调整为更大的大小，会发生什么情况？ 在大屏幕上放大小图像会被像素化。
假设属性提供了正确的图像，则从最小屏幕调整到最大屏幕时，会基于断点下载新图像，因此不会发生这种情况。
方便的是，从大屏幕到小屏幕的相反方向不会发生同样的动作。 因为，可以在小画面上提供大的图像，可以在不影响质量的情况下缩小。 随着屏幕变小，我不想下载额外的图片。 这是因为没有额外的好处，而是使用更多的数据。
这是一种非常方便的方法，可以通过节省带宽来提高用户体验，并通过提供大小合适的图像来提高性能，但仍有改进的余地。
第三步：使用现代图像格式加载的图像是PNG，但现代浏览器支持新的图像格式，如WebP和AVIF。 这些格式提供高压缩率，而没有明显的数据丢失。 这意味着可以减小文件大小，有效地提供相同的图像。
再一次，浏览器覆盖了HTML元素。
与srcset属性类似，图像元素允许您根据设备的特性定义不同的图像源以提供服务。
所以，可以根据设备的宽度和像素密度提供不同的图像等。 但是，区分图像元素和属性的一个方法是srcset可以支持多种mime类型。
如果浏览器支持，请以包含AVIF和WebP格式的图像元素为例进行添加。 当然，我们也希望继续提供有响应能力的版本。
正文图像源类型='图像/avif ' srcset=' https://Austin Gil.com/WP-content/uploads/command-line-blog-cover.avif 1200 w， 3359 Austin Gil.com/WP-content/uploads/command-line-blog-cover-1080 x540.avif 1080 w、3359 Austin Gil.com/com/WP command-line-blog-cover-768 x384.avif 768 w，3359 Austin Gil.com/WP-content/uploads/command-line-blog-cog/com uploads/command-line-blog-cover-200 X100.avif 200 w '源类型='图像/webp ' srcset command-line-blog-cover.webe https://Austin Gil.com/WP-content/uploads/command-line-blog-cover-1000 3359 Austin Gil.com/WP-content/upload 3359 Austin Gil.com/WP-content/uploads/command-line-blog-cover-480 x240.webp 480 w，https://Austin Gil.com/com/WP
(不需要标签srcset，因为它可以用作不受支持的旧浏览器的备份srcset。 ）
是的，我们有图像。 它以最小的尺寸为用户提供最现代的图像格式。
上面的代码是……漂亮吗？
你真的想在你的网站上添加新图像吗？
正确！
不！ 我们做了什么！
第四步：开始质疑生活的选择(你好，黑暗。 我的老朋友. )
第五步：简化现代图像格式是很好的。 既然我们解决了这个问题，显然上面的解决方案不太好。
根据想要定位的格式和软元件的宽度，需要不同版本的图像。 在上面的示例中，这是同一映像的11个版本( 5个AVIF、5个WebP、1个PNG )。
浏览器提供了更好的图像和更好的用户体验的功能，但这是以牺牲开发者的体验为代价的。
谁想付钱？ 不是我！ ）
当您上传图像以生成各种格式和大小时，可以自动运行此过程并将这些详细信息存储在数据库中。 虽然有sharp等提供帮助的工具，但这仍然需要做很多工作。 我很少看到人们这样做。 因为工作量太大或者他们完全没有考虑。
我的建议是外包。
今天使用Akamai图像和视频管理器。 因为尽管还有其他做同样工作的人，却是我最熟悉的服务。 主要目标是在不使开发人员发疯的情况下为用户提供最佳图像。
已设置图像管理器的实例。
要从我的域添加图像，只需将“图像”前缀添加到普通图像URL中即可。 因此，" Austin Gil.com/WP-content/uploads/command-line-blog-cover.png "应为" images.Austin Gil.com/WP-WP "
没什么有趣的。
但是，回到我们的代码中，去掉元素，替换旧的URL，看看我们能做什么：
正文
与将元素与AVIF和WebP一起使用相比，我认为没有人会抱怨它。 这一定是工作减少了，但结果呢？
重新加载页面时，会显示相同的图像(“Command-Line-Blog-Cover.png”)，但如果看到响应的标题，事情会变得有点意思。
虽然对PNG图像发出请求，但响应实际上是发送WebP数据。 这将减小图像大小。 这意味着只需打开映像管理器，无需执行任何操作即可为用户节省带宽。
步骤6 :改进了简化响应图像的格式，那么响应图像的大小如何？
我还把srcset属性设置为在小屏幕上提供小图像，在大屏幕上提供大图像。 但是，该系统仍然依赖于提供5种不同分辨率的5种不同图像。
还是很痛。
只要提供上传功能就成为重要的功能。 更不用说调整大小和保存不同的图像了。 幸运的是，我们使用的是映像管理器，因此可以使这个过程更简单。
我实际上不使用5个不同尺寸的图像，而是多次参照同一个图像。 但是，添加搜索字符串参数。 此参数明确定义要搜索的大小。
正文
请注意，虽然每个图像URL都移动到了同一个" Command-Line-Blog-Cover.png "文件，但某些imwidth附加了其他查询字符串。
如果像以前那样重新加载到这个小屏幕上调整到更大的屏幕上，可以看到同样的行为。 不同大小的不同图像被加载到各自的屏幕大小中。
但是，这里有很大的不同。 您不需要创建、上传和管理五张不同大小的图片，而只需要担心一张图片。 根据queer字符串参数生成不同的大小。
与其他情况相比，工作量明显减少，特别是在使用基于组件的框架时。
但是，我们能做的工作更少！
您可以返回到仅使用图像URL，然后让图像管理器选择合适的大小。
为了给你看那个，我喜欢在新的标签上打开图像而不是网站上。 当鼠标悬停在浏览器选项卡上时，图像大小显示为1200x600px。
打开开发工具后，可以导航到Elements选项卡以模拟iPhone SE等各种设备。
现在，重新加载会发生有趣的事情。
虽然URL完全相同，但可以看出图像大约是一半大小。 将鼠标悬停在标签上，可以确认大小为640x320像素。
最好的部分是什么？ 决定提供哪个图像的所有工作都在我(开发者)什么都不做的情况下进行。 每次请求都会自动发送设备特性，图像管理器会用更小的图像进行响应。
老实说，我实际上解释不了它是怎么工作的。 这很不可思议，而且很酷，让我的生活更轻松，让我的用户生活更好。
(如果你真的不可思议它是如何工作的，请通过Twitter联系我。 我会为你找到答案。 ）
如果您是Akamai客户且未使用此功能，请立即使用。
可选的“我是坏人”步骤：自己做！ 我们还想为非Akamai客户分享一些备选方案。 尽管自己没有用过，但两个开源项目看起来提供了类似的功能。
其中之一被称为imgproxy。 另一个叫Thumbor。 如果您熟悉了Docker，它看起来很容易安装。
我真的很喜欢Linode便宜又强大的VP。
我是DIY方法的忠实拥护者，但我认为也不是没有缺点。 我不知道这些服务在哪里托管图像。 如果与安装托管在同一服务器上，则可能存在两个问题。
如果要生成同一映像的多个版本，它们必须存在于某个地方。 如果他们住在同一个VPS，那可能会更贵。 请尝试在图像中使用对象存储等。 因为存储成本低廉。 从同一个位置加载映像可能会导致延迟问题。 我很喜欢图像管理器如何使用Akamai CDN网络，所以图像总是来自离用户最近的位置。 这样可以大幅缩短下载时间。 也就是说，我觉得那个还值得一试。
如果确实让你工作你喜欢的话，请回去告诉我发生了什么。 什么做得好，什么没用，什么精彩和/或缺什么？
结束了的想法真好。 这就是今天为你准备的全部内容。 我们介绍了处理图像的各种选项及其优缺点。 我们从src属性开始，添加srcset属性，然后使用不同的标签，最终将其全部烧掉，回到只是属性，但集成了图像管理器。 src
也就是说，这是一次非常迂回的旅行：
与此相对：
多么虎的尾巴啊。
本来可以说是节约时间，“改善图片的第一步：使用图片管理器”，其乐趣在哪里？ 我也喜欢挖掘原因。
虽然没有提到加载延迟、解码和获取优先级等内容，但这些内容与上下文更有细微的区别，上述建议几乎是全面的。
无论如何，我希望你喜欢它，并实现其中的一些解决方案。 因为发送现代形式的小图片是让互联网成为更快、更环保的地方的好方法。
