From the course: Creating a Responsive Web Design: Advanced Techniques

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Using image srcset and the pixel density descriptor

Using image srcset and the pixel density descriptor - CSS Tutorial

From the course: Creating a Responsive Web Design: Advanced Techniques

Using image srcset and the pixel density descriptor

- [Voiceover] For the two images that we're using in the how to section of this project, we used the image tag in HTML. This means that we can not switch the referenced graphic using CSS. So we'll need to use another responsive image technique here. Now in the image tag, we'll be adding another attribute called source set. The value of source set will be set to an image path and a resolution setting. And I'll be using the option of 1X and 2X to specify the device resolution. Now it's worth noting that this technique is not supported in any version of Internet Explorer. It is supported in Microsoft's new Edge browser which is included with Windows 8 and 10. But if you do need to support a high definition device that is running Internet Explorer, you can specify the high definition graphic in the source attribute in the image tag. But given that most mobile devices running Windows will be using the newest Edge browser, this is a work around that you probably won't need to implement. So…

Contents