Responsive Images in Drupal 8
Images have never been easy to deal with in a responsive website. In the past 4-5 years diffeent techniques have been used to handle images. Some work well, others not so much. A promising technique is using the Picture element which solves many of the problems developers have been dealing with when handling images in a responsive website. However, there are arguments that the Picture element should only be used when you are trying to achieve Art Direction, meaning needing to crop an image to present a specific area of the image on a given device.
The biggest advantages of using the Picture element include attributes such as SRCSET, MEDIA and SIZES, which give you tremendous control on how to handle images. Instead of telling the browser what image to display at any given breakpoint, you can set things up so the browser chooses the best image possible based on conditions of the website (device size, screen resolution, connection speed, etc.).
Althought he Picture element is not widely supported out of the box by some browsers, there is a JS pollyfil (Picturefill), which closes the support gap giving you a virtual 100% support by most popular browsers. The great news is that Drupal is ahead of the game on this area, the Picture Module (Responsive Images Module in D8), already includes Picturefill and in combination with the Breakpoints module allow us to take advantage of many of the Picture element features. Even greater news is that in D8, Responsive Images and Breakpoint are part of core.
Join us on this session where we will talk about responsive images in a general way but also will focus on how Drupal is ahead of the curve when it comes to providing you with the tools you need to ensure the images you are serving on your website are the best possible.
Target Audience:
This talk is intended for front-end developers and site builders who's responsibility includes managing images for all devices in a way that promotes great performance and best practices.
Knowledge level required:
- Good understanding of RWD including media queries, image sizing
After this session you will be able to:
- Have a solid understanding on how to properly handle images on your responsive website to achie image resizing and/or art direction.
- You will be able to use the Responsive Images module in combination with Breakpoints module to create advance image treatments for your website.