/    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.


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.

  <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.


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

Designates image sizes for various page layouts.

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

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

Provides the resource’s MIME-type.

Browser Compatibilty


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

to submit a demo.


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,