调查对象对各种图片优化技术的评论
Sam Dutton
本文列出了 Google Web DevRel 在 2019 年夏季开展的图片优化技术调查问卷中收到的自由形式反馈。我们通过 Web Fundamentals 和 @ChromiumDev 征求了回复。开展此调查的目的是了解为什么大多数网站不遵循图片优化最佳实践，尽管这些实践似乎是提高效果的相对简单的方法。由于调查方法存在缺陷，因此此处未列出回复数据。
受众群体
- 如果您是 Web 开发者，不妨参阅这篇文章，了解新的图片优化技术，或详细了解其他 Web 开发者如何解决您遇到的问题，以及每种技术的成本、优势和局限性。
- 如果您是图片服务或图片 CDN 提供商，本文可能有助于您发掘新的市场机会。
- 如果您是框架、构建工具或 CMS 开发者，这篇文章可能会为您提供一些关于要实现的新功能的想法。
评论
WebP
- “我确实喜欢 WebP，但它尚未完全准备就绪。此外，我们的 WordPress 不支持 WebP。最受欢迎的照片编辑应用之一 Photoshop 也不支持 WebP。因此，我们无法依赖第三方应用或服务来压缩图片。”
- “使 WebP 可在 Safari 上使用。”
- “如果我可以从 Photoshop/Figma/Sketch 导出 WebP 图片，并且所有浏览器都支持 WebP，我非常乐意使用 WebP。”[注意：Sketch 支持 WebP]
- “新一代格式解决方案会很棒。”
- “在浏览器支持不佳时，不要过于强推 WebP，并考虑使用 PNG 而不是 JPEG 截取屏幕截图。”
- “Google 文档不支持 WebP。”
- “我们想完全使用 WebP，但担心浏览器兼容性。”
- “先解决浏览器兼容性问题，更新旧版浏览器或添加旧版修复程序，然后用户就更倾向于采用 WebP 等新图片类型…”
- “鼓励插件/主题开发者考虑支持 WebP 和其他新一代图片类型，以便非开发者无需费心处理。”
SVG 和矢量图片
- “我会尽可能使用（动画）SVG。gatsby-image 解决了很多此类问题。但当您深入了解他们所做的工作时，就会发现，让普通网站构建类似的结构来让图片正常显示是完全不现实的。浏览器应承担更多这方面的责任。”
- “能否记录一下如何使用 lottie.js 创建 SVG 动画？”
- “我们通常会在网站上使用分辨率较高但尺寸较小的 JPEG 图片，以避免加载时间过长。我们还会确保在必要时使用 SVG，以便为自适应设计提供优质体验。”
- “我们会尽可能使用优化的矢量图形，但图片除外。”
其他图片格式
- “我们 [需要] 更好地教育人们停止使用 GIF。”
延迟加载
- “在考虑延迟加载等功能时，请将用户放在首位，因为对许多用户来说，延迟加载很烦人。”
- “请让延迟加载属性与 background-image 搭配使用。”
- “框架应开箱即用，提供更好的素材资源处理功能。”
- “我们很久以前就已从延迟加载转换为提前加载。用户报告数百万张图片和网站“无法加载”。这是我们的团队对此问题的总结。非技术用户很难描述问题。”
- “我非常希望更好地了解如何使用 Intersection Observer API 进行延迟加载，而不是使用传统方法。”
- “这个网站对我来说很有用：pwafire.org/developer/codelabs/progressive-loading。”
背景图片
- “我通常在 CSS 中将图片作为背景加载。”
- “
<img>标记存在问题，很难控制其精细细节，尤其是对于用户提交的内容。我们更常使用<div>和 background-image 样式，因为这样我们可以使用 background-size、background-position 并防止右键点击保存图片。”
透明度
- “现在是 2019 年。How are JPGs still without alpha transparency?"
- “只有在需要透明背景时，我才会为照片使用 PNG 格式。”
低质量图片占位符 (LQIP)
- “我们使用 LQIPS，这是一种非常棒的技术，无需在很早就加载高画质图片，就能吸引访问者。”
性能
- “我们最近遇到了图片性能问题。当用户在我们的网站上向下滚动时，我们会显示包含缩略图的后续 60 张卡片。由于同一网域的连接数上限为 6 个，因此缩略图和用于获取接下来 60 张卡片的下一个 AJAX 请求都会被屏蔽，如果用户继续向下滚动，也会出现这种情况。”
- “我们非常乐意使用 HTTP/2，但大多数客户使用的是 IE11！因此，我们正在探索对其他网域进行网域分片 / 加载 AJAX JSON 数据请求。”
大小
- “对于 intrinsicsize，我很抱歉；利用 height/width 似乎更好。”
- “正在寻找减少生成尺寸的方法，目前大约有 12 种尺寸。”
- “如果没有 JS，动态调整图片大小非常困难，甚至是不可能的。”
- “responsivebreakpoints.com 这样的工具非常适合 web.dev :)。”
高质量和高分辨率图片
- “如何在不降低 DPI 质量的情况下下载压缩图片？”
- “我们是一家文档管理公司。我们的应用会处理数百万张高分辨率扫描图片，通常是 TIFF 或 PDF 格式。”
- “这很麻烦。印刷格式需要高分辨率图片文件；必须针对 Web 进行优化。缩减 Web 图片的大小很麻烦，但如果作者仅为打印出版的图片提供轻量文件，则会导致无法正常展示。我们在提交带有插图的手稿的要求方面给出了不同的信息。然后，我们会采用复杂的工作流来处理这些材料。”
浏览器功能
- “将浏览器中的自动响应式 src 剪裁作为 [内置] 功能会非常有用，因为将所有图片剪裁为 4 种尺寸并编写所有标记非常耗时。如果我们可以上传一张大照片并编写一个简单的图片标记，浏览器会自动创建多个 src 属性，这将是一项出色的功能。”
- “对于响应式图片，当 CSS 设置图片宽度（max-width: 100%; height auto 或 height: width: 100%; height auto）时，我个人很难避免页面重新流布局，尤其是在与自适应图片/图片标记的艺术指导结合使用时。避免此问题的最佳方法似乎是针对固定图片宽高比使用“负内边距黑客”，然后将图片放置在此宽高比框内。更好的浏览器支持/响应式图片处理功能将非常有帮助！”
- “请仅提取第一帧，以停用 GIF 的‘自动播放’功能。”
CDN 和图片服务
- “Google 应该提供像 Cloudflare 这样的免费 CDN。”
- “如果能有更多工具来设置动态扩缩和使用不同提供商的 CDN，就更好了。”
- “单张超大超压缩图片是一个非常不错的解决方案，无需额外的制作费用。您需要为移动设备提供大约 1000 像素宽的图片（呈现宽度为 500 像素），这也是大屏幕/桌面设备非 Retina 显示屏所需的尺寸。我认为图片大小调整 CDN 是一个非常糟糕的解决方案，尽管我过去曾使用过。CMS 应处理调整大小，如果设置过于复杂，单一解决方案是一个不错的折衷方案（目前）。”
- “CloudFlare 会自动缩放图片，以尽可能匹配用户的显示屏。因此，由于图片是相对于用户显示屏加载的，因此可以缩短加载时间。例如，如果用户使用的是手机，则不会以桌面版大小的背景加载。”
- “Cloudflare 会在后台执行此操作，我们只需在设置面板中勾选一个复选框，即可完成所有操作。”
- “再次强调一下，我之所以能够成功使用 srcset 等，完全是因为 Cloudinary 的易用性。但 Cloudinary 的费用会非常快地增加，这似乎是开发体验中的一个重大缺陷。”
- “我们需要一种方法，能够以智能的方式轻松自动剪裁图片，以便在不同情境中使用不同的宽高比。”
- “我还会使用 Unsplash 等其他提供商提供的图片，但对分辨率、画质和压缩程度的控制非常有限。”
CMS、平台和框架
- “在使用 CMS 构建网站时，我仍然在努力寻找使用图片的最佳方式。作者通常会配置不同尺寸的图片，并希望图片不会缩小或缩放。I am not sure if it is ok to set max-width or max-height on images"
- “在过去的几个项目中一直在使用 gatsby-image，从未后悔过。”
- “图片通常是比较难处理的部分，因为它们由最终用户放入 CMS，可能采用任何尺寸和格式，有时理想图片格式和尺寸的原始图片不可用。”
- “图片很难维护，因为我们的系统是自助式的，除非事情自动发生且不会影响解决方案，否则很难添加控件。此外，与桌面设备相比，移动设备上的图片看起来不正确。”
- “我帮助用户优化其网站 (WordPress)。我发现图片存在的最大问题是：需要依赖 CDN 或插件才能创建 WebP。主题开发者必须正确编码 srcset/picture。大多数延迟加载插件加载速度缓慢，用户体验不佳。背景图片很难延迟加载。”
成本效益
- “新做法很有效，但会增加网站的开发时间。”
- “由于缺乏对 srcset 和 WebP 等新标准的遵从，许多财富 500 强公司都很难快速采用这些标准。鉴于此，许多公司认为这项变更会增加现有网站的开发成本，因此拒绝进行变更。最终用户（用户体验）未广泛讨论或报告性能提升。不过，这会使从网络上保存图片变得稍微困难一些。”
- “创建和管理多种尺寸、版本的费用很高。”
- “它们会占用服务器上的大量空间。”
搜索引擎优化 (SEO)
- “在可接受的图片质量和文件大小之间取得平衡很难。一方面，我希望加快加载速度以提升 SEO 效果，但另一方面，画质较差的图片会影响界面/用户体验。”
图片在网络上的作用
- “网络上有太多这样的网站。请停止使用没有提升文字内容的无用图片。”
- “还记得网络上没有图片，我们用 ASCII 艺术分享自拍照的时代吗？”
工具、指南、标准和最佳实践：遇到的问题和建议
- [一位参与者撰写了一篇博文来回应此调查问卷]
- “要求似乎在不断变化。作为 Web 开发者，这非常令人沮丧，因为首先保存图片非常耗时。我们会尽力优化网站，并进行检查，但几个月后，Google 可能会决定图片可以进一步压缩或需要采用其他格式。这会妨碍我们为客户提供最长效的最佳解决方案，反而会给客户和我们带来高昂的费用。有些小型企业客户根本没有预算让我们不断修正图片并重新保存，以符合相关要求。我们没有预算在他们的管理套餐中执行此工作。编写代码以针对不同的设备调用不同的图片尺寸也非常耗时。最好能设计出一种系统，以便保存长时间内保持一致的图片。”
- “是的，我认为您在 Lighthouse 中对‘请保持较低的请求数量和较小的文件大小’的理解完全有误。如果网站是通过 HTTP1.x 提供服务，那么肯定会，但如果网站是通过 HTTP2 提供服务，那么请求数量就没那么重要了，如果请求来自同一主机名，则根本不是问题。我有一个轻量网站，但在同一主机名上通过 HTTP2 加载了 30 个小型 WebP 文件，总请求量约为 35 个。Lighthouse 将其标记为“请尽量减少请求数量并缩减文件大小”问题，但其速度非常快，并且由于同一主机名上使用了 HTTP2，因此请求数量不是问题。是的，这些文件已经很小了（大多数介于 1 KB 到 2 KB 或更小之间）。我可以加载精灵，但需要执行更多 CSS 计算。因此，请更新 Lighthouse 中的“请保持较低的请求数量和较小的文件大小”报告，以考虑通过相同主机名使用 HTTP2 的情况。”
- “用户一直很难记得压缩图片。”
- “跨浏览器行为仍然不可预测，因此最简单的解决方案通常是最安全的。”