移动网站上的图像质量差答案

【问题标题】：Bad image quality on mobile website移动网站上的图像质量差
【发布时间】：2014-04-25 19:36:07
【问题描述】：

我一直在寻找这个主题，但我一直在寻找那些非常长的文章，我什至不确定它们是否与我的问题相关，所以我在这里问:)

我正在创建一个移动网站，但图片有些奇怪：

假设我的图像是 200x100 像素，我正在使用以下代码：

<img src="img/my_img.png" width="200" height="100" />

或：

#myImg {
   width: 200px;
   height: 100px;
   background: url(img/my_img.png);
}

当我在桌面上打开我的网站时，它看起来不错，但是当我在手机上查看它时，图像的质量真的很差，看起来像是在拉伸它。

我不知道它是否与我的 html 代码有关，但也许它是我的视口？

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

【问题讨论】：

【解决方案1】：

您使用的设备是 Retina 设备吗？如果是这样，您将需要创建一个视网膜图像（400px/200px），然后在 CSS 中将宽度/高度设置为 200px/100px。

【讨论】：

如果您使用 css 规则 background-image 而不是 img 元素，您可以将 background-size 属性设置为 100%，它会帮助您保持与之前相同的尺寸非视网膜图像
非常有帮助！我遇到了同样的问题，我所有的图标在我的 iPhone 上看起来都是低分辨率的，但是将尺寸加倍使它们变得清晰！非常感谢！

【解决方案2】：

我刚刚回答了另一个与此类似的问题，关于我遇到完全相同问题的图像。

我很高兴地说我现在已经找到了一个完美的解决方案

首先，在创建图像时（如果可能）使它们比您需要的大 4 倍。所以它们是超高分辨率的。

然后，当您将图像添加到 HTML 中时，定义您希望图像实际的高度和宽度。

例如，如果您希望查看 100 像素 x 100 像素的图像，请创建 400 像素 x 400 像素的图像。然后在img标签内定义图片的高宽。

图像将保持分辨率和 DPI，但实际上只是变小了。

是的！我们的图像可以在所有设备上完美呈现！

我希望这对我的朋友有帮助！

【讨论】：

【解决方案3】：

如果您使用的是 WordPress，请注意它有时会自动为您调整图像大小并呈现这些图像，

【讨论】：