html中的图像已经过预处理？答案

【问题标题】：Image in html has been preprocessed?html中的图像已经过预处理？
【发布时间】：2017-07-18 05:27:37
【问题描述】：

我正在使用 img 标签在 html 中显示不同大小的图像。其中一张是 267x168，另一张是 1068x672。两个图像相同但大小不同。假设较小的图像将被锯齿，因为它已以 50% 的宽度显示。但他们两个只是看起来一样。图像在显示前是否经过处理？如果是，如何禁用它？

<!DOCTYPE html> 
<html>
    <body>
        <h1>Result Comparison</h1>

        <style>
            img { 
                width:100%; 
            }

            td{
                border: 1px solid black;
                padding:1%;
            }
        </style>

        <table style="width:100%">  
            <col width="50%">
            <tr>
                <td align="center"><a href="original.png"><img src="original.png" width=50%/></a>Original (size)</td>
                <td align ="center"><a href="bicubic.png"><img src="bicubic.png"/></a>Bicubic (size)</td>
            </tr>   
            <tr>
                <td align="center"><a href="average.png"><img src="average.png"/></a>Average (size)</td>
                <td align ="center"><a href="median.png"><img src="median.png"/></a>Median (size)</td>
        </table>
    </body>
</html>

【问题讨论】：

如果您不显示代码，我们怎么知道。看起来像是从父级继承样式。
@Berkay 代码已添加。对此感到抱歉。
给我们截图好吗？听起来您想知道为什么两个不同尺寸的图像在以相同尺寸显示时看起来相同。
@Clonkex 原始的是267x168，双三次的是1068x672
我想我知道你在说什么，但我找不到任何信息，所以我asked a question。在其中一个可能对您有用的 cmets 中有一个 link。

标签： html image

【解决方案1】：

当您调整图像大小时，必须进行一些处理。进行大小调整的软件（无论是图像编辑程序还是浏览器）必须找到某种方法来删除或添加像素。它使用 图像过滤器 算法来做到这一点。一些常见的有点、线性/双线性和三次/双三次。

在大多数图像编辑程序中，您可以选择使用哪种类型的过滤器，但浏览器会为您决定。幸运的是，您似乎可以拥有一些控制权；根据this page 上的信息，您似乎可以添加一条 CSS 规则来获得像素化外观，如下所示：

img {
    image-rendering: pixelated;
}

然而，值得注意的是，根据this page，要获得像素化外观，您必须对某些浏览器使用不同的规则。在 Chrome 中，pixelated 有效，但crisp-edges 无效。 Firefox 则相反。

【讨论】：