Responsive Images

How do we implement art directed images?

In today’s world, websites are viewed on a plethora of devices ranging from compact mobile screens to large desktops, therefore, it is essential to have responsive images that improve the overall responsiveness of a website. However, simply resizing images to fit different screen sizes is not enough. 

Concept review: what is responsiveness?

It’s an approach to web design that aims to make web pages render well on a variety of devices, windows, or screen sizes from minimum to maximum display size to ensure usability and satisfaction. 

What are responsive images? 

Responsive images are images that can adapt to different screen sizes and resolutions, ensuring that they look great on all devices. There are a set of techniques used to load the right image based on device resolution, orientation, screen size, network connection and page layout. Art direction plays an essential role in creating visually appealing and effective responsive images.

Why is it important? 

  • Render a high-quality image on different devices 
  • Faster loading web pages  
  • User experience friendly  
  • SEO friendly 

What exactly is art direction?

Art direction is a method of creating responsive images for a website with a focus on the content of the image. Essentially, the goal of art direction is to keep the emphasis on an image when the screen size changes. This helps web designers avoid certain media elements becoming squashed as the screen size gets smaller. It’s called the art directed method because it’s a way of creating an art (media) focused website, it mainly helps the designer prevent the content of the image being looked over. The key part of the solution to this issue is changing the image that is displayed when accessed on a different display size. 

For example, here a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser.  

(MDN Web docs, 2023)

When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. 

(MDN Web docs, 2023)

It would probably be better to show a smaller, portrait image on mobile, which zooms in and focuses on the person. That way, the unnecessary background is cropped out. The use of the <picture> element in html allows us to implement just this kind of solution.

How does it work? 

  • Firstly, we must identify the screen dimensions at which the layout changes, these are known as breakpoints.  

As a standard, breakpoints are often defined based on-screen sizes that are commonly used. For example, mobile breakpoints are usually equal to 360 width x 740 height and high-resolution desktop breakpoints are often anything above 1920w x 1080h. The breakpoints are vital to the mark-up of art direction. 

  • Secondly, we must create or crop different versions of the image we’d like to feature. 

Each image produced should be suitably optimized for the different screen sizes and therefore resolutions. This means that image dimensions, file size, and format will vary depending on the device and screen size. 

Thirdly, we use only html markup to implement art direction, which is covered in more depth below. 

The key HTML element used to implement art direction is the <picture> element. In this case, the picture element acts like a wrapper that contains multiple <source> elements. The source element provides the browser with different images to choose from. Within the source element features the MEDIA attribute, which sets the media condition for the browser, instructing what minimum or maximum size the screen can be for a particular image to be shown. This is an essential part of the art direction method as it allows the designer to explicitly outline the screen size conditions to the browser.  

The second attribute of the <source> element is the SRCSET attribute, which is used to provide the path to the different image files.  

The last element within the <picture> element must be the <img> element, this provides the browser with a default image file if the conditions set in the <source> element aren’t met. For the img element, it’s really important to remember to provide the SRC and alt attribute because without them, the entire picture element will not work. For CSS styling, you must style the img element as opposed to the source element as the source tag is essentially a void element (web.dev, 2021). 

Here’s an example of the code in action: 

<picture> 

   <source media= “(max-width: 799px)” srcset=“girl-480w-close-portrait.jpg” /> 

   <source media= “(min-width: 800px)” srcset=“girl-800w.jpg” /> 

    <img src=“girl-800w.jpg” alt= “Father standing holding his daughter”/> 

</picture> 

(adapted from MDN Web Docs, 2023) 

Media conditions 

As mentioned earlier, the media attribute allows us to define the critical break points at which the browser should execute the change of image and page layout. 

  • If the screen width is 800px or more, the second source image will show 
  • If the screen width is 799px or less, the first source image will show 

Setting the correct media conditions leaves the end user with an enhanced browsing experience, where the content of the image is properly presented. The media conditions can also be set to rules that aren’t related to screen size like the users colour scheme or browser contrast settings (Stoumann, 2021). 

Following the demonstration of how to mark this up in html, below is an example of how art direction will look in action; 

(MDN Web docs, 2023)
(MDN Web docs, 2023)

Art direction vs resolution switching 

In responsive web design, there are actually two methods used to tackle responsive images, one being art direction and the other being resolution switching. Below is a summary of the key difference of the two methods. 

Browser compatibility 

(W3Schools, 2023)
(W3Schools, 2023)

The number in the table shows the first browser version that supports the <picture> element and srcset attribute. Chrome supported from version 38.0 which was released in 2014 and Firefox have supported from version 38.0 which released in 2015. Edge supported <picture> element and scrset attribute from version 13 which was released in 2015 and 2017. Safari supported <picture> element and scrset attribute from version 9.1 released in 2016 and 2015. Opera supported from version 25.0 onwards released in 2014. It shows that most browsers supported <picture> element and srcset attribute from 2015.    

Why not use CSS or JavaScript? 

As HTML is the first language that the browser loads when a new page is accessed, images are downloaded with HTML before interpreting the CSS and JavaScript documents. This process is great for reducing page load times but proves to be challenging when it comes to responsive images. For context, imagine you load a web page with an <img> and then you wait for the browser to identify the viewport width and adjust the image using the JavaScript document. After several steps of interpreting additional JavaScript and CSS documents, the original and small image would have already loaded as they appear in HTML first. So, it shows that using CSS and JavaScript is very bad in regards of responsive images. Therefore, the technique of art direction which use solutions like srcset are very essential for responsive web design.

Finally, how well does art direction improve the responsiveness of a website? 

This method enables us to provide a good user experience on both mobile and desktop screens, improves visual presentations, it controls the issue of having to shrink and image for the screen size and the layout responds naturally. Cropping the image allows the user to focus more on the content of the image. Also, it makes the website more accessible for users using mobiles with slow connection and at the same time for users with fast connection and high resolution it will provide highest quality images.   

To conclude, art directed images are an essential aspect of responsive web design, as they ensure that images look great on all devices and screen sizes. Implementing art directed images involves creating multiple image versions optimized for different screen sizes and implementing them using the HTML “picture” element. By following our steps, you can create visually appealing and responsive images for your website, enhancing your users experience. 

References  

MDN Web Docs. (2023). Responsive images. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images  

web.dev. (2021). Responsive images and art direction. web.dev. https://web.dev/patterns/web-vitals-patterns/images/responsive-images/  

Stoumann, M. (2021). Responsive images: How they work – and how to use them with “Art Direction” and “Dark Mode”. DEV. https://dev.to/madsstoumann/responsive-images-how-they-work-and-how-to-use-them-with-art-direction-and-dark-mode-2119  

W3Schools. (2023). HTML Tag. W3Schools. https://www.w3schools.com/tags/tag_picture.asp  

W3Schools. (2023). HTML <source> srcset Attribute. W3Schools. https://www.w3schools.com/tags/att_source_srcset.asp  

Crozier C. (2019). Responsive Images: Improving performance by letting the browser do the work. Formidable. https://formidable.com/blog/2019/responsive-images/  

Caniuse. (2023). Picture element. Caniuse. https://caniuse.com/?search=picture  

Caniuse. (2023). Srcset and sizes attributes. Caniuse. https://caniuse.com/?search=srcset  

Leave a comment

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