如何解决缩放图像以进行响应的性能问题？

Question

对于某些图像，我更喜欢根据页面大小缩放图像以使其响应。

<img class="img_scale" src="img.png" alt"this img doesn't have width and height  
definition">

CSS：

.img_scale{width:100%; height:100%; margin:0 auto; height:auto !important;}

如果图像不是广告牌背景图像或在不灵活的盒子中，则此解决方案效果很好。因此，我想缩放图像而不是使用jQuery插件。

但是，经常说缩放图像会导致重画和很多性能问题。

你是做什么？ 有解决图像缩放问题的解决方案吗？

Answer 1

我想这取决于您真正要解决的“性能问题”。 如果您担心在浏览器中调整大小或重排问题所花费的时间，请在图像上使用max-width：100％，并最好使用自适应框架（例如Foundations Framework或Bootstrap）设置图像容器的宽度。

如果您担心通过慢速移动网络将图像下载到移动设备所花费的时间，则需要先缩放或裁剪图像，然后再进行连接。 在客户端浏览器上执行此操作为时已晚。 您可以即时执行此操作，也可以根据断点将img.src替换为多个大小的图像之一。

要即时缩放或裁剪响应图像，可以使用Pixtulate之类的服务。 它们提供了JavaScript，该JavaScript将自动检测容器的大小，将这些尺寸发送到服务器，并在页面完成加载之前实时调整图像服务器端的大小。

Answer 2

请查看Smashing Magazine的这篇文章。 作者详细介绍了您可能要考虑的所有内容以及可能的解决方案。