本教程主要参考Google 开发者网站文章和mdn文章，经过翻译整理
本课程面向初级和高级 Web 开发者，内容涵盖方方面面，包括确保高效请求和渲染图片来源的基础知识，以及如何在服务器之间传递常见图片格式的详细信息。在本课程中，您将学习如何在不影响图像质量的情况下以尽可能小的传输大小传输图像，至少不会以任何用户都能够看到的方式降低图像质量。
大约 2 分钟
使生成高性能映像来源成为开发过程的无缝组成部分。
从图片数据编码到为响应式图片提供支持的信息密集标记，本课程中的所有语法都是供机器与机器进行通信的方法。您已经了解了客户端浏览器向服务器传达其需求以及服务器进行此类响应的各种方式。自适应图片标记（特别是 srcset 和 sizes）能够用相对较少的字符描述大量信息。无论好坏，这种简洁是设计使然：简化这些语法，让开发者更易于解析，但可能会增加浏览器解析这些语法的难度。字符串越复杂，就越有可能出现解析器错误，或者从一个浏览器到另一个浏览器的行为出现意外差异。
大约 12 分钟
AV1 图片文件格式 (AVIF) 是一种基于开源 AV1 视频编解码器的编码。AVIF 比 WebP 更新，自 2020 年以来仅支持 Chrome 和 Opera、2021 年的 Firefox 以及 2022 年的 Safari。与 WebP 一样，AVIF 旨在满足网上光栅图片的所有可能用例：类似于 GIF 的动画、类似于 PNG 的透明度，以及在大小小于 JPEG 或 WebP 的文件下提升感知质量。
到目前为止，AVIF 显示了 promise。由 Netflix 开发的测试框架（开放媒体联盟（负责开发 AV1 编解码器的团体）的创始成员 Netflix 开发的这一测试框架）显示，与 JPEG 或 WebP 相比，可显著缩减文件大小。Cloudinary 和 Chrome 编解码器团队的其他研究结果表明，它相对于当前编码标准有利。
大约 3 分钟
您可能已经熟悉内容分发网络 (CDN) 的核心概念：由分布式但互连的服务器组成的网络，可快速高效地向用户分发资源。将文件上传到 CDN 提供商后，系统会在遍布全球的 CDN 网络的其他节点上创建副本。当用户请求文件时，数据将由地理位置最接近该用户的节点发送，从而缩短延迟时间。CDN 的分布式特性还可在网络中断或硬件故障时提供冗余，以及提供负载均衡以缓解流量高峰。
图片 CDN 可以提供所有这些优势，但有一个关键区别：它能够根据用于访问图片的网址的字符串来转换和优化图片内容。
用户需要向提供程序上传一张高分辨率的规范图片，提供程序会生成用于访问该图片的网址：
大约 5 分钟
了解如何通过 CMS（例如 WordPress）和其他网站生成器更轻松地使用自适应图片。
虽然与手动保存每张图片的替代剪辑并通过 Squoosh.app 等工具手动对其进行优化相比，这种方法确实有待改进，但在开发过程中，自动压缩图片存在一些限制。首先，您可能无法始终完全控制整个网站使用的图片 - 网络上大多数面向用户的图片更侧重于内容，而不是由用户或编辑者上传的开发问题，而不是与 JavaScript 和样式表等开发资源一起存储在代码库中。
大约 6 分钟
到目前为止，您已经充分了解了图片在网络上的运作方式，以及图片在为世界各地的用户打造更快速、更高效的体验方面发挥的作用。
其他资源
小于 1 分钟
在本单元中，您将学习如何为浏览器提供图片选择，以便浏览器可以就显示内容做出最佳决策。srcset 不是在特定断点交换图像源的方法，也不意味着将一张图片替换为另一张图片。这些语法可以让浏览器独立于我们来解决非常困难的问题：无缝请求并渲染根据用户浏览上下文定制的图片来源，包括视口大小、显示密度、用户偏好设置、带宽和各种其他因素。
这是一个很大的要求 - 在我们简单地为网页标记图片时，肯定比我们想考虑的要多。如果做好了这方面的工作，涉及到的信息量超出我们所能获取的信息。
使用 x 描述密度
具有固定宽度的 `` 在任何浏览上下文中都会占据相同数量的视口，而不考虑用户屏幕的密度（即构成屏幕的物理像素数量）。例如，在原版 Google Pixel 和新款 Pixel 6 Pro 上，固有宽度为 400px 的图片几乎会占据整个浏览器视口。这两款设备都具有标准化 412px 逻辑像素宽视口。
大约 18 分钟
尽管在现代 Web 上用处不大，但 GIF（图形交换格式）可以深入介绍图片编码的核心概念。
GIF 可以看作是图片数据的封装容器。它有一个称为“逻辑屏幕”的视口，用于绘制图像数据的各个帧，有点类似于 Photoshop 文档中的图层。这就是 GIF 如何支持其类似翻页动画的动画：将单个帧绘制到逻辑屏幕，然后替换为另一个帧，接着是另一个帧。当然，当我们处理静态 GIF（由绘制到逻辑屏幕的单个帧）时，这种区别并不重要。
GIF 使用无损数据压缩方法，即“Lempel-Ziv-Welch”算法的变体，供您参考。关于此算法的工作原理，我们并不在这里要详细讨论，但概括来讲：它的运作方式有点类似于“精简”JavaScript，其中重复的字符字符串会保存到某种内部字典中，以便可以在每次出现时引用，而不是重复。
大约 5 分钟
无论您学习了如何面向 Web 设计和开发应用，都只需极少的介绍 元素。[于 1993 年在 Netscape（当时为“Mosaic”）中推出](https://www.wired.com/2010/04/0422mosaic-web-browser/)并于 1995 年纳入 HTML 规范，在网络平台中一直发挥着一个简单但强大的作用。开发者使用 src 属性添加“源”图片文件，并在图片无法渲染或辅助技术请求替代图片时使用 alt 属性提供替代文本。在这里，浏览器只有一个作业：获取图片数据，然后尽快渲染。
大约 7 分钟
JPEG 是网络上使用最普遍的图片类型，这方面的原因在于，几十年来，JPEG 几乎一直是照片编码的正确选择。用例就在名称中：JPEG 代表“联合摄影专家组”，这是负责 1992 年首次发布该标准的委员会。您会看到 JPEG 的文件扩展名为 .jpg 或 .jpeg，但后者在当今时代很少见。
无损压缩会尽可能地以最佳方式被动压缩图片数据，而 JPEG 的有损压缩会设法通过对图片数据进行细微且通常察觉不到的更改来提高压缩效率。JPEG 将图片数据编码为 8x8 像素块，并采用算法描述这些块，而不是描述这些块中的各个像素。
这可能听起来像是纸面上的学术区别：“GIF 使用由像素组成的网格，而 JPEG 使用由较小的像素网格组成的网格。” 在实践中，使用块（而不是像素）意味着 JPEG 非常适合图片更常见的用例：构成真实照片的微妙分层渐变。
大约 9 分钟