Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Responsive Images Art Direction with the Picture Element The Picture Element

Is anyone using the <picture> element?

I love to hear some feedback on the pro and cons of using the <picture> element.

4 Answers

This is the first I've heard of it, but it looks like it's an HTML5 element, and experimental, meaning not much support. It says that it was introduced as a solution to making images responsive. I don't know how it works, but I would suggest sticking with <img> until <picture> gains more support. This is for production purposes, but if you are just playing around and doing something for yourself or whatever then you should definitely try out <picture> and see how it works and how to use it for when it does gain support

Thanks will do ;D

In most cases, on client projects we just utilize srcset for 1x and 2x (with picturefill.js shim). Using the picture element certainly adds more lines to the markup, and it can take time to generate all of the necessary assets from PS, so we only use this sparingly - if the site is design-heavy and/or is really dependent on the images to make it's impact.

The RICG (http://responsiveimages.org/) has some more information, and on their Twitter feed, there is talk of combining these techniques with cloud-based image assets from imgix or cloudinary

Steven Ventimiglia
Steven Ventimiglia
27,367 Points

It's now 2018, and I'm fairly certain no one uses this (for the most part.) It was a cool mini-course, but I see this as an approach that will be EoL before most adopt it. Unless I absolutely had to, I would never bring this into a personal project since it stinks of unnecessary bloat and has been handled by browser sniffing and back-end deliver methods for a while.

It's 2020 and it seems to be widely supported now: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture