Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by rachaelhampton
rachaelhampton
3,352 Points

Is anyone using the <picture> element?

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

4 Answers

Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

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

rachaelhampton
rachaelhampton
3,352 Points

Thanks will do ;D

Manav Misra
Manav Misra
11,778 Points
Manav Misra
Manav Misra
11,778 Points

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,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 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.

tapio
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
tapio
Full Stack JavaScript Techdegree Graduate 25,832 Points
tapio
.a{fill-rule:evenodd;}techdegree seal-36
tapio
Full Stack JavaScript Techdegree Graduate 25,832 Points

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