Optimize images on a responsive site using pagespeed insights

[soumya]

Hi ,

I am trying to improve the performance of a redesigning  responsive website using pagespeed insights.

The desktop has a score of 86/100.

On mobile it is 20/100 only . 

The major correction asking on the optimization of images .

On home page we have a slider with 4 big images and pagespeed recommend to optimize the same on desktop as well as on mobile .we have done it for desktop and it works fine ,improving desktop score.But the same 4 images need compression as per mobile score .The suggested compressed images from pagespeed  for mobile have small size suitable for mobile screen only .And also it is not possible to use the in responsive mode   .

Anybody can help me to fix the issue please?

I am sure the optimization of images can increase current score into a good one.About other suggestions from pagespeed we are working on it 

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fbeta.jiwok.com%2F&tab=mobile

[Rick Steinwand]

Try using <picture> with multiple picture sizes like 400px, 800px, 1200px, full size, etc.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture.

[Joshua Marantz]

Try mod_pagespeed.  You can supply one hi-res image in an IMG tag, and the new responsive_images filter in 1.10 (beta) will rewrite it as srcset, with appropriate images for mobile and desktop depending on the client.  All the different resolution images will be automatically generated for you by the tool; you just have to supply a hi-res one in the IMG tag to start with.

We would love feedback on this feature; it's relatively new.

Note that if you already use srcset, mod_pagespeed does not optimize the images referenced in it, though that's a feature we'd like to add.  As of today, mod_pagespeed only optimizes srcset images that it synthesizes itself.

-Josh

On Mar 3, 2016 5:46 AM, "Rick Steinwand" <rickst...@gmail.com> wrote:

Try using <picture> with multiple picture sizes like 400px, 800px, 1200px, full size, etc.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/ef559c0e-f28e-4914-ac9e-f9b3cd9ec5a4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.