Images have always been one of the more frustrating parts of building and maintaining websites – whether it’s optimising images for fast download, or setting up a site so that untrained users can use images without having to resize 3 or 4 variations, or having a deep understanding of the subtleties of JPEG compression vs GIF…

Things are not getting easier..  We cannot simply take into account the size of the image (in terms of pixels), but also the resolution of the screen displaying the image. Phones and laptops with high density displays can make use of more pixels, and images that don’t make use of those pixels can look blurry and out of focus.

Add to that the fact that we potentially need to display an image of not only differing size, but differing shape for different devices and ‘breakpoints’ and it leaves everyone but the most capable responsive web developer running for the hills. It seems that every image on your website needs to have a dozen versions just to display correctly across all devices.

So, developers and website owners need to ask:

  • Do I want the size and/or shape of my image to change depending on my responsive design rules?
  • Do I want to optimise my image for high-dpi screens?
  • Do I want to serve images of different types to browsers that support them?
  • Do I want to serve different art or crops depending on certain contextual factors?

In this first of 4 blog posts, we’re going to deal with changing the crop, size and quality of an image responsively depending on the screen width, and how using AssetZen can make that process much easier.

Changing the size and/or shape of an image depending on screen width

Imagine you have a page on your website which requires a full screen width hero image in a letterbox shape. This looks great on a pc, however 2 issues occur if we simply scale this image down with the browser. Firstly, it’s possible that once we are down to a narrow screen, we don’t need such a large image and can speed the page up by loading a different one.

Secondly, once we are looking at the image on a portrait mobile device, it will appear as a small strip across the screen, so we won’t be able to see it properly.

In this scenario, we want to be able to display a different shape or crop for different screen sizes, a wide, landscape crop one for desktop devices over 1024px, and a square crop for smaller devices.

Example Code

<picture>
   <source media="(min-width: 1024px)" srcset="https://assetzen-images.mrzen.com/i/i64JSQdPkRcc/w:1200/h:400/q:80.jpg">
   <img src="https://assetzen-images.mrzen.com/i/i64JSQdPkRcc/w:400/h:400/q:80.jpg" alt="Boys on the beach">
</picture>

At a screen width of 1024 and above, a letterbox image of 1200 x 400 is used, below that, a square image of 400 x 400 is used. If you can resize your browser, notice how AssetZen has cropped the image around a focal point, so that the subjects of the image are still central to the image despite having cropped the image significantly.

Example (adjust screenwidth for demonstration)

Boys on the beach