如何解决缩放图像的性能问题以达到响应目的？

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，可以自动检测容器的大小，将这些维度发送到服务器，并在页面加载完成之前实时重新调整图像服务器端的大小。

Answer 2

查看this article from Smashing Magazine.作者详细介绍了您可能需要考虑的任何事项以及可能的解决方案。