Seminar: Responsive Images

Responsive Images: what are the options?

When I started to research this topic the first question that came in my mind was: well, I know how it looks like the first web page ever, but I have no idea of the first image ever appeared on the web. So, I asked to my best friend Search Engine and as always it helped me in find the answer that I was looking for.  Below is the first photo on the web.

Les Horribles Cernettes – The first photo on the web

Please, if you have a bit of time, you really can’t miss their performances, here some precious links:

Enjoy! 😉

Brief image history on the web

Let’s go on with a brief recap of the image history on the web.

1990 – NO IMAGES

The first web page – author: Tim Berners-Lee

1995 – SMALL IMAGES

An example of a 90s website

2000 – MORE IMAGES

An example of a website in 2000

2002 – WEB 2.0 era

2005 – BIG IMAGES

“How a website looked in about 2005

2010 – Responsive Web Design era

NOW – HUGE IMAGES

A typical example of a website of nowadays (2018)

 

<!- – END BRIEF IMAGE HISTORY RECAP – ->

 

Now that you learned so much about images, let’s focus on responsive images. As you probably noticed by looking at the last screenshot above, nowadays we have to deal with huge images in the era of Responsive Web Design. How can we handle them?

Let’s see what the options are.

Flexible images

The first very solution for dealing with this RWD jungle is to set a max-width property to the images. In this way all the images are going to resize smoothly in all screen sizes. Take a look at the example by clicking on the nice light-blue “Demo” button and play with the resize of the browser’s window.

img {
  max-width: 100%;
}

Demo button

 

 

Background image

The one above is such a great, isn’t it? Right! But you know what? You can’t use it on the background image, yes I know that you are nodding and that’s exactly what you think, indeed the background images are not handled in HTML, but in the CSS, so we need to find another solution. Below there are two different examples that shows how the image background behaves depending on the contents, in this case text. In the second example it’s possible to notice that even if the text is longer than the background image, this one doesn’t stretch, but just appears at the maximum of the actual size.

.box {
  background: url("frida.jpg") no-repeat;
}

Demo button           Demo button

Background-size

How can we play with the background image? By using the background-size property we have different options. Let’s have a look.

Set the background-size by using pixels

.box {
   background: url("frida.jpg") no-repeat;
   background-size: 640px 900px;
}

In this case the background is going to have a fixed size that I’m setting by adding the width and the height. In the screenshot below it’s possible to see what happens. In this case, I set 640px for the width which is the actual size of the image and 900px for the height that is 260px bigger than the actual height of the image, indeed it’s possible to notice that now the image is covering all the text and is stretched.

Background-size property set in pixels

By setting the height in auto the size of the image automatically resize proportionally to the set width.

Set the background-size by using percentage

In this way we can tell to the browser to cover the container by using a certain percentage of the image.

.box {
   background: url("frida.jpg") no-repeat;
   background-size: 50% 50%;
}

By clicking on the “Demo” button it’s possible to take a look at an example and play with the percentages by using the inspect element tool.

Demo button

Background image on previous versions of Internet Explorer

The Shining – typical reaction of a Frontend Developer every time someone says: “previous versions of Internet Explorer”

Unfortunately,  in the previous versions of IE9 the background-size property is not accepted, for this reason it’s necessary to add a bit more code in the HTML and CSS as follow:

<!DOCTYPE html>
 <!--[if IE]><![endif]-->
 <!--[if lt IE 9]> <html class=“oldie ie”> <![endif]-->
 <!--[if IE 9]> <html class=“ie ie9”> <![endif]-->
 <!--[if gt IE 9]> <html class=“ie”> <![endif]-->
 <!--[if !IE]><!--> <html><! [endif]-->
.box {
    background: url("frida.jpg")
    no-repeat; background-size: 50% 50%;
} 
.oldie .box {
    background-image: url ("frida-noresize.jpg");
}

Done! Now we can go on with our journey.

Background-size: contain

