如何在保持其清晰度的同时缩小HTML中的图像？

Question

我有一个我多次使用的图像。在某些情况下，我想缩小它的大小，但是当我在HTML中执行此操作时，它显然会失去清晰度。

有没有办法解决这个问题？图像位于其他地方，我无法在本地保存。

由于

Answer 1

正如dheerosaur所述，当您需要具有多种尺寸的相同图像但不想牺牲质量时，可以使用SVG图形。

另一件事是使用在线服务，例如Resize.co。您传递了图像文件的URL，属性，并且它们会处理其他所有内容。

Answer 2

您无法控制浏览器调整图像大小时的呈现方式。在调整大小时通过Photoshop的过滤器（或其他工具中的过滤器）时，图像看起来会更好。

Answer 3

我知道有三种减少图像文件大小的方法：

1. 使用有损压缩算法（如JPG）将文件转换为格式。显然，图像会失去清晰度
2. 使用无损压缩算法（如PNG）将文件转换为格式。仅在图像包含大量具有平面颜色的区域时才有效
3. 使用Photoshop或GIMP调整图像大小/重新采样。如果新图像尺寸（宽x高）与HTML中显示的图像尺寸完全相同，那么网络用户仍会看到清晰的图像

Answer 4

Firefox和Internet Explorer实际上有CSS属性，可以调整通过HTML属性或CSS属性调整大小时呈现图像的方式：

• Firefox：image-rendering
• Internet Explorer：-ms-interpolation-mode

这些在其他浏览器中无法使用，并且可能无法在IE和Firefox的所有（或任何）版本中使用。

但是，如果resizer.co导致任何问题，可能值得尝试使用它们作为后备。