Images have never been easy to deal with in a responsive website. In the past 4-5 years different techniques have been used to handle images in a responsive website. Some work well, others not so much. A promising technique is using the Picture element which promises to solve many of the problems developers have been dealing with. However, there are arguments that the Picture element should only be used when you are dealing with Art Direction, meaning needed to crop an image to present a specific area of the image on a given device.
But there is more to cropping images with the Picture module than you may know. Attributes such as SRCSET, MEDIA and SIZES 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.).
Although he Picture element is not widely supported out of the by all browsers, by the Picturefill, a JS polyfill, the lack of support gap is closed. The great news is that Drupal is ahead of the game on this area. The Picture Module 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 (formerly Picture module in D7), and Breakpoint are part of core.
Starting with Drupal 8 Beta 15, things have gotten even better as Responsive Images can be handled in many ways besides just using a device's screen size. We can now take advantage of the SRCSET, SIZES attributes, something that was not possible on earlier beta releases, which give us alot of control over which and how to serve the best image possible to the right device.
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.
This talk applies to both Drupal 7 and Drupal 8 with minor differences between the two.
- Log in to post comments
