O'Reilly logo

Responsive Web Design with jQuery by Gilberto Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

How the picture tag works

The W3C, facing this need of providing the correct image to the user, is working hard to finish studying them. There is an unofficial draft of this initiative, which includes the <picture> tag and different sources inside it, in its standards, in order to make adaptation of the image easier.

Note

Without this standard, browser developers cannot prepare their browsers to render it well. Today, the frontend community is using CSS and JavaScript trying to do this same task.

This is the definition of the <picture> tag by W3C:

"This specification provides developers with a means to declare multiple sources for an image, and, through CSS Media Queries, it gives developers control as to when those images are to be presented to a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required