| Interactive Media Design

Responsive Images

Preamble

Responsive images are images that adapt to the context of a user’s device. The purpose is to serve up an image that is appropriate to the resolution, size and orientation of the viewport it will be rendered on, while maintaining the style and intent of the author’s design.

There are effectively two problems that responsive images seek to solve:

  1. The resolution switching problem
  2. The art direction problem

The resolution switching problem can be decomposed into two parts:

  • same image in different sizes
  • same size image with different resolutions

The art direction problem can be described as the desire to use different images to suit different display sizes or orientations.

We’ll explore these in the next two modules.

Basic Image Recap

Basic images are implemented on a web page through the use of the <img> element.

<img src=“img/hungry-kitten.png” alt=“A picture of an orange striped kitten eating a mouse”>

If the image above happens to have a resolution of 1000px x 1000px but the viewport is only 480px wide there’s a significant amount of data that isn’t rendered. Furthermore, there’s a potential waste of bandwidth to fetch resources that could have been optimized without impacting user experience.

Another situation could arise where the image resolution isn’t high enough to take advantage of higher resolution display resulting in blurry or pixelate images.

As mobile devices with different viewport sizes, pixel densities and aspect ratios proliferated, a need arose to conditionally serve up images appropriate to the device context.

The <img> element has evolved introducing attributes that accommodate images of varying resolutions and pixel densities.
The <picture> and <source> elements can be used to apply different images in situations where different images are needed for art directions. In fact, the <source> tag can also accommodate various resolutions conditionally loaded through the media attribute.

Further Review

This YouTube video was created by Steve Griffith.

See Also

References