在2010年发布的iPhone 4为世界带来Retina屏幕后,网页开发者们要顾虑到的屏幕分辨率越来越复杂。老式的低分辨率电脑屏幕;越来越普及的4K桌面显示器;分辨率不高但尺寸小,极为精细的手机屏幕是三种典型分类。

在iPhone 4发布之前,所谓“支持移动设备”的网站还只是简单地为手机单独做一套网站。毕竟,iPhone 3G才刚刚发布两年,很多人还没从WAP技术统治的2G时代中回过神来。但此时,也正是iPhone和Android蓬勃发展的年代,这两个操作系统把基于WebKit的现代浏览器带到移动设备上,搭载他们的手机性能也和即将没落的塞班王朝不可同日而语。最新的手机逐渐能够较为“正常”地显示通常为电脑设计的网页了。但能显示并不意味着能正常使用;因为手机的屏幕尺寸比电脑小的多,通常只能显示电脑网页窗口的一小部分,需要来回拖拽、多次缩放才能使用电脑网页的功能。所以,当时“为移动设备优化”的网站虽然可能支持了浏览器的一些新特性,但移动端和手机端仍是完全不同的网页。

响应式布局的概念差不多和iPhone4同时推出。响应式布局提倡以一个网站兼容多种终端。所谓兼容,当然不只是说显示和功能正常,而是说用户体验在不同设备上都能得到保证。

时至今日,响应式设计已经大行其道。如今的现代web应用,尤其是各个初创IT公司的网页,几乎都使用了响应式设计。而响应式设计中一个很重要的元素是响应式图片。这个概念的意思是:对于网页中的同一个图片元素,在不同的设备上显示不同图片文件,以保证在多种终端下都能得到良好的用户体验。有如下典型方式:

  • 在屏幕横向宽度桌面设备上显示宽幅全景照片,在横向宽度很窄的手机上显示该照片的重要局部,以改进用户体验。
  • 在高分辨率设备上显示精细的照片,在低分辨率设备上显示分辨率较低的照片,以节省流量,提升页面性能。
  • 在支持webp的浏览器中使用这一先进图像压缩格式,以节省流量,提升页面性能。

如下动图展示了在不同的屏幕宽度下展示不同的图片内容;以及在不同的屏幕精细度下使用不同分辨率的图片。为了使效果显著,低分辨率图片被猛力压缩了。

屏幕录制

为了达到上述效果,我们需要4张图片。如果要为支持的设备启用webp,就需要8张图片。管理这些图片变体是个繁琐的工作。自然,我们可以在生成html页面时(比如构建阶段,或者使用某些CMS插件)创建这些图片的变体,但这会大大降低构建和部署速度;管理这些变体也是麻烦事儿,比如删除图片或者增加新的变体类型等。

令人高兴的是现在有一些服务能帮我们解决这些问题。不需要预先生成并储存图像变体。这些服务一般是一些CDN。在网页上使用CDN的URL引用图片,并在URL中编码图片变体需要的处理参数,即可得到处理后的图片。这种服务国内国外都有不少,比如国内的Up云(示例图片文档),国外的Imgix等等。

我录制上面动图用的服务是ShortPixel,这个服务也是我写这篇文章的初衷。比较有意思的是,它提供一个“智能裁剪”功能,号称可以自动发现图片中的核心元素,并自动将非核心的部分剪掉。在本文的例子里,这个智能裁剪确实发挥了作用。只是实际测试时这个功能并不稳定,经常得不到合理的结果。

原始图片
智能裁剪得到的图片
动图所使用的代码,图片路径已打码

关于压缩图片的知识及如何挑选开源压缩工具,请参阅:https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/

关于浏览器对响应式图片的支持及代码编写,请参阅:https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images