Page 88 - HTML5

img/hello-1200.jpg 3x">

srcset provides list of available images, with device-pixel ratio x descriptor.

• if device-pixel ratio is 1, use img/hello-300.jpg
• if device-pixel ratio is 2, use img/hello-600.jpg
• if device-pixel ratio is 3, use img/hello-1200.jpg

src is always mandatory image source. In case of using with srcset, src will serve fallback image in
case browser is not supporting srcset.

Responsive image using picture element

Code

<picture>
<source media="(min-width: 600px)" srcset="large_image.jpg">
<source media="(min-width: 450px)" srcset="small_image.jpg">
<img src="default_image.jpg" style="width:auto;">
</picture>

Usage

To display different images under different screen width, you must include all images using the
source tag in a picture tag as shown in the above example.

Result

• On screens with screen width >600px, it shows large_image.jpg
• On screens with screen width >450px, it shows small_image.jpg
• On screens with other screen width, it shows default_image.jpg

Read Images online: https://riptutorial.com/html/topic/587/images

https://riptutorial.com/ 72