Fix Google PageSpeed's "Serve scaled images" for responsive layout

Question

My layout is responsive so I need to have scaled images put into the template, e.g. when using mobile devices, the span3 of Boostrap might occupy a full row so the width will be increased.

But in the Google PageSpeed it is marked as an issue.

Are there any workaround or a better way to handle this?

Answer 1

Have you enabled compression gzip or deflate mode? It tells us because either we didn't use cache (either browser or proxy). Write this in your header/ .htaccess file.

<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|svg|pdf|flv|mp3)$">
<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresDefault "access plus 1 month 2 days 3 hours" //example you can change it
 Header set Cache-Control "public"
</IfModule>
</FilesMatch>

And one thing if browser still ignores it. You can also use Adaptive-Images method to sever your assets as per less DNS look-ups and scaled down for small-devices.

If you use one of those methods, you don't have to worry about images-scaled or not. I have tried all these things and got 98 out 100 Page Speed.

You can believe if you check out the page speed of this page. Hope you better fix it too.