Question

我的网站上有图片，我正在使用CSS调整大小。将图像强制缩小是不是一种糟糕的编程习惯。

CSS

body #phoneimage {
   max-width: 150px;
}

或

body #phoneimage {
   width: 150px;
}

或

body #phoneimage {
   min-width: 150px;
}

Answer 1

这取决于具体情况。

过去，浏览器图片调整大小的质量非常差。现代浏览器可以很好地调整大多数图像。但是，将非常大的图像（即2000×1000）调整到非常小的尺寸（即200×100）可能导致质量差。另外，由于质量会受到影响，通常不鼓励高档图像。

从网络（下载/带宽）的角度来看，通常不鼓励这样做。如果图像为800x600并且大小为640x480，则用户仍需要下载800x600版本才能看到HTML大小为640x480的版本。这是服务器上的额外负载，并增加了用户的下载时间。

在HTML / CSS中缩放图像最常用于以下环境：

响应式设计。根据您使用的最小宽度，我猜这是情况。如果网站缩放，图像几乎总是必须缩放。如果图像必须缩放数百个像素，您可以考虑根据需要将图像换成高/低分辨率图像。
针对移动设备优化的网站。在高分辨率（即Retina）移动设备上，尺寸为320x200的640x480图像HTML / CSS将显得更加清晰。移动设备具有非常高的PPI（每英寸像素数）并且可以利用额外数据。实际上，如果网站没有按比例缩小以填充设备屏幕，那么以640x480渲染的640x480图像可能会显得模糊（与文本或操作系统界面相比）。

Answer 2

不，不是。实际上，当您为Retina显示器（或任何具有更高像素密度的显示器）优化图像时，通常的做法是确保图像保持清晰。

通常的做法是使用更大的背景图像。特别是如果你不知道容器的大小，特别是当尺寸可以变化时。想象一下，您在整个页面上都有背景图像，并将其设置为background-image: cover。现在为了确保图像清晰明了以获得更高的分辨率，即使缩小尺寸，也需要使用大的背景图像。

所以，这不是一种不好的做法。但总有一种更好的做法。这将是为了任何可能的目的优化您的图像。例如，如果您有一个自适应网页，那么最好将较小的图像用于移动版本以减少带宽，例如：媒体查询：

/* For desktop */
@media all and (min-width: 600px) {
    body {
        background: no-repeat url(http://placehold.it/2400x1200');
    }
}

/* For mobile */
@media all and (max-width: 600px) {
    body {
        background: no-repeat url(http://placehold.it/1200x600');
    }
}

说，当然你不应该过头。如果你上传一个巨大的5000x3000px图像并将其调整为像50x30px这样的东西，这显然是不好的做法。

将图像强制为较小尺寸是不好的编程习惯

2 个答案: