Installation time: 5 minutes.
April fools, just kidding. Or do I? Yeah, I am.
Many websites have trouble with having too large images which make the website ridiculous slow. And many webmasters uses the same images for desktop as for mobile versions. So if you got an large and heavy image for your website when visiting from a desktop you clearly have a bigger issue when browsing in your mobile or tablet. But it’s an easy solution for this!
In this article I’m going to show how you can replace images with each other if your visitors are using desktop, mobile or tablets. And how do you do it? With simple CSS-skills.
First, let me take an example.
Here is how one of our desktop images looks like:
It’s a pretty big image and around 600 kb. Even if you can have questions about the image size of this one – you most certainly don’t want that image size on the mobile version.
Here is how our mobile version from the same page looks like:
It’s a copy of the previous image but we only changed the text so it looks more suitable for the screen.
So we have two different images but are loading depending on which screen size the visitors uses. And the switch are being managed by CSS. The only thing you need to do is to set two different ID’s for the images. For the desktop version I use “desktopimage” and for mobile version “mobileimage”.
<img src="robinheed.png" alt="Handsome Robin Heed" id="desktopimage">
Here is the CSS code to use. Feel free to change the ID to something that suits you.
@media screen and (max-width:480px) {
}
#mobileimage {
display: none;
}
@media screen and (max-width:480px) {
#desktopimage {
display: none;
}
#mobileimage {
display: block;
}
}
Violá!
Now you can adapt the images you want to show to what devices you visitors are using and even make your website even faster. You can also specify if you want to have another image when using tablets or in other resolutions, it’s all up to you.
Did you like this? Brag to your colleagues about your new skill and share it!