“Ohhh that’s so neat!!!”

“Wait, you didn’t know about this?”

“No! Not at all. I didn’t know you could do this.”

I could hear the excitement in my co-worker’s voice as his imagination exploded with the possibilities of this trick I showed him.

A responsive design “hack” that I learned from a front-end development course.

And one that I think anybody who makes any type of page should be aware of (especially if you want to make responsive landing pages for mobile and desktop).

Let’s dive in.

How to create fast loading pages by managing your images.

Okay, so if you ever had to build a page for both mobile and desktop, you can imagine there’s 5 or 6 ways to go about it.

One option is to use 1 big image that you later downsize responsively, depending on the screen size.

In theory this sounds fine… until you consider load times.

Page load happens here because you’re starting with a big image that later gets scaled down.

Big images are heavier than smaller images. And since you’re using the big image and making it small, there’s a lot of details and data in that big image that you downloaded that you don’t really need on mobile.

And thus, this method sucks.

Use 2 images and hide the one you aren’t using

It’s a simple concept. If you’re on a big screen, only show the bigger image. If you’re on your phone, just show the smaller one.

In the frontend world, we use something called media queries for that, and they look something like this:

(This example is saying: "Only run this code if the screen size is under 600px" )

@media (max-width: 600px) {

.small-image { << show small-image code >> }

.big-image { << hide big-image code >> }

}

Ahh but wait, our old enemy page load 👺 rears its ugly head.

Hiding images (in a lot of cases) doesn’t stop it from getting downloaded. They’re hidden, but not gone.

Browsers are getting smarter though. For example, there IS 1 test case that always works, and it’s this:

Set your image as a background (using the smartly named “background-image” attribute) and then hide it’s parent. Like this:

<div class="parent" style= 'display: none;'>

<div class="background-image" style= 'background-image: url("your-sexy-image.png"); '></div>

</div>

Set something like this along with a media query and BAM, faster responsive pages. Take THAT page load!!!

It is hacky as hell though. And there are better alternatives. So let’s skip to the end and tell you the answer.

Introducing…

🤘🎸The Srcset Attribute 🎉🤙

(Going to try and keep this as low-tech as possible in case you aren’t familiar with html)

So images on pages are classically shown using something called the img tag:

<img src=”dog-picture.jpg” alt=”Dog with a monocle” width=”500" height=”650">

Where you put your image file path as the src value (which stands for “source”). But that’s not what’s special.

What’s special is another type of attribute you might not have heard of that you can use in the img tag — srcset.

The srcset attribute let’s you indicate different sizes for the same image and only one is ever used.

It’s the equivalent of black magic and here’s what it looks like:

<img srcset="small-dawg.jpg,
bigger-dawg.jpg 1.5x,
biggest-dawg.jpg 2x"
src="default-dawg.jpg" alt="My dawg">

It basically tells the browser: “Hey, here’s a list of different sized images. You check out what the device used is and decide the best option”.

And it freaking works!

So congratulations! Your page (officially) just got lighter, faster and everybody is happier because of it.

(And if you want to load different images on different screen sizes or different aspect ratios of the same image, check out the html <picture> tag. You’ll love it)

Keep these concepts in mind next time you’re building your landing page. The speed bump will be worth it!

This article was an issue of In One Snap

In One Snap is a weekly newsletter for marketers, designers and devs who want to increase conversions on their landing pages.

Every Wednesday, you’ll get sent some insight on landing page marketing, design or building.

You also get my landing page swipe file as a bonus if you do.

Sign up to the newsletter here.