UX Design and Development course

HTML5 <PICTURE> ELEMENT

Source

Responsive design techniques are a way for developers to adapt a site layout to a wide range of devices, from desktops to iPhones, and have it consistently look sharp and load quickly. And no responsive design solution is complete without an adequate technique for dealing with images.

An ideal adaptive image strategy should do the following:

  1. Fit the screen. Most images within desktop layouts are too large to fit within the tiny screen real estate of a mobile device. An adaptive strategy needs to resize the image, via CSS or otherwise, so that it can resize into a mobile screen.
  2. Reserve bandwidth. High-res images are enjoying greater popularity with the advent of retina displays and loading high-resolution images can eat up quite a bit of bandwidth. While this may not make a lot of difference when browsing on your desktop over a fast wi-fi network, it can make for an achingly slow site when surfing over a 3G network on a mobile phone. So, if you can serve up a lower-resolution image when you are viewing your site on a mobile device, browsing speeds up considerably.
  3. Take art direction. Not all images look good when squeezed onto a small display, particularly images with a lot of detail. When displaying a site on a mobile device, you might want to serve up an entirely different image altogether – perhaps the original image cropped to highlight a central object.

Current Responsive Image Solutions

The simplest technique for adapting images to small screens is to include the following CSS rule in your media query:

img {
  max-width: 100%;
  height: auto;
}

This rather elegant solution effectively squeezes all images that are too wide for your mobile screen within the containing element.

Keep reading ...