Netlify Large Media and the picture element

An example of powering picture elements for responsive images, using Netlify Large Media.

Image transformation

If you manage your source image asset files with Netlify Large Media, you can take advantage of the ability to perform on-the-fly image transformations to deliver resized and cropped versions of the images directly from Netlify's ADN.

Netlify transforms and caches your image assets if you add querystring parameters to your image src URLs.

For example, the image below in various sizes:

Using the picture element

These images have been added to the page in various sizes, using the picture element with multiple image sources.

Yummy cakeYummy cakeYummy cake

A picture helper

Whatever tool you use to generate your HTML, chances are that it includes a facility to make shortcodes or macros.

This example uses a static site generator called 11ty which gives us the ability to make a shortcode to output picture tags with many image source attributes including transformation parameters automatically added to the image urls.

This shortcode:

{% picture photo.jpg "Yummy cake" %}

outputs this html:

<picture>
<source srcset="/images/photo.jpg?nf_resize=fit&w=700" media="(min-width: 1200px)">
<source srcset="/images/photo.jpg?nf_resize=fit&w=600" media="(min-width: 740px)">
<img src="/images/photo.jpg?nf_resize=fit&w=500" alt="Yummy cake" />
</picture>

Get started with Netlify Large Media

Need some reference code to get you going? You can clone the code for this site to use as an example.

Once cloned, you can find examples and documentation on how to configure Netlify Large Media, in the docs.