RESPONSIVE IMAGESand why <img src=”my-image.jpg” /> just won’t cut it any more...

RESPONSIVE WEBSITES NEED RESPONSIVE IMAGES

WHY DO WE NEED A RESPONSIVE IMAGE SOLUTION?We need responsive images to avoid having large desktop images being scaled down and served to mobile users (bandwidth eek!), or small mobile images being scaled up and served to desktop users (pixelation eek!).

OK, RESPONSIVE IMAGES, WHAT’S THE SOLUTION?

DON’T FRET THERE IS A SOLUTIONWe are already implementing a responsive image solution in all our projects, it’s called the <picture> element. Combined with <srcset> it allows us to serve up different images to different screen sizes and pixel densities.

N.B. <picture> and <srcset> aren’t fully supported at present, so we use picturefill, a javascript polyfill.

SO WHY ALL THE WHINING?

WE HAVE A SOLUTION, BUT NOT THE SOLUTION<picture> has given us a way to implement responsive images, helping us save on bandwidth and page size. However, it has left us with some common problems which we keep running into time, and time again.

Stop Whining!

PROBLEMS, WHAT PROBLEMS?

WELL I’M GLAD YOU ASKED...There are three main problems we are currently facing on a regular basis.

1. Banner images being cut off on large screens

2. Images that need to scale to fill a space3. Handling multiple images sizes when it

comes to client upload

LET ME ENLIGHTEN YOU

KNOWLEDGE IS POWERThe first two issues we commonly come up against can easily be solved by making clients aware of their options upfront at the design stage.

I’ll explain the options to each problem via quick and dirty codepen demos:

1. Banner images2. Images scaling to fit

HOW TO HANDLE MULTIPLE IMAGE SIZES

MULTIPLE SIZES FROM CLIENT UPLOADSThere are a few options for handling the need for multiple versions of an image. One option is to get the client to upload multiple images (boo, no client will want to do that). The other option is auto size and crop the images ourselves (boo, I uploaded a picture of the MD and his head has been cut off). And that leaves us with...

CROP SELECTION

LET THE CLIENT CONTROL HOW THEIR IMAGES LOOKUsing an image crop tool in the backend will let the client upload one image, then save a default crop, or select their own, giving them complete control and saving us numerous phone calls telling us that images are being cut off.

I’VE SEEN THE LIGHT

BRILLIANT, LET’S DO THAT!So we have our solution, problem is, clients, don’t like to spend money on back end admins, which means we currently don’t have anything in place, or any budget to put something there.

Learn more about Rawnet