This is a pretty powerful value, in fact just by using contain it’s possible say to the container .box, in this case, take the picture and using it in its entirety fill the space of the container. To better understand how it works, take a look in the example available by clicking on the “Demo” button and then, by using the inspect element tool, trying to delete part of the text and see how the background reacts to the image.

.box {
   background: url("frida.jpg") no-repeat;
   background-size: contain;
}

Demo button

Background-size: cover

Even more powerful than contain is cover, indeed by using it we can set an image as a background for a container and the image adapts its size to the one of the container.

 .box {
    background: url("frida.jpg") no-repeat;
    background-size: cover;
}

Demo button

As you may noticed, in the previous example the image is not in the middle and this is a bit annoying. This is because as a default the image starts to cover the container by starting from the top right corner. In order to change the default setting it’s enough to add the background-position property and to declare the center values to say to the container to take the picture, put it exactly in the center and there let it expand until it covers all the available space.

 .box {
    background: url("frida.jpg") no-repeat;
    background-size: cover;
    background-position: center, center;
}

Demo button

In my opinion this is THE SOLUTION to deal with the background images in a RWD website.

Responsible responsive

Ok, now that we know all this stuff, let’s go back a bit to when I was saying: “nowadays we are dealing with websites using HUGE IMAGES”. How can we deal with these huge images knowing that our users can access our website from different devices and in different contexts? For example, a low speed connection or those people using a limited data pack for usage of internet on the mobile. What can we do to improve the experience that we are giving to our users? How can we have not just a responsive design, but also a responsible one?

SRCSET

To our rescue arrives the srcset attribute that allows us to give to the user a more adapt size of the image depending on the user’s screen. In the example below I saved three different versions of the same image, the bigger size of the images will be used for the screen bigger than 1140 width, the medium size for the one bigger than 720px and the smaller for the one bigger than 360px. In fact, by looking at the example below it’s possible to check which file is being requested while resizing the browser’s window.

<img srcset="cat.jpg 1440w,
             cat-medium.jpg 720w,
             cat-small.jpg 360w" src="cat.jpg" 
             alt="An illustration of a cat"
             sizes="100vw"/>

Demo button

If you are wondering: what’s the sizes attribute?

It’s a way to let the browser deal with the image instead of us by giving to the user the best one available depending on the user’s device/screen. To do this we need to set a kind of media query as shown in the snippet above.

What else we can do with the sizes property?

<img srcset="cat.jpg 1440w,
             cat-medium.jpg 720w,
cat-small.jpg 360w"
src="cat.jpg"
sizes="(min-width: 600px) 300px,
(min-width: 800px) 50vw, 
100vw"
alt="An illustration of a cat"/>

Basically, above we are telling the browser: if the viewport has a minimum width of 600px, the image will be 300px wide.

If the viewport has a minimum width of 800px, the image will be 50vw in width. The vw is a unit of length in CSS, so 50vw is another way of saying the image will occupy 50% of the width of the viewport.

Finally, 100vw is the default value for the sizes attribute.  It means the image will occupy the full width of the viewport. So if the condition in our first size entry isn’t met, for example if the viewport is below min-width: 600px, then the image will be sized at 100% of the viewport’s width.

SVG

In responsive design, using .svg files for graphic elements, like logos for example, is a perfect way to deal with different screen sizes, because svg files can resize automatically without losing any quality.

<picture>
   <source srcset="logos/cibc.svg"
   type="image/svg+xml" />
   <img src="/logos/cibc.png" alt="CIBC" />
</picture>

In this case there’s no need to deal with the media queries. Instead, there’s a single type attribute that says to the browser if you support SVG go for it, if not there’s the fallback that is the first option, such as our beloved .png file.

SVG format is of course a powerful tool that allows us to do amazing stuff, but it’s a pretty huge topic that deserves a specific post.

Presentation

I did also a presentation about this topic, please feel free to take a look: Seminar Presentation – Responsive images [PDF]

Image credits

Stefano Dorigo –  @drseltz

Resources

7 Replies to “Seminar: Responsive Images”

Leave a Reply

Your email address will not be published. Required fields are marked *