Tagged as

Responsive Image Approach Options

Discusses the different approaches available and reccomendations for responsive images

Introduction

Responsive Web Design has become best practice in creating
an integrated experience across, Desktop, Tablet and Mobile.

A constant annoyance to designers and developers in each
implementation is how to deal with images. The most common method today is to
download the desktop version of an image. Then if a user is on mobile or tablet,
download a second optimized image and replace the desktop version of the image.

This is exactly the opposite of what we want to do. Mobile
and tablets have lower bandwidth than desktop but these devices suffer
downloading twice as many images.

Considering that an average site homepage weighs in at a
whooping 1.4M with images accounting for at least 60% of this, if you use the
standard hiding method, tablet and mobile users are receiving homepages of up
to 2MB in size.

We know from all the reports published by companies such as
Amazon and Google, the speed of a site impacts conversion rates. We want to
deliver the most efficient and optimal experience to every user, in the
shortest possible time. Thus giving us the headache that we currently have for
responsive images.

Our Options

CSS Background Images

Right now, we currently have one officially supported option
to make responsive images work, and that is using background images with media
queries via CSS. While this approach allows us to only download the most
appropriate image for the device in question, it lacks the ability for us to
supply alt tags, which are needed for ADA compliance. No alt tags also mean
that your images are not properly indexed by search engines.

CSS

HTML

In this example, if the users browser is less than 600px’s
wide, they will receive the mobile version of the background image. If their
browser is wider, they will receive the normal version of the background.

Output

Picturefill

This uses the latest proposal from the W3C for responsive
images, and uses JavaScript to support a new tag called the picture tag. This
requires some new markup but gives you more control over the images and what is
downloaded, eliminating the first downloaded images.

HTML

As we can see from the above markup, we are using a new tag
called the PICTURE tag to provide alternatives for the browser to load using
media queries, giving you the best of all worlds.

Recommendations

This is all well and good, but what approach should you use
for the website you are building today. For
that, we recommend the following.

Scenario One

If you are actively maintaining the site or it is heavily
trafficked, I would recommend that you use the picturefill approach as this gives you the best performance and
most modern approach.

Scenario Two

If the website you are building is not going to be actively
maintained, or managed through a content management system, I would recommend
that you use CSS Background Images.

Looking Forward

The responsive image space is constantly changing since srcset was first proposed six months
ago. There have been 3 other proposals that the community has agreed upon, and
then moved on from. Picture tag being the current agreed upon method. We are getting
close to an official standard, but things do change all the time.

Until then, web developers will continue to use a
combination of CSS Background Images and various JavaScript implementations to
ensure that an optimal user experience is delivered for every device type.