HTML <source> media Attribute

The media attribute on a <source> tag specifies the media or device the link is optimized for. This attribute may include multiple media or device queries combined with logical conditions (and, or, not).

Example

#

A media attribute on 3 <source> elements.
Together they query the device and determine the best image to use.

Vincent Van Gogh
<picture>
  <source media="(max-width: 414px)" srcset="/img/html/vangogh-sm.jpg">
  <source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
  <source media="print" srcset="/img/html/vangogh-bw.jpg">
  <img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">
</picture>

Using media

The media attribute specifies the media or device type the linked page or resource is optimized for.

This attribute specifies that a page or resource is designed for certain mobile devices, print media, and others.

media accepts multiple media or device type values combined with logical conditions (and, or, not).


Syntax

<source media="media-query">

Operators

#

Operator Description
and Specifies an AND operator
, (comma) Specifies an OR operator
not Specifies a NOT operator

Devices

#

Device Description
all Suitable for all devices. This is the default.
aural Speech synthesizers
braille Braille feedback devices -- for the visually impaired
handheld Handheld devices with small screens and limited bandwidth
projection Projector devices
print Printed pages or in print-preview mode
screen Computer screens
tty Teletypes and similar devices using a fixed-pitch character grid
tv Television type devices with low resolution and limited scrolling

Values

#

Name Value Description
width pixels Width of targeted display.
Name can be prefixed with min- or max-.
height pixels Height of targeted display.
Name can be prefixed with min- or max-.
device-width pixels Width of the device or paper.
Name can be prefixed with min- or max-.
device-height pixels Height of the device or paper.
Name can be prefixed with min- or max-.
orientation landscape,
portrait
Orientation of the device or paper.
aspect-ratio width/height Ratio of width/height of the targeted display.
Name can be prefixed with min- or max-.
device-aspect-ratio width/height Ratio of width/height of the device or paper.
Name can be prefixed with min- or max-.
color integer Bits per color of targeted display.
Name can be prefixed with min- or max-.
color-index integer Number of colors the targeted display supports.
Name can be prefixed with min- or max-.
monochrome integer Bits per pixel in a monochrome frame buffer.
Name can be prefixed with min- or max-.
resolution dpi or dpcm Pixel density of the targeted display or paper.
Name can be prefixed with min- or max-.
scan progressive
interlace
Scanning method of a tv display.
grid 1 = grid
0 = otherwise
Whether output device is a grid or bitmap type.

Expression Examples

#

These are some examples of valid media value expressions:

  • media="all and (orientation: portrait)"
  • media="screen and (aspect-ratio: 16/10)"
  • media="screen , (device-height: 540px)"
  • media="screen , (aspect-ratio: 5/4)"
  • media="screen and not (min-color-index: 512)"
  • media="screen and (min-width: 1200px)"
  • media="screen and (max-height: 720px)"
  • media="handheld and (grid: 1)"
  • media="tv and (scan: interlace)"
  • media="print and (resolution: 400dpi)"
  • media="screen and (max-monochrome: 2)"
  • media="screen and not (device-width: 360px)"
  • media="screen , (color: 8)"

Browser support

Here is when media support started for each browser:

Chrome
38.0 Oct 2014
Firefox
38.0 May 2015
IE/Edge
13.0 Nov 2015
Opera
25.0 Oct 2014
Safari
9.1 Mar 2016

You may also like

 Back to <source>
Guides