Responsive images

Intro:

Images are just one part of web design but a very important part. It is best your images work well on all devices. Devices differ in screen sizes, resolutions and more. 

We want the best of both worlds: images that look great no matter which screen they’re viewed on, while loading as quickly as possible.

Responsive image technologies were implemented recently to solve the problems by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction.)

Thankfully this great solution by the work of the Responsive Images Community Group gives the options such as the picture element and the sizes and srcset attributes. With these tools, we can provide a selection of image files so your browser can pick the right one depending on how someone is viewing it. This can help to make sure photos download as fast as possible while still being enjoyed in all their glory.

Changing viewports:

In 2018, 52.2% of all worldwide online traffic was generated through mobile phones, up from 50.3% in the previous year (Statista, 2018)

Why use images?

1. Websites with images get more views

Nearly double, in fact, according to one study that found online content with images gets 94 per cent more views than pages without.

2. Images bring your product or service to life

Perhaps you’ve heard the old expression it’s better to show than tell. Images on your website act as storytellers, allowing website visitors to visualize your product or service – and themselves using your offering. As well, research has found that the human brain can correctly identify images in as little as 100 milliseconds, making carefully-chosen images that reflect your product and values an important opportunity to quickly capture visitors’ attention – even before they’ve read a word of text. This same effect can also help improve recall of your business later. Aim for photos that depict positive emotions and, if it makes sense, contain people, two things that have been shown to boost conversion rates.

3. Images help you show up in search engine results

The SEO benefits of using images are multifold. If you properly label images with search-friendly metadata and captions, you are creating more content for search engines to index. Your content will then show up within both web search results and images searches – that’s double the opportunity for discoverability. If you own original photography (vs. stock images), you may also want to consider allowing local blogs and websites to use your images free of charge in exchange for a link back to your website. Called inbound links, these are another great way to boost your search ranking.

4. When you do appear in search results, images can win you the click

Websites with images don’t just perform better in search rankings, they’re also more attention grabbing when they show up on search results pages. This means websites with properly labeled photos win more clicks. To see this effect in practice, go to Google and search for “chocolate chip cookie recipe.” Notice how web pages that have photos display a thumbnail picture next to the link? Now imagine what happens when a user searches for a local business such as yours and encounters just a few results with thumbnail images. Which website do you think they are most likely to click on?

Local businesses in particular benefit from images in search results – accordingly to one study, 60 per cent of consumers said they were more likely to consider or contact a business if their search result listing included an image. 

5. Website images fuel social media

Great images can play a major role when it comes to spreading the word about your local business on social media. Studies have found that including at least one image on pages is associated with more shares on Facebook, while other research has found that social media posts that include images have higher engagement rates than text-only posts. To get the biggest social boost from your website images, make it easy for visitors to share your content by including buttons to instantly post to Facebook, Twitter, Pinterest and other social media sites.

Some may believe that words alone are enough to tell a tale on the web. A text page is fast. Even a very long article can load in next to nothing. Add a photo and the web slows down. Yet images bring emotion and a connection with others. However people don’t want to wait around longer than necessary. And any benefit you get from great images disappears the longer you wait. Images also lose their emotional impact if they’re blurry and someone has to squint to view. 

Why images need to be responsive?

If you set your max-width: 100% in your CSS that will ensure your images will look correct. You will probably want to have the largest image size so the biggest viewports are served with a non-blurry image. However when you are visiting the web page on a device that displays an image at 300px wide you will be wasting precious bandwidth serving such a high resolution image. A high res image on a low res screen will look like any other low-res image and will just take longer to transfer and longer to appear.  With viewports becoming more and more versatile it is important for you to serve the viewer with the best quality content possible.

An ideal situation would be to have multiple resolutions available and serve the appropriate size depending upon the devices accessing the data on the website.

Image types:

The biggest difference in how you’ll handle making images responsive is what you’ll do for images that are photos, versus how you’ll handle logos and icons.

