以不同尺寸显示图像

Question

我有一个100x100px图像，我需要在html中以3个不同的维度显示，

50x50 60x60 70x70

所以我的dubt如果更好地保存3维的img然后不使用css或html的宽度和高度，或者如果使用相同的img与关于维度的css规则...哪个解决方案更快地渲染？

Answer 1

取决于。

如果您使用相同的图像，浏览器只需要一次图像缓存。因此，如果您在同一页面中显示多种类型的图像，则不要使用多个图像。否则去拍多张图片。

但老实说，如果你有100x100，加载应该不是问题。只有在慢速连接中才会出现问题（<128kbps）。否则我没有看到相当大的差异。

Answer 2

我不会太担心渲染速度，你会看到的主要区别在于图像质量。一些浏览器（Chrome）执行非常高质量的图像插值，而其他浏览器（IE，Firefox）选择更快的算法，但不能提供良好的结果。因此，您可以通过三个单独的图像文件获得最佳，最一致的图像质量，每个图像文件一个。

也就是说，由于你只是从100x100缩放到50x50的最小尺寸，你可能也不需要过多担心插值伪像。所以我建议你做一些最方便你实施的事情。

就纯渲染速度而言，具有单独的图像将更快，因为在这种情况下不需要插值步骤。然而，就初始页面加载速度而言，单个图像将更快，因为只有1个文件要下载而不是3个（或4个）。至于使用CSS或HTML标签属性来设置宽度和高度，速度几乎没有差别。昂贵的操作是图像本身的插值，如果通过CSS或标记属性指定插值，则没有太大区别。