One of the coolest, yet under-used, features inside of our responsive apps like Site Designer, Foundation Framer, and the brilliant Bootstrap Builder is the powerful < Picture > element.

This element isn’t just for displaying a photo on a page. It unlocks the ability to deliver better fitting versions based on screen size. Today, the web is devoured from mobile devices in increasingly high numbers. By using the Picture element, you can rescue these viewers from downloading heavy, slow-loading image files. And we’ll teach you how it works...

On a fast connection, a large image payload isn’t a big deal. But on mobile devices or slower networks, displaying big images intended for giant monitors will certainly hinder website performance. Here’s where the HTML picture element comes to the rescue.

It is pretty simple to use too! Just swap out an image at a breakpoint for a more light-weight version. Then when someone visits the page, only the specified image will be downloaded, creating a fast and frustration-free experience for big and small screens alike.