Click to Load Website Images
In my previous post about switching my Jekyll blog over to PHPetite, I briefly mentioned how I only loaded in article images if the user clicked or tapped the empty file element.
In this post, I'm going to quickly breakdown the update I've done to my blog's images since then and how you can easily implement the same thing in your own project.
As pointed out by Gabriel in this Github issue, this concept breaks things slightly for RSS users. Since then, I have just set the default images on this blog to
display: none and render them as
block elements when their specific
section is loaded into the DOM visibly.
The example below is remaining the same as it was, to still provide context for this post.
Before we jump head first into the details, let's take a look at what we will be creating:
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.
<figure> <img src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> <figcaption><b>Click the placeholder to load in the real image</b><br> Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>. </figcaption> </figure>
The Image Element
This is where the magic happens. By default all images will target the default placeholder image:
placeholder-image.webp. 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
Cool - But Why Do This?
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.