使用 srcset 自动选择合适的图片大小。
根据 HTTP Archive， 典型的移动网页超过 2.6 MB，超过三分之二 就是图片。这正是优化的大好机会！
摘要
- 请勿保存大于其显示尺寸的图片。
- 为每张图片保存多个尺寸，并使用
srcset属性使浏览器能够选择最小尺寸。w值用于告知浏览器每个版本的宽度：
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
以合适的大小保存图片
您可以使用带有 与显示尺寸相匹配的尺寸。换言之，就是为图片提供合适的 宽度和高度。
请查看下面的图片。
两者看似几乎完全相同，但其中一个是 10 倍以上的文件 比另一个大。
第一张图片的文件大小要大得多，因为它是按尺寸保存的 尺寸远远大于显示屏尺寸这两张图片都以固定的 所以最好使用 。
对于固定宽度，请使用与 显示大小。
但是...如果显示屏尺寸不同怎么办？
在多设备环境中，图片并不总是以固定的尺寸显示。
图片元素可能有百分比宽度，或者是自适应布局的一部分 图片显示尺寸会随之更改，以适应屏幕尺寸。
...那么像 Retina 显示屏这样“需要像素化”的设备呢？
帮助浏览器选择合适的图片大小
如果您可以提供不同尺寸的每张图片， 是否让浏览器针对设备和显示尺寸选择最佳尺寸？ 很抱歉，有一个 catch-22 来确定哪些图片最合适。浏览器应使用尽可能小的 但是，如果不下载图片进行检查，它就无法知道图片的宽度。
这正是 srcset 的用武之地。您以不同尺寸保存图片
告知浏览器各版本的宽度：
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
w 值显示每张图片的宽度（以像素为单位）。例如：
small.jpg 500w 告知浏览器 small.jpg 为 500
像素宽。这让浏览器可以选择尽可能小的图片
来调整屏幕大小，而无需
下载图片以检查其大小。
下图显示了 srcset 的实际运用。如果您使用的是笔记本电脑或
桌面设备，请更改您的浏览器窗口大小，然后重新打开此页面。
然后使用浏览器工具的“网络”面板查看所使用的图片。
（您需要在无痕式窗口或无痕式窗口中执行此操作，否则
原始图片文件会被缓存。）
如何创建多个图片尺寸？
您需要为要使用的每张图片提供多种尺寸
尽在 srcset。
对于一次性图片（例如主打图片），您可以手动保存不同尺寸的图片。如果 如果您有很多图片（如产品照片），则需要自动运行。 为此，您可以采用两种方法。
将图片处理纳入构建流程
在构建流程中，您可以添加步骤来创建不同大小的 映像版本。请参阅使用 Imagemin 压缩图片 了解详情。
使用图片服务
可以使用商业服务自动制作和传送图片，例如 Cloudinary 或等效的开源代码，例如 Thumbor。
您上传高分辨率图片后，图片服务会自动
根据网址制作和提供不同格式和尺寸的图片
参数。例如，打开 Cloudinary 上的这张示例图片，并尝试更改网址栏中的 w 值或文件扩展名。
图片服务还具有更高级的功能，例如自动 “智能剪裁”并自动传送 WebP 图片 浏览器支持此格式，而不是 JPEG，而且无需更改文件 。
如果图片在不同尺寸下无法正常显示怎么办？
在这种情况下，您需要针对“artDIRECT”使用 <picture> 元素：
提供不同尺寸的图片或剪裁图片。了解详情
请查看艺术指导 Codelab。
像素密度呢？
高端设备具有较小（密度较高）的物理像素。例如， 高端手机在每行中的像素数可能是 Pixel 是一款更便宜的设备。
这可能会影响保存图片所需的尺寸。我们不会涉入血腥场景 还可以参阅此处的 使用密度描述符 Codelab。
图片的显示大小如何？
您可以使用 sizes 来进一步优化 srcset。
如果不设置，浏览器在选择
来自 srcset 的图片。sizes 属性用于告知浏览器
image 元素，因此浏览器可以选择使用最小的
image 文件。
在下面的示例中，sizes="50vw" 告知浏览器此图片将
在视口宽度的 50% 处显示。
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
您可以在以下网址了解实际操作： simpl.info/sizes 和“指定多个广告位宽度”Codelab。
是否支持浏览器？
srcset 和 sizes得到超过 90% 的
浏览器数量。
如果浏览器不支持 srcset 或 sizes，则回退到仅使用 src 属性。
这使得 srcset 和 sizes 变得非常棒的渐进式增强功能！
了解详情
请查看“优化图片”部分 ，以便更深入地了解映像优化。如需更多指导 不妨尝试免费试用“自适应” “Google 图片”课程 Udacity.