1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
|
<header><h1><source>: The Media or Image Source element</h1></header><div class="section-content"><p>The <code><source></code> <a href="../index">HTML</a> element specifies multiple media resources for the <a href="picture"><code><picture></code></a>, the <a href="audio"><code><audio></code></a> element, or the <a href="video"><code><video></code></a> element. It is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">image file formats</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">media file formats</a>.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/source.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>It must have a start tag, but must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A media element—<a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a>—and it must be placed before any <a href="../content_categories#flow_content">flow content</a> or <a href="track"><code><track></code></a> element. A <a href="picture"><code><picture></code></a> element, and it must be placed before the <a href="img"><code><img></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSourceElement"><code>HTMLSourceElement</code></a></td> </tr> </tbody> </table></div></figure>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">MIME media type of the image</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">other media type</a>, optionally with a <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter"><code>codecs</code> parameter</a>.</p> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>Required if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> and <a href="video"><code><video></code></a> element, but not allowed if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element.</p> <p>Address of the media resource.</p> </dd> <dt id="srcset"><a href="#srcset"><code>srcset</code></a></dt> <dd> <p>Required if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element, but not allowed if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element.</p> <p>A list of one or more strings, separated by commas, indicating a set of possible images represented by the source for the browser to use. Each string is composed of:</p> <ol> <li>One URL specifying an image.</li> <li>A width descriptor, which consists of a string containing a positive integer directly followed by <code>"w"</code>, such as <code>300w</code>. The default value, if missing, is the infinity.</li> <li>A pixel density descriptor, that is a positive floating number directly followed by <code>"x"</code>. The default value, if missing, is <code>1x</code>.</li> </ol> <p>Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. The two types of descriptors should not be mixed together and only one should be used consistently throughout the list. Among the list, the value of each descriptor must be unique. The browser chooses the most adequate image to display at a given point of time. If the <code>sizes</code> attribute is present, then a width descriptor must be specified for each string. If the browser does not support <code>srcset</code>, then <code>src</code> will be used for the default source.</p> </dd> <dt id="sizes"><a href="#sizes"><code>sizes</code></a></dt> <dd> <p>Allowed if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element, but not allowed if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element.</p> <p>A list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. Before laying the page out, the browser uses this information to determine which image is defined in <a href="#srcset"><code>srcset</code></a> to use. Please note that <code>sizes</code> will have its effect only if width dimension descriptors are provided with <code>srcset</code> instead of pixel ratio values (200w instead of 2x for example).</p> </dd> <dt id="media"><a href="#media"><code>media</code></a></dt> <dd> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">Media query</a> of the resource's intended media.</p> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>Allowed if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element, but not allowed if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element.</p> <p>The intrinsic height of the image, in pixels. Must be an integer without a unit.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>Allowed if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element, but not allowed if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element.</p> <p>The intrinsic width of the image in pixels. Must be an integer without a unit.</p> </dd> </dl> <p>If the <code>type</code> attribute isn't specified, the media's type is retrieved from the server and checked to see if the user agent can handle it; if it can't be rendered, the next <code><source></code> is checked. If the <code>type</code> attribute is specified, it's compared against the types the user agent can present, and if it's not recognized, the server doesn't even get queried; instead, the next <code><source></code> element is checked at once.</p> <p>When used in the context of a <code><picture></code> element, the browser will fall back to using the image specified by the <code><picture></code> element's <a href="img"><code><img></code></a> child if it is unable to find a suitable image to use after examining every provided <code><source></code>.</p>
</div>
<h2 id="usage_notes">Usage notes</h2>
<div class="section-content">
<p>The <code><source></code> element is a <strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a></strong>, which means that it not only has no content but also has no closing tag. That is, you <em>never</em> use "<code></source></code>" in your HTML.</p> <p>For information about image formats supported by web browsers and guidance on selecting appropriate formats to use, see our <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a> on the web. For details on the video and audio media types you can use, see the <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">Guide to media types formats used on the web</a>.</p>
</div>
<h2 id="examples">Examples</h2>
<h3 id="video_with_type_attribute_example">Video with type attribute example</h3>
<div class="section-content">
<p>This example demonstrates how to offer a video in WebM format for users whose browsers support WebM format, Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the <code>audio</code> or <code>video</code> element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an <code>error</code> event is raised and the default media controls (if enabled) will indicate an error. Be sure to reference our <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">guide to media types and formats on the web</a> for details on what media file formats you can use and how well they're supported by browsers.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="5HgJzmO/ATQufwctR1n74/oGvm60F5LN3zH9tHa9hjs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.ogg<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/ogg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.mov<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/quicktime<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
I'm sorry; your browser doesn't support HTML video.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span>
</pre>
</div>
</div>
<h3 id="video_with_media_attribute_example">Video with media attribute example</h3>
<div class="section-content">
<p>This example demonstrates how to offer an alternate source file for viewports at or above a certain width. When a user's browsing environment meets the specified <code>media</code> condition, the associated <code><source></code> element is chosen, and the contents of its <code>src</code> attribute are requested and rendered. If the <code>media</code> condition does not match, the user agent will move on to the next <code><source></code> in the source order. The second source option in the below code has no <code>media</code> condition, so will be selected for all other browsing contexts.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="oNc/X6GxAcHQeegr8jv739lOrUerZcpTkZ2Uu+nIu8g=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo-large.webm<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 800px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
I'm sorry; your browser doesn't support HTML video.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span>
</pre>
</div> <p>For more examples, the learning area article <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> is a great resource.</p>
</div>
<h3 id="picture_example">Picture example</h3>
<div class="section-content">
<p>In this example, two <code><source></code> elements are included within the <a href="picture"><code><picture></code></a>, providing versions of an image to use when the available space exceeds certain widths. If the available width is less than the smallest of these widths, the user agent will fall back to the image given by the <a href="img"><code><img></code></a> element.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="zM8C3BUibuoydUljMfnaVhaTCvG878n1ry9zY3SAGkU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-wide.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 800px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-medium.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-narrow.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDN Web Docs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span>
</pre>
</div> <p>With the <code><picture></code> element, you must always include an <code><img></code> with a fallback image, with an <code>alt</code> attribute to ensure accessibility (unless the image is an irrelevant background decorative image).</p>
</div>
<h3 id="picture_with_height_width_attributes_example">Picture with height & width attributes example</h3>
<div class="section-content">
<p> In this example, three <code><source></code> elements with <code>height</code> and <code>width</code> attributes are included in a <a href="picture"><code><picture></code></a> element. A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">media query</a> allows the browser to select an image to display with the <code>height</code> and <code>width</code> attributes based on the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Viewport">viewport</a> size. </p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="4ABBCazrHHu8u1BhZYxILQlaD6KVGPjtX+m+m/K9TZs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span>
<span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>landscape.png<span class="token punctuation">"</span></span>
<span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 1000px)<span class="token punctuation">"</span></span>
<span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span>
<span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span>
<span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>square.png<span class="token punctuation">"</span></span>
<span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 800px)<span class="token punctuation">"</span></span>
<span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span>
<span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span>
<span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>portrait.png<span class="token punctuation">"</span></span>
<span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 600px)<span class="token punctuation">"</span></span>
<span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>600<span class="token punctuation">"</span></span>
<span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fallback.png<span class="token punctuation">"</span></span>
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Image used when the browser does not support the sources<span class="token punctuation">"</span></span>
<span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span>
<span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span>
</pre>
</div>
</div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element">HTML Standard <br><small># the-source-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>source</code></th>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes"><details><summary>3.5</summary>Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see <a href="https://bugzil.la/449363">bug 449363</a> for details.</details></td>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">3.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes"><details><summary>4</summary>Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see <a href="https://bugzil.la/449363">bug 449363</a> for details.</details></td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>height</code></th>
<td class="bc-supports-yes">90</td>
<td class="bc-supports-yes">90</td>
<td class="bc-supports-yes">108</td>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">76</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">90</td>
<td class="bc-supports-yes">90</td>
<td class="bc-supports-yes">108</td>
<td class="bc-supports-yes">64</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">15.0</td>
</tr>
<tr>
<th><code>media</code></th>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">3.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>sizes</code></th>
<td class="bc-supports-yes">38<details><summary>34–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">38</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">25<details><summary>21–25</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">9.1</td>
<td class="bc-supports-yes">38<details><summary>37–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">38<details><summary>34–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">38</td>
<td class="bc-supports-yes">25<details><summary>21–25</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">9.3</td>
<td class="bc-supports-yes">3.0<details><summary>2.0–3.0</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
</tr>
<tr>
<th><code>src</code></th>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">3.5</td>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">3.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>srcset</code></th>
<td class="bc-supports-yes">38<details><summary>34–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">38</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">25<details><summary>21–25</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">9.1</td>
<td class="bc-supports-yes">38<details><summary>37–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">38<details><summary>34–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">38</td>
<td class="bc-supports-yes">25<details><summary>21–25</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
<td class="bc-supports-yes">9.3</td>
<td class="bc-supports-yes">3.0<details><summary>2.0–3.0</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details>
</td>
</tr>
<tr>
<th><code>type</code></th>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">3.5</td>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">3.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>width</code></th>
<td class="bc-supports-yes">90</td>
<td class="bc-supports-yes">90</td>
<td class="bc-supports-yes">108</td>
<td class="bc-supports-yes">9</td>
<td class="bc-supports-yes">76</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">90</td>
<td class="bc-supports-yes">90</td>
<td class="bc-supports-yes">108</td>
<td class="bc-supports-yes">64</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">15.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li> <li>
<a href="picture"><code><picture></code></a> element</li> <li>
<a href="audio"><code><audio></code></a> element</li> <li>
<a href="video"><code><video></code></a> element</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance">Web Performance</a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source</a>
</p>
</div>
|
