HTML Tag






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->




HTML <picture> Tag



❮ Previous
Complete HTML Reference
Next ❯



Example


How to use the <picture> tag:



<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
 
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Try it Yourself »


Definition and Usage


The <picture> tag gives web developers more flexibility in specifying
image resources.


The most common use of the <picture> element will be for art direction in
responsive designs. Instead of having one image that is scaled up or down based
on the viewport width, multiple images can be designed to more nicely fill the
browser viewport.


The <picture> element holds two different tags: one or more
<source> tags and
one <img> tag.


The <source> element has the following attributes:



  • srcset (required) - defines the URL of the image to show

  • media - accepts any valid media query that would normally be defined in a
    CSS

  • sizes - defines a single width descriptor, a single media query with width
    descriptor, or a comma-delimited list of media queries with a width descriptor

  • type - defines the MIME type


The browser will use the attribute values to load the most appropriate image.
The browser will use the first <source> element with a matching hint and ignore
any following <source> tags.


The <img> element is required as the last child tag of the <picture>
declaration block. The <img> element is used to provide backward compatibility for browsers that do
not support the <picture> element, or if none of the <source> tags matched.


The <picture> element works similar to the <video> and <audio> elements. You
set up different sources, and the first source that fits the preferences is the
one being used.






<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Browser Support


The numbers in the table specify the first browser version that fully supports the element.



















Element
<picture> 38.0 13.0 38.0 9.1 25.0


Differences Between HTML 4.01 and HTML5


The <picture> tag is new in HTML5.



Global Attributes


The <picture> tag also supports the Global Attributes in HTML.



Event Attributes


The <picture> tag also supports the Event Attributes in HTML.



Related Pages


CSS Tutorial: CSS Responsive Design - Images





❮ Previous
Complete HTML Reference
Next ❯

-

Popular posts from this blog

Python Lists

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Python Lists ❮ Previous Next ❯ Python Collections (Arrays) There are four collection data types in the Python programming language: List is a collection which is ordered and changeable. Allows duplicate members. Tuple is a collection which is ordered and unchangeable. Allows duplicate members. Set is a collection which is unordered and unindexed. No duplicate members. Dictionary is a collection which is unordered, changeable and indexed. No duplicate members. When choosing a collection type, it is useful to understand the properties of that type. Choosing the right type for a particular data set could mean retention of meaning, and, it could mean an increase in efficiency or security. List A list is a collection which is ordered and changeable. In Python lists are written with square brackets. Example Create a List: thislist = ["apple", "banana", ...
Read more

Aion

Image
Aion - 6+ , 5417 Aion - . MMORPG, World of Warcraft, World of Tanks My Lineage II . CryEngine. , . : Aion https://ru.4game.com/aion/ Aion , . , , . , , . , , , . . , , , . . : . , . , , . , , . 12 , 2 : ( ). ( ). ( ). ( ) ( ). ( ). , . , : . . , . , , . . , , . Aion, , . , . , . : . . . . , : , , , , , . , , , . : Aion https://ru.4game.com/aion/install/ : . , . , . , Aion . , . . , . , . , , . . : . . . , ( !), MMORPG Aion . , . ...
Read more

JavaScript Array Iteration Methods

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> JavaScript Array Iteration Methods ❮ Previous Next ❯ Array iteration methods operate on every array item. Array.forEach() The forEach() method Calls a function once for each array element. Example var txt = ""; var numbers = [4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value, index, array) {     txt = txt + item + "<br>"; } Try it Yourself » Note that the function takes 3 arguments: The item value The item index The array itself Array.forEach() is not supported in Internet Explorer 8 or earlier: Method forEach() Yes 9.0 Yes Yes Yes Array.map() The map() method creates a new array by performing a function on each array element. This example multiplies each array value by 2: Example var numbers1 = [4, 9, 16, 25]; var numbers2 = numbers1.map(myFunction); function m...
Read more