How to Serve Smaller Images for Mobiles

john

Right now, in order for images to look good on a retina display desktop device they have to be 1600 px wide. That's massively overkill for a mobile device and since Google says they're about to start factoring Page Performance with Mobile Priority, as a ranking factor, this will harm my SEO.

Can anyone please tell me in very simple English that a non-technical person like me would understand, how to write some Markdown/HTML code so that if I have two versions of every image in my /images folder, mobiles will show the small image, and desktops will show the big image?

I have tried the "solutions" on this page, but none of them works with Automad: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015.

mad

john You can just paste the elements as described in the tutorial into a raw HTML block. It works fine. Just make sure you use the correct URLs. There is a guide in the docs about linking to files.

However it will not really impact SEO I guess. Size in pixels it not everything. You can reduce the file size also with optimizing the images and choosing the right compression.

john

Many thanks, however...

Why Action is Definitely Needed

Firstly, I definitely need to serve different images on mobile than on Desktop. I'm in a very competitive field and dropped off Google's front page 8 years ago and have been working hard all that time to get back.

I know that later this month Google is going to implement Page Experience as a ranking factor, so I really need to comply with Search Console when it is telling me to improve my Page Experience.

The instructions I have to follow according to Search Console are to reduce my Largest Contentful Paint for mobiles to less than 2.5 seconds.

You will please note that the LCP load time accounts for 25% of my page score on my home page, and while I am scoring in the 90s or 100% on every other criterion, I am only scoring 33% on LCP. So action is very definitely necessary if I am to have any chance of benefiting from the new algorithm roll-out.

What I've Done So Far to Reduce Load Times

I have already compressed my images to be as small as possible (by converting them to .webp and then converting the compressed .webp images back to .jpg to be served if the user browser cannot see .webp format). My primary images are all the format Google scores me down for not using - .webp

I've tried twice using CDN but I've discovered there are much bigger drawbacks than advantages, so I won't try again.

My Current Attempts to Serve Alternative Images for Mobile

Here are the contents of the HTML box on a page I am using to experiment with serving smaller images to mobile:

<img src="/images/jetr401.webp" srcset="/images/edme501-880.webp 320w, /images/edme502f-880.webp 800w, /images/edme601f-880.webp 1200w" alt="Tanzania Safari JETR 401" onerror="this.src='/images/jetr401.jpg';" />

Here is the page: https://teamkilimanjaro.com/safaris/tanzania/jetr-401. Please try to resize the page. You will see that the only image that shows is /images/edme601f-880.jpg. Even if you open the page on mobile devices, you still see the same image.

I will be so grateful if you can please tell me where I am going wrong. What I would really like to do is serve crystal clear 2400 pix width images that look perfect on a retina display on a desktop, and much smaller images that minimise my LCP time on a mobile That way I will have a super fast site that works perfect for all my users, but right now I have an unacceptable compromise that makes my site look grainy on desktops, and is ensuring I have zero "Good" performance pages by Google's assessment.

mad

john Hi, I understand. I think to add such a raw HTML block is the right approach. I think the reason why you see the larger image on mobiles is because nowadays every mobile device is lager than 320 and therefore it uses the next higher resolution. But that is only a guess.

And don't worry to much about the loading times. There are still many sites out there that perform worse and are ranked pretty high. My guess is that searchable content will still be the most important factor for Google.

maakbow

Many mobiles have a higher resolution than desktops or laptops. You will need to serve the differnt images based on pixel density rather than device width.
Use device width when changing images for appearance rather than file size. You could also try using ther <picture > element instead or srcset within an <img>

john

maakbow I was just in the process of thanking you but nonetheless despairing that nothing had worked, as resizing my Desktop browser made no difference, when I happened to check the page on my mobile and I discovered that this code worked!!!:

This is the page: https://teamkilimanjaro.com/safaris/tanzania/jetr-401.

If you try it on a Desktop you get a 2400px wide image, on a mobile you get an 800px wide image!

Finally!

maakbow

Its possible then if it doesnt change on desktop, that your stated numbers are not working because, 1. if they worked, they should on desktop also, and 2. with srcset the device can select what it thinks is the most apropriate image from the set....
anyhoo.. webp is pretty well suported https://caniuse.com/?search=webp and IE11 is down to about 0.5% globally now https://gs.statcounter.com/browser-version-partially-combined-market-share#monthly-202103-202105