Photos—often referred to as raster images—do not scale so easily. The word raster comes from the Latin word rastrum, or rake. Old cathode ray tubes created images on screens by literally drawing one line at a time, raking each across the screen. These days raster images are created by hundreds of thousands to millions of individual dots, or pixels, on a screen. It takes a lot of data to tell a browser what color each of those dots should be in order to recreate an image.

Logos and icons on the other hand often use vector graphics. These images can be specified using mathematical vectors—a series of points on lines along with information that describes the curves connecting those points. The simpler shapes and colors in vector graphics can scale really easily to a wide variety of sizes, because math can easily calculate the color needed for each pixel.

Vectors and photos:

You might think that vector images would solve these problems, and they do to a certain degree — they are both small in file size and scale well, and you should use them wherever possible. They aren’t suitable for all image types however — while they are great for simple graphics, patterns, interface elements, etc., it starts to get very complex to create a vector-based image with the kind of detail that you’d find in say, a photo. Raster image formats such as JPEGs are more suited to the kind of images we see in the above example.

For vector graphics, you’ll want to use SVG files. SVG means Scalable Vector Graphics, and the name really says it all. SVGs are text files which use XML to describe the vectors necessary to create an image. Use an SVG plus a little CSS, and your logos and icons will be responsive.

Thankfully, images used as content within a site, which are loaded through the HTML markup for a page, have great options that we can use. These sorts of images are generally what people are referring to when you hear the term responsive images.

Art direction:

When it comes to art direction

To make improvements to the images displayed you can offer a cropped version of the image which would display the important details of the image when the web page is viewed on a smaller screen. A second can be displayed for medium screens like a tablet. Finally the larger option for larger screens.

The payoff for this effort is that your images look nice and crisp at all viewport sizes, while still downloading efficiently. No more super slow mobile sites that take forever to load images! That makes a huge difference for those visiting your site. Downloading image files tends to be a big chunk of the work that browsers do when visiting a new site. Speed that up and everybody wins.

Example:

So we’ll be focusing mostly on raster images that appear as content on your site. Even there, however, there a few important variations to keep in mind.

What is the `picture` Element?

The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media queries, it gives developers control as to when and if those images are presented to the user.

The picture element is one part of the HTML specification.

Sample Markup for `picture`

<picture>

  <source media=”(min-width: 40em)”

    srcset=”big.jpg 1x, big-hd.jpg 2x”>

  <source

    srcset=”small.jpg 1x, small-hd.jpg 2x”>

  <img src=”fallback.jpg” alt=””>

</picture>

What are the `srcset` and `sizes` attributes?

The srcset and sizes attributes extend the img and source elements to provide a list of available image sources and their sizes. Browsers can then use this information to pick the best image source.

Both srcset and sizes are part of the HTML specification and can used separately or in conjunction with the picture element.

Sample Markup for `srcset` and `sizes`

<img src=”small.jpg”

     srcset=”large.jpg 1024w, medium.jpg 640w, small.jpg 320w”

     sizes=”(min-width: 36em) 33.3vw, 100vw”

     alt=”A rad wolf”>

<img src=”cat.jpg” alt=”cat” srcset=”cat.jpg, cat-2X.jpg 2x”>

ImageWidthHeightFile Size
2x large51441698398K
1x large2572849256K
320px, Single Density3201068K

Why can’t we just do this using CSS or JavaScript?

Most of the time when people refer to responsive images, they are referring to inline images, not CSS images.

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page’s CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. You couldn’t for example load the <img> element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

There are a lot of great resources that help explain the new responsive images specification. I highly recommend Jason Grigsby’s article series, Responsive Images 101, as well as Eric Portis’ Responsive Image Guide.  You can read the actual specifications for the picture element or the srcset and sizes attributes, although specs can be pretty dry reading. Understanding the specifications and syntax are important, but you still need to make a number of key decisions on how you’ll use responsive images with a particular site.

Sources:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

https://cloudfour.com/thinks/responsive-images-101-part-8-css-images/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes

https://webkit.org/demos/srcset/

https://www.lullabot.com/articles/fundamentals-of-responsive-images

https://alistapart.com/article/responsive-images

Leave a Reply

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