Pretty neat, eh? Well let’s get into the nitty gritty.
Personally, I place everything into a
figure element to keep things contained and clean - but this isn’t required by any means. We then include our
figcaption elements. That’s it.
This is where the magic happens. By default all images will target the default placeholder image:
no-image.svg. This image is just 16KB in size and only needs to load in once.
Next we include an inline
onclick attribute, which targets the current image’s
src attribute and changes it based on the URL provided. (Note: I use Cloudinary for my blog’s image storage, but you could even host your images relative to your root directory if you wanted)
Now when a user clicks on the placeholder image, the inline
onclick pulls in the correct image in it’s place.
figcaption element, we give the user the ability to still view the image in a separate browser tab.
You could get extra fancy and include some
Bandwidth is a limited resource for a lot of users around the world. As designers and developers it’s best to respect this fact and only load in elements as the user requires them. Every little bit helps.
← Back to all articles
If you would like help support this blog, please consider donating to help keep articles ad-free.
This site is an honorary member of the 1MB Club.
No third-party advertising or data collection - More about privacy.
Built with Jekyll & hosted on Netlify.
Maintained with ♥ for the web.
This page is valid HTML