收缩img而不会失去质量？

Question

见：

http://real-sense.com/index.php?option=com_content&view=article&id=106

右侧的垂直图像集使用CSS

调整大小

.thumbnail-product-resize
{
width:144px;
height : auto;
}

有谁知道如何以更清洁的方式做到这一点，所以我不会在图像上失去质量？

我的意思是，如果我使用photoshop调整了图像大小，文本就不会像在这里那样模糊。

在FF中测试

由于

Answer 1

图像的质量取决于您使用的图像的原始尺寸。如果您拥有质量较好的大型图片，例如尺寸400x500，然后将其在HTML中调整为80x100，则它仍然是400x500图片。但是，您只能在80x100的较小图像上放置一定数量的像素，因此必须对较大的图像进行采样。这意味着取像素的平均值，然后使其代表80x100大小的图像。 如果您想要更明确的结果，可以将图像的原始大小更改为80x100。这可能会给你更好的结果。

Answer 2

即使您在Photoshop中完成了这些操作，您所拥有的图像仍然会像现在一样出现。

仅供参考，您不需要在上面的CSS中包含height：auto。

最好的办法是创建一组单独的缩略图（使用photoshop），这可能只显示图像的一部分。

加载缩略图并按照您的方式使用css调整大小是不好的做法，因为您仍然让用户先下载大图像。

Answer 3

曾几何时，由于用于缩放图像的简单nearest neighbor technique，浏览器图像大小调整会产生真正令人发指的结果。现在，他们通常在缩放时执行过滤，并且在浏览器中调整大小和在Photoshop中调整大小之间没有 差异很大。

在将图像提供给客户端之前缩放图像的真正好处是，在不需要时不强制下载大图像。根据图像的大小，这可以显着减少页面加载时间。

最后要考虑的是，越来越多的人拥有带有“视网膜”显示器的设备。对于那些在服务之前缩放图像的用户，将导致图像不那么清晰。

以下是各种浏览器使用的图像缩放方法的深入比较：http://entropymine.com/resamplescope/notes/browsers/

Answer 4

除非是矢量图像，否则不能在不失去质量的情况下缩小图像。这意味着你必须使用SVG。考虑到显示的图像，我认为你不会这样做。

你也提到了更清洁的方法，使用photoshop或类似的东西。