[Raj NParticipant]

When I test my site on google pagespeed, my images for mobile site are not optimized. How do I optimize these images?

[Raj NParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thanks for writing in!

You can try these plugins to help optimize your images and speed up your site.

https://wordpress.org/plugins/w3-total-cache/

https://wordpress.org/plugins/wp-smushit/

Also please see https://theme.co/x/member/kb/performance/

Hope that helps. 🙂

[Raj NParticipant]

Hi,

I already use smushit and caching. This results in optimized images when viewed on desktop.

But when viewing on mobiles, these images are not optimized – which is what Google pagespeed points to.

Is there a way to get around this?

[RadModerator]

This reply has been marked as private.

[Raj NParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thanks for the clarification.

You can try another third party plugin https://wordpress.org/plugins/ewww-image-optimizer/

It seems that it’s better than the other plugin in compressing images.

Please let us know how it goes.

[Raj NParticipant]

Hi,

Thanks for the plugin link. I will give it a try. However this plugin too won’t solve the issue of optimized images when viewing on mobile.

The plugin I found that might help is https://wordpress.org/plugins/hammy/

But I can’t figure out how to make it work.

Thanks anyways.

[DarshanaModerator]

Hi there,

Nice find! Hammy looks promising though we haven’t tested it. Upon checking, I think that the following tutorial will help you to setup the plugin (https://www.youtube.com/watch?v=GpmAaGAW9-c).

Cheers!

[Ben HorleParticipant]

Hi Raj N

How did it go optimizing your site? I have moved my site in to cornerstone and deleted Visual composer, Soliloquy and rev slider and I got a bump for mobile but it’s still orrange (A step up from red!) https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sussexchef.com%2F

I’d love any advice you can offer up!

[RadModerator]

Hi guys,

The problem with these tools is, they are only applicable to the specific type of site. They don’t consider if a site is responsive/adaptive or dedicated mobile site.

For example, https://www.treefrog.ca/the-five-types-of-mobile-website

X theme is responsive, it means it changes and adapt when resized, or when viewed and loads to a specific device.

These analysis tools expect that a mobile site is always a dedicated mobile site. Let’s use facebook as a sample. https://www.facebook.com/ this is a desktop site, but they have another separate and dedicated site for mobile https://m.facebook.com/. Even if you accessed this URL in desktop, it still display a mobile site. Because it’s optimized for mobile, images are compressed and resize and served from a different instance of the site.

And back to X theme, it’s responsive, it serves same content and images from the same site (no other dedicated site). If you compressed your image from 1024px to 200px, what will happen if that image responds to the larger screen like retina devices or similar, then expect that your images will be stretched out and pixelated. The purpose of responsive design is to make them available for all kind of device and not to the specific one.

It’s okay to stay in a middle size image but optimized. High compression and optimization should be done if you have another mobile site that will serve them.

Thanks!

[BenRyan.meParticipant]

Hey Raj N,

I have just finished writing an article about Image Optimisation, let me know if it helps at all.

https://benryan.com.au/image-optimisation/

Cheers

– Ben Ryan

[JadeModerator]

Thanks for sharing Ben.

[Author]

Posts