前端开发要与设计师和产品经理保持沟通，帮助他们了解什么样的效果更“简单、高效、可维护”。毕竟，对于CSS来说，改变圆角矩形的可以实时看到效果。如果使用照片，至少需要再次生成图片、切割和更换资源。高分辨率屏幕和多规格机器都加速了非图片特效的发展。如果你想想Windows7在高分辨率屏幕下不忍直视，你会发现原始的图片资源绝对不是越来越好。

　　其中，APNG和Webp格式发生较晚，尚未被Web标准采用。它们只能在某个平台或浏览器环境可以预测的情况下选择。虽然它们可以在不适用的环境中更好地降级，但本节暂时不讨论这两种格式。

　　规格，曾经是不必要讨论的话题，但自从出现以来，就变得复杂多了。这里只说大家关注的部分和结果，我们应该区分不同类型的像素:CSS像素和材料像素。一个CSS像素也许包含多个设备象素。对于照片，需要在高DPI屏幕上使用分辨率更高的图片。如果我们讨论Retina，我们需要两倍的分辨率(几乎是规格的4倍)。几乎没有机会主义的空间，屏幕那么大，需要的图片那么大。每个人都能控制的是“正好”显示所需尺寸的照片。例如，通过CSS或标签的wihth/height特性，将200x200的图片调整为100x100尺寸，其中包括(200x200)-(100x100)=30000个像素大小浪费的，这占图片大小的75%!之所以消耗这么多，是因为图片的大小与面积基本正相关，与宽强平方正相关。因此，更好地计算客户端具体显示的图片大小，可以大大降低图片大小。即使只有尺寸只有10px被消耗，但当图片足够过大时，这部分也会带来很大的影响。

　　上面提到的“只是”显示客户端所需大小的图片听起来很容易，不是吗?但当响应布局出现时，这变得非常困难。我们应该适用于从1920年到320年的许多设备，如果使用1920年宽度的照片，每个用户都应该投入额外的带宽和等待时间(这些设备通常对网络速度和流量更敏感)，如果使用320宽度的照片，1920年的屏幕就像在高清屏幕上使用DOS一样难以接受。

　　自然，我们也应该能够“响应”地载入照片，并根据不同的设备载入不同尺寸的照片。响应照片尚未写入Web规范，完成时存在诸多麻烦和兼容性限制。

　　虽然响应式照片还没有成为标准化，但它是网络图片优化的利器。要是得到广泛支持，就没有比缩小图片大小更有效的优化方法了。