/    Sign up×
Reference /Pin to ProfileBookmark

The source tag, or Media or Image Source element, designates multiple media resources for the <video>, <audio>, and <picture> tags.

Syntax

The browser renders the first <source> tag that matches the current viewport width. or else displays any message inside the <source> tag if the browser does not support its parent.

<picture>
  <source media="(min-width:1040px)" srcset="img_for_larger_screens.jpg">
  <source media="(min-width:768px)" srcset="img_for_tablets.jpg">
  <img src="img_fallback.jpg" alt="Fallback image">
  Your browser does not support the picture element.
</picture>

Attributes

media
Used to define a media query that would otherwise be declared in CSS.

sizes
Designates image sizes for various page layouts.

src
The URL address of the media file when used with <audio> and <video>.

srcset
Designates the URL of the image to use in different situations. Required when <source> is used inside <picture>.

type
Provides the resource’s MIME-type.

Browser Compatibilty

Demos

Have a code example of <source>? Submit a codepen.io demo and we'll showcase it here

to submit a demo.
HTML
×

Success!

Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...