每个设备提供不同的图像答案

【问题标题】：Different Image Served per Device Basis每个设备提供不同的图像
【发布时间】：2013-04-18 09:45:54
【问题描述】：

我正在着手创建对移动设备友好的网站和应用程序。

我正在使用引导程序和 HTML5，所以我可以重新安排我的布局。

我的问题是，根据浏览网站的设备调整图像大小的最佳方法是什么？

我是否应该制作多个版本的主要图像，例如网站徽标，即适用于 Iphone、Ipad 和台式电脑的版本？或者只有一张图片的高度和宽度发生了变化？

我目前有一个 PHP 类，它通过检查标题来检测用户正在使用的浏览器，例如Ipad safari 浏览器的用户代理标头中有“ipad”。

我知道这不是 100% 可靠的，并且可以被欺骗。我会说 95% 的时间都是准确的，因为真正有兴趣使用您的网站的用户不会为了 lolz 而尝试破坏它。

【问题讨论】：

【解决方案1】：

我可能只会使用宽度和高度的方法。我的大多数移动实现都非常关注图形，所以这不是问题。如果您还没有这样做，您还应该查看视口元标记。

【讨论】：

但是不同的图片尺寸是否有助于节省带宽并让移动连接不佳的用户更快地访问网站？
当然 - 当数据带宽成为问题时，您总是希望尝试最小文件大小。 @David Taiaroa 关于自适应图像的回答值得一试。它可能使用 PHP 的 Imagick 来调整图像大小。到目前为止，我的方法是使用非常小的图像，并在移动页面上谨慎使用它们，但自适应图像仍然有用。

【解决方案2】：

如果您询问如何将不同尺寸的图像发送到不同的设备（基于窗口宽度）adaptive images 是一个不错的选择。它将测试访问者的视点，然后根据您指定的断点发送适当大小的图像。

祝你好运！

【讨论】：