Infographic: Responsive Images Problems and Solutions

Download your FREE printable poster about responsive images

How are we supposed to deal with responsive images? We in the web community ask ourselves this very question time and time again to no avail. Just when you think you’ve found a so-called solution, it has knock-on effect causing problems elsewhere; we take one step forward and two steps back.

Currently on the web there are tons of articles debating this topic - the possible solutions, the pros and cons... Here at Awwwards we want to combat this information overload by compiling the best advice out there and turning it into one, simple infographic.

Get your infographic poster today!

This infographic is divided into three parts: the first identifies the problem, the second studies the various requirements, and the third lays out the most common and efficient solutions available.

The B2 poster (50 x 70cm) is FREE and available for downloading and printing. Get yours NOW! All you need to do is SHARE it on Twitter.

Responsive Images: If a perfect solution existed, what would it be?

1. How to Approach the Problem

In an ideal world, responsive images would be served already adapted to the size of the screen on the required device. It would also be an added bonus to have the option of serving pixel-dense images for retina screens without compromising the available broadband.

2. Different Speed

What image do we serve to one user with a retina mobile and 3G connection? Ought we to detect the connection speed and reduce the file size in the event of poor-quality connectivity?

3. Artistic Cropping

An adequate system should solve the “art direction dilemma” and not just serve the same images in a variety of resolutions. It should give us the option of editing the file, focusing on the most important elements and cropping the image for multiple screen widths.

Which is the best responsive image workflow?

First we must analyze the requirements of each and every project and ask ourselves these kind of questions:

- Do I need to serve retina images if my target audience doesn't use this type of device?

- Is it viable to make changes to the markup of every image in my project using a large number of resources?

- Do I really need art direction for my site?

- Can I make use of third-party solutions?

A Markup-Based Solution

Many of us would have thought that the best idea would be to find a markup-based solution, but that fact is that introducing a picture element would mean manually creating a variety of images for each breakpoint. This is neither maintainable nor sustainable for larger projects; we need an automated solution to this problem.

It goes without saying that any solution ought to be easy to maintain allowing us to adapt existing content without creating too many problems, and generate a variety images from one single, hi-res image. The perfect system would meet the specific standards, be semantically correct, and have clear, clean code perfectly adapted to any given browser. Is this even realistic? Sadly, one thing we are sure of is that there is no ideal world and no perfect system… but there are a lot of good ones.

In the infographic we have created exclusively for you, we have compiled the most “stable” and common solutions, along with a few others which are also worth a look.

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world.
We aim to create a meeting point where web professionals from across the world can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.