标准智能手机分辨率显示的页面

suraiyaislamsum

Mango的响应式网站（桌面左，移动右） Mango 的响应式网站（桌面版左，移动版右）。（大预览） 虽然响应式网站在桌面和移动设备上看起来都很好，但幕后存在大量带宽浪费，这也会减慢图像加载时间，从而影响网站访问者。 上面的网页图像以 1934×2048 像素的最高分辨率传递给所有设备。上面桌面视图中可用的实际尺寸为 700×442，而移动视图仅允许 200×213 像素的尺寸。这意味着 1934 像素宽的巨大图像可以传输到小得多的显示器上。该高分辨率图像重 766KB。如果将其缩小到桌面宽度恰好 700 像素 (DPR 1.0)，则该图像的重量仅为 119KB，文件大小节省 84%。 如果您将图像进一步缩小到恰好 200px 宽（较小的移动设备分辨率所需），则相同的图像仅重 14KB，。

文件大小减少 98%，显着加快页面加载时间并显着节省带宽，尤其是当有每个网页上有多个图像。 另一个例子是《Smashing》杂志。看一下下面 Smashing 网站上响应式网页的两个屏幕截图，第一个在笔记本电脑显示屏上，第二个在移动设备上： Smashing Magazine 的响应 购买电话号码列表 式网站（桌面版左，移动版右） Smashing Magazine 的响应式网站（桌面版左，移动版右）。（大预览） 相同的 500×750 原始图像被传送到所有不同的设备分辨率和浏览器尺寸。原始图像大小为 92.4KB。我们可以通过将 JPEG 质量降低到 80% 并进一步优化图像来轻松减小文件大小，使文件大小仅为 66.8KB。但即便如此，当可用尺寸仅为 356×534 像素时，也会传递相同的图像。对于较小的尺寸，我们可以将图像缩小到正好 356 像素。



宽，以获得 36.2KB 的优化 JPEG 文件，节省 46% 的文件大小，减少所涉及的带宽并改善用户体验。 错误 2：— 创建太多不同的图像版本  希望将可用显示分辨率与交付的图像更好地匹配的 Web 开发人员可以为每个图像创建多个版本。有一些框架和云服务（无耻插件：例如Cloudinary）可以通过动态缩小所有不同分辨率的图像来简化此过程。这种方法可确保将正确的图像传送到不同的设备和显示器。视觉质量好，用户体验更好，而且不浪费带宽。 然而，将图像尺寸与显示分辨率相匹配意味着开发人员可能需要为每个图像创建数十甚至数百个不同的版本。此外，如果网站的响应式设计涉及艺术指导方面，图像会以不同的宽高比和样式显示，并且您需要为每个图像创建许多不同的缩小版本。 创建如此多不同的图。