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

【问题标题】：How can I shrink an image in HTML whilst maintaining its sharpness?如何在保持清晰度的同时缩小 HTML 中的图像？
【发布时间】：2011-05-25 05:16:30
【问题描述】：

我有一张我多次使用的图片。在某些情况下，我想缩小它的大小，但是当我在 HTML 中这样做时，它显然会失去清晰度。

有没有办法解决这个问题？图片位于别处，我无法在本地保存。

谢谢

【问题讨论】：

【解决方案1】：

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

另一件事是使用在线服务，例如Resize.co。您将图像文件的 URL、属性传递给他们，他们会处理其他所有事情。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我知道有三种方法可以减少图像文件大小（以字节为单位）：

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

【讨论】：

【解决方案4】：

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

这些不适用于其他浏览器，并且可能不适用于所有（或任何）版本的 IE 和 Firefox。

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

【讨论】：