If your current theme doesn’t provide this option then you will have to add it (many don’t except perhaps for in the Header and/or Footers).
One easy way to do this is to use a design plugin such as the free Elementor. With it, you can insert an image and then under Advanced options, choose Responsiveness and set it so that the image doesn’t show on Mobile displays. Then add another Mobile-only image and set it in the same way, but so that it doesn’t display on Desktop or Tablet.
Thread Starter
OM2
(@om2)
@cjrune Thanks for the reply.
That sounds like a lot of unnecessary work!
What you’ve said sounds like something that can be automated.
Why can’t these them designers be a bit more clever about it?
The theme I bought has something like 7000+ purchases for $40.
Is there a list of themes that give what I ask for?
Thanks
Most mobile browsers will resize the images automatically, but if you have a specific layout issue with a specific image, then what I mentioned above can help. In most cases, you won’t likely have to specify separate mobile images each time.
Also, by default, WordPress does automatically create multiple sizes of each image you upload. You can adjust the sizes of these default “thumbnail” images in WordPress>Settings>Media.
Themes are just that though – a way to theme your site (overall color, layout, headers, footers, etc.) For images within the bodies of the pages – the content – you do have to code those, and design plugins like the one mentioned makes this work much easier.
Thread Starter
OM2
(@om2)
Hmmm
Thanks for educating. I assumed themes were more clever.
Desktop: show an image that is 1080 wide for example.
Mobile: show the small version of the image that WordPress resizes to – AND NOT the 1080.
That makes sense to me.
Don’t understand why they don’t all do?
Most designs simply insert the full-size image into the page and let the code take care of the sizing, such as through the use of a DIV tag. That way, when the available width of the viewing device decreases, so does the image width. It still loads the larger image but shows it smaller.
If you want only a smaller, separate image loaded on mobile browsers, then you would have to insert two separate images, one for large screens and one for mobile, then tell the browsers which one they need to load and show.
…honestly, though, it’s not that often you need to take these additional steps unless you want the layout to change completely between various browser/device types, or you have a specific layout issue related to mobile.
Thread Starter
OM2
(@om2)
Well… I would disagree.
I have a website that looks beautiful on the front page.
It has images that maybe total 1MB – this is intentional.
OK for a desktop – no worries.
On a mobile version, the EXACT same images load – the same 1MB.
That isn’t good. I thought it was just the theme I had and thought most other themes were more clever.
1MB on desktop – OK, if needed, no big worries.
1MB on a mobile – not the same.
Do I have a point?
Themes are intended to create a basic consistency for your site – those things that repeat all throughout; such as headers, footers, sizes and types of fonts, and, especially, keeping the colors of all these things consistent. When it comes to the content that exists between the headers and footers, themes don’t usually control much of that, except for the overall width of that content, the colors and sizes of the fonts used, background colors, etc.
A mobile device downloading a large image is really no different than a desktop doing it though. Not anymore, anyway. This used to be critical.
However, there are still a couple of options:
For one, make sure the image has been compressed using a free service such as TinyPNG. Their system does a great job of reducing file size without loss of quality. Simply compress it at their site before uploading to WP (and if uploading images often, they also offer a free WP plugin to automatically losslessly compress .png and .jpg images as you upload them)
If that’s still not enough, then you can do as stated in the first response and designate a smaller image for mobile devices. I found the easiest way to do this is by using a WSYWIG HTML designer such as Elementor, but you can also code it manually with something like:
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
The <img srcset> code provides the browser with a list of images to choose from and it’ll pick the best size for its current display width.
If you like, you can then also specify the <max-width>. This tells browsers up to what width it should use the mobile image, then over that width to always use the larger desktop image.
