在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