WHY WE NEED RESPONSIVE IMAGES

Once upon a time in the bronze age of the Internet, most people only had monitors and TVs in the landscape orientation. Websites were built for the big screens, and most images were assumed to be able to fit nicely onto most screens; There weren’t many problems with images not being responsive in those days.

Then of all the things, foolish humans smart monkeys have to invent something called “smartphones” and “tablets”. With a much smaller screen size now, the large images will not fit in nicely, especially when it comes to the portrait orientation.

This forced the large images to be “cut off” on the smaller screens and/or even cause the page to render a horizontal scrollbar. Top that up with another vertical scrollbar, and you will get a totally broken looking website that definitely does not look nice. This is where we need responsive images to come to the rescue.

TECHNIQUE 1) AUTO-SCALE IMAGE (THE EASY SOLUTION)

The easiest way to solve the “cut off” image woe, is to add 2 CSS properties to the images:

img.responsive{
  width: 100%;
  height: auto;
}

Yep, that’s it. This will force the image to fit 100% percent into the parent container and resize itself automatically – No more ugly horizontal scrollbars to break the layout of your website. But please take note that if the image is smaller than the width of the container, that will cause the image to stretch and look absolutely icky.

So always make sure that your images have somewhat good enough resolution, that they will still look decent even when stretched. Alternatively, you can define a max width to limit how much they can be stretched.

img.responsive{
  width: 100%;
  max-width: 1200px;
  height: auto;
}

TECHNIQUE 2) DYNAMIC IMAGE LOADING

THE BASICS

The idea behind this second technique is very simple – Load a big image for a big screen, and load a small image for a small screen. This technique not just fits the right image size onto the right screen, but it also helps you to save some bandwidth by not loading overly large images for small screens. We can do that by defining an extra srcset and sizes on the usual image tag:

Now, this may seem like a “complicated” image tag, but here is how it works:

• src is still defined for backward compatibility, just to be sure that stone-age technology browsers will still show the image.
• srcset defines the set of images that we have for switching, we define it by –
  • Starting with the image URL.
  • Followed by a white space and the width of the image in pixels (take note – the unit is w and not px).
  • Lastly, a comma if you want to add more images to the set.
• sizes give the browser a hint as to which image to use. I.E. The browser will try to best match which image to load against your set rules.
  • Start by defining the condition, much like media queries.
  • Followed by a white space and the preferred image size to load.
  • Lastly, a comma if you have more rules to add.
• Of course, you can add a CSS class, alt, and title to the tag… It is still an HTML tag.

So the “English version” of the rules in the example above are:

• Up to a width of 400 pixels, try to load an image that is 320 pixels wide.
• From 400 to 800 pixels, try to load an image that is 768 pixels wide.
• If the rules don’t match any of the defined screen sizes, try load to load an image that is 1200 pixels wide.

THE X UNIT

So far so good? But before we move on to the next section, I am going to need to explain something that is a little off topic – Scaling and the screen resolutions. Now, we all know that there are different screen sizes with different resolutions these days. In the above example, we have 2 phones. Both with the same 6-inch screen, but one has 1480 pixels, and the other at a higher 2160 pixels.

Here comes the problem. If we define a 16px font size, it is going to look extremely small on both phones. So what most browsers will do, is an automatic scaling to make the fonts look decent. For example, browsers may do a 2X scale on the 1480 pixels phone – The 16px font size in CSS is actually 32px on the screen. Similarly, the browser may do a 3X scale on the 2160 phone to compensate for the high resolution.

As to why this scaling is important in responsive images, the answer is coming up right next.

DIFFERENT RESOLUTION, DIFFERENT IMAGE SIZE

Now that you have a basic understanding of the “X unit”, this example should make sense:

Yep, this is a similar example to the one above, but instead of using the “w” unit, we are using the “x” unit. The sizes attribute is no longer required here, as the browser itself will automatically try to pick the best image based on the device resolution – Load a smaller image for a lower resolution screen, and a larger image for a high-resolution screen.

THE CSS EQUIVALENT

If you want to do the dynamic loading for image background, here is how to do it in CSS:

.dynamic{
  background-image: image-set(
    url('cate-small.jpg') 1x,
    url('cate-medium.jpg') 2x,
    url('cate-large.jpg') 3x
  );
}

PICTURE VS IMAGE SET

For you slightly advanced HTML ninjas, remember that there is a picture element that allows you to change the image depending on the condition? For example:

Yes, both the picture and image set may seem to be very similar, but there is a difference between the two.

• The image tag with srcset is used for loading the same image but at different resolutions. It is used to optimize the loading time and save on the bandwidth.
• The picture tag, on the other hand, is used to display a different image for different window sizes.
• In a nutshell, one of them is functional, the other is aesthetic.

Now that you know the difference, please do try to use the picture tag for its original intended purpose. To add on to the differentiation between the two:

• You can define a set of different images with srcset in the source just like image tags.
• You can also define different sizes in the source tag.

Maybe an example scenario will better explain this:

• You want to show a different image for landscape and portrait orientation – The picture tag does this.
• On different screen resolutions, load the respectively resized image files – The srcset within the source tag does this.

LET THE POWERS COMBINE

This final section is a small reminder that even when you load a different sized image, it is not going to fit itself onto the screen magically. It is still the best to combine it with the CSS scaling trick:

IS DYNAMIC LOADING REALLY USEFUL?

Personally, I am not quite a fan of dynamic loading. It sure has a plus in saving some bandwidth, but is it really worth all the trouble, time and costs?

• You have to resize every image.
• More space is taken up on the server.
• A higher maintenance and more time required whenever images are changed.
• More coding required equals more room for errors.

So yeah. Why not just use one image, compress it with services like TinyPNG, and get over it. I personally don’t think that dynamic loading is going to save a ton of resources unless you run an insanely popular and busy website… But I keep my fingers crossed, it might still be useful for some people.