受访者对各种图片优化技术的评论
这篇博文列出了 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。”
延迟加载
- "在考虑延迟加载等功能时,请将用户放在首位,因为对很多用户而言,这种做法会让用户感到厌烦。"
- "请使延迟加载属性与背景图片一起使用。"
- "框架现在应该能够更好地处理素材资源。"
- “很久之前,我们已完成了从延迟加载模式转型的转变。有数百万图片和网站“未加载”的用户报告。这就是我们团队的总结。非技术用户很难描述问题。”
- “我很想更好地了解如何使用 Intersection Observer API 实现延迟加载,而不是使用传统技术。”
- “这非常适合我:pwafire.org/developer/codelabs/progressive-loading。”
背景图片
- "我通常会在 CSS 中将图片加载为背景。"
- “
<img>
标记存在问题且难以控制精细化的细节,尤其是当用户提交的内容时。我们更频繁地使用<div>
和背景图片样式,因为它让我们可以使用背景大小和背景位置,并防止右键点击图片保存。"
透明度
- “现在是 2019 年,为什么 JPG 图片没有 Alpha 透明度?
- “我只有在需要透明背景时,才对照片使用 PNG。”
低质量图片占位符 (LQIP)
- “我们使用 LQIPS,这是一种很好的技术,不用很早就加载高品质的图片就能持续吸引访问者。”
性能
- “实际上,我们最近的图片性能出现了问题。当用户向下滚动我们的网站时,我们会显示接下来的 60 张卡片,其中包含一个缩略图。由于同一域的 6 个连接限制,缩略图被拦截,并且如果用户继续向下滚动,下一个 AJAX 请求就会获得接下来的 60 张卡片。”
- “我们很想使用 HTTP/2,但是我们的大多数客户使用 IE11!因此,我们正在探索域分片 / 从其他域加载 AJAX JSON 数据请求。”
容量调整
- “抱歉,固然尺寸不大,对我来说,利用高度/宽度似乎更好。”
- "寻求减少生成大小的方法,现在大约是 12 个。"
- "没有 JS,动态调整图像大小真的很难,也不可能。"
- “像 responsivebreakpoints.com 这样的工具很适合 web.dev :)。”
高质量和高分辨率图片
- "如何在不影响 DPI 质量的前提下下载压缩图片?"
- “我们是一家文档管理公司。我们的应用可处理数百万张高分辨率扫描图像,通常为 TIFF 或 PDF。”
- “很麻烦。高分辨率的图片文件是打印格式所必需的;必须针对网络进行优化。缩小网页图片的大小很麻烦,但是,如果作者仅为专用于印刷版发布的图片提供轻量级文件,则更是引人注目。最后,我们会提供多种信息,说明在提交带海报图片的手稿时需满足的要求。然后,我们最终采用了复杂的工作流程来处理这些材料。”
浏览器功能
- "从浏览器进行自动自适应 src 剪裁(作为 [内置] 功能)非常有用,因为将所有图片剪裁为 4 种尺寸并编写所有标记非常耗时。如果我们能上传一张大照片并编写一个简单的图片标记,那么浏览器就会自动创建多个 src 属性,这将是一个胜出的功能。"
- “就我个人而言,当 CSS 为自适应图片(最大宽度:100%;高度自动;高度:宽度:100%;高度自动;自动)设置带有 的图片时,我很难避免页面自动重排,尤其是结合自适应图片/图片标记中的艺术指导时。避免采用“负内边距技巧”来实现固定图片比例,然后将图片放置在该比例框中,以此来避免这种情况。更好的浏览器支持/响应式图片处理将是一个非常大的帮助!”
- “请只获取第一帧,以停用 GIF 自动播放功能。”
CDN 和图片服务
- “Google 应该提供像 Cloudflare 这样的免费 CDN。”
- “或许使用更多工具来设置动态扩缩以及采用不同提供商的 CDN 会是不错的选择。”
- "一张超大过压缩的图片就是一种非常不错的解决方案,而且没有额外的制作成本。对于移动设备,您需要大约 1000 像素宽的图片(呈现宽度为 500 像素),这也是大/桌面设备的非 Retina 显示屏所需的大小。虽然我以前使用过,但我觉得图片调整 CDN 是一个非常糟糕的解决方案。CMS 应处理大小调整,如果设置过于复杂,(目前),单一解决方案是一个不错的折衷方案。"
- “CloudFlare 自动缩放图像以匹配用户显示器。因为图片是相对于用户显示屏而言的,所以我们可以节省加载时间。例如,如果用户正在使用手机,则网页不会以桌面设备尺寸的背景加载。"
- “Cloudflare 在后台执行此操作,我们只需选中设置面板中的复选框,而无需我们执行任何操作。”
- “重申一下,我能够成功使用 srcset 等的唯一原因是 Cloudinary 易于使用。但是,Cloudinary 价格昂贵,而且价格快速。这感觉就像是开发体验上的一个大缺口。”
- “我们需要一种以智能方式轻松自动剪裁图片的方法,以便它们能够在不同的环境中以不同的宽高比呈现。”
- “我还使用了其他提供商(例如 Un 阳光)提供的图片,因为这类图片对分辨率、质量和压缩的控制力度较低。”
CMS、平台和框架
- “在使用 CMS 构建网站时,我仍然很难找到使用图片的最佳方法。作者往往会配置具有不同尺寸的图片,并且希望图片不会缩小或缩放。我不确定是否可以为图片设置 max-width 或 max-height”
- “最近几个项目一直在使用 gatsby-image,从未回头查看。”
- "图片通常是最难的部分,因为最终用户要将它们放入内容管理系统中,它们可以使用任何尺寸和格式,有时原始图片没有理想的图片格式,而且尺寸不可用。"
- "图片难以维护,因为我们的系统采用自助式添加控件很难,除非问题是自动进行的,而不会影响分辨率。另外,对于我们来说,图片在移动设备和桌面设备上的显示效果都不正确”
- “我帮助人们优化他们的网站 (WordPress)。我发现图片的最大问题是:需要依赖 CDN 或插件来创建 WebP。srcset/picture 必须由主题开发者正确编码。大多数延迟加载插件的加载速度都很慢,导致用户体验不佳。背景图片很难延迟加载。"
成本/收益
- “新做法很有效,但会增加网站的开发时间。”
- “由于缺乏对 srcset 和 WebP 等新标准的遵循,许多财富 500 强公司纷纷采用这些新标准。考虑到这一点,许多公司抗拒这一变化,不让它成为当前网站不必要的开发成本。性能提升效果并未得到最终用户 (UX) 的广泛讨论或报告。如果存在任何差异,则会增加从网络上保存图片的难度。"
- "创建和管理多种尺寸和版本的成本较高。"
- “它们占用了大量服务器上的空间。”
搜索引擎优化 (SEO)
- "很难在可接受的图片质量和文件大小之间取得平衡。一方面,我希望快速加载以便 SEO 带来好处,但另一方面,质量不佳的图片会对界面/用户体验产生负面影响。”
图片在网络上的作用
- “网络上的内容太多了。停止使用不能增强文字内容的无用图片。"
- “你还记得那个时候网络没有图片,我们以 ASCII 艺术形式分享自拍照吗?”
工具、指南、标准和最佳做法:失望因素和请求
- [一位参与者为此次问卷调查撰写了一篇博文]
- “要求似乎在不断变化。作为 Web 开发者,这令人非常沮丧,因为一开始保存图片会耗费大量时间。我们尽最大努力优化图片,检查网站。几个月后,Google 决定进一步压缩图片,或者采用其他格式。这使我们无法为客户提供最佳解决方案,而且该解决方案持久存在,反而会给他们和我们造成代价高昂的努力。我们的一些小型企业客户根本没有预算让我们持续修正图片并重新保存它们以符合要求。我们没有预算在他们的管理套餐内完成这项工作。编写代码以针对不同设备调用不同尺寸的图片也很耗时。我们非常希望能够建立一个可以保存长期图像的系统。”
- “是的,我认为 Lighthouse 中的“保持请求计数较低且文件大小较小”全都出错了。如果某个网站通过 HTTP1.x 提供内容,那么肯定没问题;但如果网站通过 HTTP2 提供内容,请求数量就没那么重要,如果源自同一主机名,请求数量甚至不是问题。我有一个精简版网站,但我在同一个主机名上通过 HTTP2 加载了 30 个小型 WebP 文件,总共大约 35 个请求。Lighthouse 将此情况标记为“保持请求计数较低且文件大小较小”问题,虽然该问题非常快,并且由于同一主机名上使用的是 HTTP2,因此请求数量不会成为问题。而且,这些文件已经很小(大多数文件在 1 KB 到 2 KB 或更小之间)。我可以加载精灵,但还需要完成更多 CSS 计算。因此,请更新 Lighthouse 中的“保持请求计数较低且文件大小较小”报告,以将通过同一主机名的 HTTP2 纳入考虑范围。”
- “人们一直很难记得压缩自己的图片。”
- "跨浏览器行为仍然不可预测,因此最简单的解决方案往往也是最安全的。"