HTML | <source> media Attribute

Last Updated : 13 Dec, 2021

The HTML source media attribute accepts any valid media query that would normally be defined in a CSS. This attribute can accept several values. Syntax:

<source media="media_query">

Possible Operators:

Value	Description
and	AND operator
not	NOT operator
,	OR operator

Devices:

Value	Description
all	Suitable for all devices
aural	Speech synthesizers
braille	Braille feedback devices
handheld	Handheld devices (small screen, limited bandwidth)
projection	Projectors
print	Print preview mode/printed pages
screen	Computer screens
tty	Teletypes and similar media using a fixed-pitch character grid
tv	Low resolution or limited scroll ability type devices like Television.

Values:

Value	Description
width	Targeted display area’s width.
height	Targeted display area’s height
device-width	Target display or paper’s width.
device-height	Target display or paper’s height.
orientation	Target display or paper’s orientation.
aspect-ratio	Width/height ratio of the targeted display area.
device-aspect-ratio	Device-width/device-height ratio of the target display/paper.
color	Bits per color of target display.
color-index	Number of colors the target display can handle.
monochrome	Bits per pixel in a monochrome frame buffer.
resolution	Pixel density (dpi or dpcm) of the target display/paper.
scan	Scanning method of a tv display.
grid	If the output device is grid or bitmap.

Note: Prefixes like "min-" and "max-" can be used. Example:

html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
</head>

<body>

    <picture>
        <source media="(min-width: 600px)"
                srcset="img1.png">
        <source media="(min-width: 400px)" 
                srcset="img2.png">
        <img src="img3.png" style="width:auto;">
    </picture>

</body>

</html>