Responsive Image core module test

Drupal 8 has a core module called Responsive Images that provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tag. This means we can now load images that have been specifically sized for the screen based on screen width breakpoints resulting in faster loading on mobile devices.

The image below is a test of the Responsive Images module. I created new image styles and assigned them to the breakpoints provided by Drupal. You can declare your own breakpoints by creating a THEME.breakpoint.yml file. I then created an image field for my content type and changed the display of the image field to use the format provided by the Responsive Image module. Change the size of your screen/browser and if you look at the source of the image below you can see the browser chooses only to display the image that best fits the size of the viewport. For this example I only use 3 breakpoints:

Image from