Web开发人员阅读列表：响应式图像

As they are often the largest contributor to page size and load time, bitmap images offer a challenge for the developer: balancing image quality, resolution and file size for optimimum results. Recent additions to HTML5 and CSS have made this task somewhat easier, but it is vital to start with an understanding of the basics issues of resolution, relative sizes and pixel density, before moving on to syntax and solutions:

由于位图图像通常是页面大小和加载时间的最大贡献者，因此给开发人员带来了挑战：平衡图像质量，分辨率和文件大小以获得最佳结果。 HTML5和CSS的最新添加使此任务稍微容易一些，但是至关重要的是，在继续使用语法和解决方案之前，首先要了解分辨率，相对大小和像素密度的基本问题：

Time: Five hours

时间：五个小时

Prerequisites: basic HTML and CSS for images

先决条件：图像的基本HTML和CSS

Goals: Add responsive images to a web page, covering several design scenarios.

目标 ：将响应式图像添加到网页，涵盖几种设计方案。

Further reading: Jason Grisby has an excellent 10-part series on responsive images; Jake Archibald has a nice summary in Anatomy of Responsive Images

进一步阅读：杰森·格里斯比(Jason Grisby)撰写了精彩的10部分系列的响应图像 ； 杰克·阿奇博尔德(Jake Archibald)在“响应图像的解剖学”中有一个不错的总结

翻译自: https://thenewcode.com/1177/Web-Developer-Reading-List-Responsive-Images