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

Alternative solutions for the <picture> tag

We have just seen that W3C is working hard to set a standard to tag the picture as soon as possible, which will enable you to provide visual contents that are more appropriate for the device you are using to view our site.

Because of the great necessity of this functionality, the community has created two JavaScript plugins leading to the expected result accepted by most used browsers. They are Foresight and Picturefill.

Foresight – selecting the right image to display depending on the screen size

Foresight provides web pages the ability to inform whether a user device is capable of viewing high-resolution images (such as retina display devices), before the image has been requested from the server.

Additionally, ...

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