The picture element allows you to change an image's crop, resolution etc. based on predefined conditions like screen size.  Use the following code in your HTML to create an image with multiple crops.

1.

Decide how many image crops you'll need (for example a small and large image) and at what breakpoint.  Then, use the following code example to implement in your HTML.  The breakpoints and image file names will need to be changed to fit your project.

<picture>
  <!-- This is the image that will swap in at 600px -->
  <source media="(min-width: 600px)" srcset="image-large.jpg">
 <!-- This is the image that will swap in at 1000px -->
  <source media="(min-width: 1000px)" srcset="image-medium.jpg">
  <!-- This is the image that will display at small sizes up until the first breakpoint.  It goes in the standard img tag along with proper alt text.  If a browser doesn't support the picture element, it will also fall back to this image by default -->
  <img src="image.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
2.

If you're using a CMS like Craft to output your images, you can dynamically create these multiple crops using Transforms!  See more information about creating transforms in Craft.  The code will look something like this, but note that the field names and transform names will need to be changed to fit your project.

{% for image in entry.featureImage %}
<picture>
  <source media="(min-width: 600px)" srcset="{{image.url('large')}}">
  <source media="(min-width: 1000px)" srcset="{{image.url('medium')}}">
  <img src="{{image.url('small')}}" alt="{{image.title}}">
</picture>
{% endfor %}

Related Articles


Having trouble finding something?

Submit the content update/request form, and we’ll be sure to make the change or find the answer.