Images have a huge impact on a website's performance, simply due to their file size and type. Thankfully, today, we have ways to deliver the best option to users. When we stop and think about how images are loaded, what image type is the best solution, and how optimized an image is, we can keep a site's literal cost down and stay within our performance budget.
There are multiple image types we can choose when we save out our images: JPEG, GIF, PNG-8, PNG-24, WebP, SVG and a few other less popular types we won't get into. How can we choose the best type with so many options?
Today, the picture element is being talked about quite a bit. Take a look at Sitepoint, A List Apart or just google HTML5 Picture Element, and you will access a bountiful amount of information. Still, after reading about the element, listening to speakers talk about the element and even implementing the element, a few questions and “how do Is” have come to light.
In short, the picture element can be used to deliver the correct image based on the viewport's attributes and can help with art direction. From here on, I am going to assume you have a basic knowledge of this element; if not, I suggest reading the articles linked in the above paragraph.
In this example, the image that will be delivered is determined by the viewport's width and pixel density. If the viewport is wider than 1280px, the image will be half of the viewport's width (50vw); if it is between 640px and 1279px, the image will be 60 percent of the viewport's width; and for 639px and below, the image will be as wide as the viewport (100vw is 100 percent viewport width).
The srcset attribute with the width descriptor will load the appropriate image based on the viewport's width and pixel density. If the viewport is 200px wide or 100px wide with a 2x pixel density, the xxx-200.jpg image will be used. The same applies to the other image sizes.
The source attribute can be used to deliver different types of images based on the browser's support. For example, you can serve an image in WebP format to browsers that support it, an SVG image to browsers that don't support WebP but do support SVG, a 1x or 2x pixel density PNG that doesn't support WebP or SVG, and, finally, a JPEG image fallback for all others.
Inspect the examples' images to see what your browser has chosen to serve to you. Resize the browser window width to see the images swap. You can figure this out by finding the image in the network tab of Chrome's web inspector.
The picture element is great for delivering the most optimal image to users. If used correctly, and responsibly, this will greatly impact your site's performance and improve conversion rates. Taking a few extra minutes to save out multiple types of images will not only help performance, but it can also help with the look and feel of your site. For example, you can swap JPEGs with text in them, so the text is larger and more readable on smaller devices.
Browser support is currently limited to Chrome, Firefox, Android and IE Edge, but, thankfully, the wonderful people at Filament Group have created a pollyfill for us: picturefill.js to the rescue!
Be sure to check out the guide to images by Google for best practices on implementing this element and delivering the best images for your site.