Using element media queries to display art-directed images

There is yet another improvement we can make to our thumbnail images (this will be the last one for now). Right now, we have different resolutions for each of our images, specified by the srcset attribute, and the browser will choose the most appropriate one based on the viewport size. One issue with this is that it can be harder to see detail in the smaller images as they are scaled down. For example, an image might contain text that is legible at higher resolution, but not at lower resolution. In these cases, it can make sense to edit the image, to crop it, or zoom into some particular detail, and provide a new image that is more visually suitable at lower resolution.

We saw earlier how CSS @media queries can be used in AMP pages in much the same way as you would use them in a standard HTML page. When the viewport changes orientation or is resized, the media queries are re-evaluated. AMP extends the functionality of media queries beyond what is possible with regular CSS by allowing media queries to target individual elements with the media attribute.

We can use this to provide cropped versions of our images to display on small screens. This is a bit like using the HTML5 picture element to choose between different images, except that the media attribute can be applied to any AMP element, not just amp-img (full code at /ch3/news-related.html):

<amp-img media="(min-width: 35.01rem)"
         src="img/penguin.jpg" 
         width="125" 
         height="75" 
         layout="responsive" 
         srcset="img/penguin-sm.jpg 125w,
                 img/penguin.jpg 640w">            
</amp-img>
<amp-img media="(max-width: 35rem)"
         src="img/penguin-crop.jpg" 
         width="125" 
         height="75" 
         layout="responsive">
</amp-img>

In AMP, an element's media query is evaluated, and if it matches the current viewport, then the element is displayed, otherwise the element is hidden. In this code, we use two mutually exclusive media queries. So, for viewports greater than 35rem, the first amp-img element will be displayed and the browser will choose an image from one of the images provided in srcset. For viewports 35rem and below, the first amp-img will be hidden and the second one will be displayed, and, for the previous code sample, the cropped version of our penguin image will be used.

Note that to implement art-directed images like this on your own website, you'll need to edit and crop your images with an image editor application, such as GIMP, Photoshop, or an online image manipulation service.

The result is shown in the following image, where the cropped versions of our thumbnails are displayed on a small screen:

Note that if you look at the full source for this example, you'll see that we've built up this code statically, and we've repeated the same code four times, once for each thumbnail item. In a real environment, you might use a server script to generate this AMP-HTML code in a loop. We'll also see how we can build lists like this dynamically directly in AMP pages in Chapter 7, Dynamic Content and Data-Driven Interaction.

Another point to note here is that, while AMP has built-in support for the different layout styles of its components, it's not a silver bullet for all your layout needs. As with traditional HTML web pages, you will need to spend time planning your page layout, and you'll need the CSS knowledge and skills to implement it.