With the web being viewed on more and more different devices of different sizes, it's more important than ever to make sure that you are serving the right image size for each device. Using responsive images helps your website load faster, improves your SEO, and gives you more design control of your site. Let's take a look at how prismic.io makes it easy to set up responsive images using the picture element.

This example will show you how to set up an image for three different screen sizes. We will have a big image for the desktop view, a medium sized image for the tablet view, and a small image for the mobile view. The desktop and tablet views will have the same aspect ratio, while the mobile view will have its own unique cropping.

Set up your Custom Type fields

You can set up multiple image resolutions in prismic.io by including the “thumbnails” configuration. As the name implies, this is useful to set up thumbnails for an image, but is not restricted to doing only that. In fact, it's just as useful for responsive images as it is for thumbnails.

Here we will use it to define the height and width for our tablet and mobile views.

"image" : {
  "type" : "Image",
  "fieldset" : "Responsive Image",
  "config" : {
    "constraint" : {
      "width" : 1500,
      "height" : 500
    },
    "thumbnails" : [ {
      "name" : "Tablet",
      "width" : 900,
      "height" : 300
    }, {
      "name" : "Mobile",
      "width" : 400,
      "height" : 300
    } ]
  }
}

Upload images and set up your views

When you add your image, you will see the tablet and mobile views appear. The prismic.io system will automatically set up the alternate views, but you have the freedom to change them to your liking.

You can click on each view to edit it like any other image. This includes selecting a completely different image if your design calls for it. Be cautious with this, though, because all the views for your image will share a single alt-text.

Integrate the images into your templates

All that is left to do is integrate these images into your design and you should be good to go. Use the following code to load the url for each image view.

// using pug (previously jade) templates
- var desktopURL = pageContent.getImage("page.image").url
- var tabletURL = pageContent.getImageView("page.image", "tablet").url
- var mobileURL = pageContent.getImageView("page.image", "mobile").url

picture
  // mobile
  source(media='(max-width: 400px)', srcset=mobileURL)
  // tablet
  source(media='(max-width: 900px)', srcset=tabletURL)
  // desktop
  source(srcset=desktopURL)
  img(src=desktopURL)

The picture element is quickly becoming the standard for responsive images and is supported by almost all the major browsers. For the few browsers that do not yet support it, we suggest using a responsive image polyfill like Picturefill to fill that gap.

Well done!

You’ve successfully set up your image field to handle responsive images. Use this technique for all your images to make sure that your website is loading the right image for the right screens.

Did this answer your question?