I have a question. If I use google PageSpeed Insights on my site http://modetilkvinder.dk/ I get a red warning for image on Mobile – and that I can reduce my images with 120 kb (90% reduction) I don’t have the same issue on desktop. I am already using WP Smush.it and have optimized all images before uploading to media library. How do I Optimize images for mobile further? and get rid of the red warning?
Regards
Ulrik
This is a recent development this year with insights; kind of annoying; and why you get higher score with GTmetrix than insights score. With “responsive” design, images are often resized vs serving an entirely new image as traditionally it was actually faster since the server caches images, especially high request images. However, now the insights score is based on a “mobile user loading the content” as part of the “mobile first” movement, and so it seems there is going to need to be some kind of element added to all themes which load images much like the ad banners used to load the past few years prior to Google adding responsive ad units …
basically…
if viewport large = load big image
if viewport small = load thumbnail
Dumb thing is that in many cases, the larger image being loaded on mobile, e.g., iPad actually works better as a “resized” image, since it effectively makes a 640×400 96dpi image into a 340×200 200dpi image for retina displays by having larger pixel density when the large size is reduced on screen — hence why the images look so good on retina mobile devices without having to reload a “retina image…”
So….. stupidly, they are looking at “bandwidth” not “quality”…
Themes are basically going to have to be re-engineered to “by default” always make something like a 50% thumbnail and serve that on mobile devices.
Even stupider requirement because not all mobile devices have same viewport, and so it’s not practical for every page to constantly load 10 different size “featured images” based on viewport — this is what responsive design partially solved.
Upshot — you can live with suffering the warning for now — everybody is getting this — everywhere.
Not sure how TagDiv will address this, or if some super clever person comes up with plugin.
In our case we’re running mod_pagespeed and just updated last Friday (week ago), in hopes it would have solution for this as part of the “resize images” function (well, subset of “rewrite images”), and that isn’t even doing that with Google’s own technology!
(argh)….
Sorry for editorial. I started trying to deal with this April 1, and was super annoyed by the “actuality” of the issue.
Basically a featured image now has to be treated as an “ad module” and load a different size main image based on desktop v mobile. Show me any themes doing that right now. Nope. Annoying.
Hope that helped in some way …. main thing is to ensure the main images you’re uploading are as compressed as possible. I’ve been trying to make sure our larger images are no more than 25kb vs 32kb. If you have an image with 120kb that can be removed, it might be too big to start with.
No simple answer.
