Adaptive image is not only to fit the image in large and small devices; it’s about contextual optimized image for normal and retina display. Responsive web design (RWD) has different context, like high resolution and low resolution display, high bandwidth and low bandwidth connections, high memory and low memory devices, small and large display, portrait and landscape mode.

Contextual image in responsive web design

One image cannot be optimized for different devices. Sending one high-resolution image to all devices will waste the bandwidth (memory), similarly sending medium-resolution image to all devices will not have a good user experience in the high-resolution displays.

Does any adaptive image solution works?

There are many solutions but thinking of all the spectrums, every solution have some strength and weakness, it’s not only about making an image adaptive from large display to small display but also providing single contextual optimized image for the different display, resolution, browser, memory and bandwidth.

What does the standard says for adaptive image in responsive web development?

There is no defined standard but picture element is the proposed solution by W3c. Picture element is used with different source element within it. Tag img is used as fallback for the legacy user agent. Polyfill for the same has already been created.

1

2

3

4

5

6

7

<picture width="500"height="500">

<source media="(min-width: 45em)"src="large.jpg">

</source><source media="(min-width: 18em)"src="med.jpg">

</source><source src="small.jpg">

<img src="small.jpg"alt=""/>

<p>Accessible text</p>

</source></picture>

Other proposed method is adding bitmapped image by adding srcset attribute to the img element, that adapt different assets while representing the same image.

Responsive image approach picturfill seems to be better. It provides contextual optimized image, ready for retina display and degraded gracefully in the legacy browsers. But at a cost of JS dependency, increased DOM size and not strictly semantic markup. But still sounds a good approach, simple to use and take care of the different context.

Clown car technique – A solution using SVG for adaptive image in responsive web development

SVG support the media query and raster graphics that can be used to create an adaptive image. Clown car technique uses an empty SVG (referred as car) that doesn’t contain any graphics, but apply different raster background image (referred as clowns) via media query within SVG file. Beauty of this technique is logic remain in the SVG file that serve the right image using media query.

SVG browser support

Major browsers-Firefox, Chrome, Safari, IE9+ and Opera support SVG, all the contemporary browsers support SVG today, browsers in mobile space that don’t support SVG are older version of Android browser below version 3.

Clown car technique in practice – Aspect ratio of the images

To preserve the aspect ratio and ensure that it scales uniformly viewbox and preserveAspectRatio is included in the SVG tag. A list of four numbers can be the value of the viewbox attribute: min-x, min-y, width and height.

When using viewbox attribute, in some cases graphics may stretch to fit non-uniformly to take the entire viewport. To preserve the aspect ratio in all cases preserveAspectRatio attribute is used with value xMidYMid or there are others to make a desired choice.

1

2

3

4

5

6

7

8

9

<svg xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 330 359"preserveAspectRatio="xMidYMid meet">

<title>Clown Car Technique-realityonweb.com</title>

<style>

...

</style>

</svg>

Clown car technique in practical – img or background-image

Raster images are used in SVG file with media query and images are set display:none but this does not prevent the images from being downloaded. Therefore, foreground images increase the http request and waste bandwidth. CSS background image can be used instead of foreground image in the SVG file as CSS background image download only the image that is required.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<svg xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 330 359"preserveAspectRatio="xMidYMid meet">

<title>Clown Car Technique-realityonweb.com</title>

<style>

svg {

background-size:100%100%;

background-repeat:no-repeat;

}

@media screen and (max-width: 400px) {

svg {

background-image:url(small.png");

}

}

@media screen and (min-width: 401px) and (max-width: 700px) {

svg {

background-image:url(medium.png);

}

}

@media screen and (min-width: 701px) and (max-width: 1000px) {

svg {

background-image:url(big.png);

}

}

@media screen and (min-width: 1001px) {

svg {

background-image:url(huge.png);

}

}

</style>

</svg>

Clown car technique in practice – object element needed

Some browsers prevent SVG from importing media or scripts to control the cross-domain scripting attacks. It’s their content security policy and Firefox even block the same domain media. If you use SVG file directly, you would likely see no image. Solution is the object element that allows an external resource to be treated as an image.

1

2

3

4

5

<objectdata="responsiveFile.svg"type="image/svg+xml">

<!--[iflte IE8]>

<img src="medium.png"alt="Fallback for IE"/>

<![endif]-->

</object>

At the end

There are many other solutions for adaptive images and every solution (including above) have some strengths and weakness like, JS dependency, server-side dependency, security concern, accessibility, invalid syntax, special markup. Picking the right approach depends on the requirement and the technology used in the project.