KandZ – Tuts

We like to help…!

HTML 10 – picture, source element and favicon

Show the correct picture

picture & source

<picture>
  <source srcset="cat-small.jpg" media="(max-width: 768px)">
  <source srcset="cat-medium.jpg" media="(min-width: 769px) and (max-width: 1024px)">
  <source srcset="cat-large.jpg" media="(min-width: 1025px)">
  <img src="catt.jpg" alt="A picture with a cat">
</picture>
  • picture element allows you to provide multiple versions of an images (different sizes and resolutions)
  • It can automatically select the most appropriate version based on device screen or user preferences
  • It can also be used to support different image formats
  • the img element specifies the default version of the image
  • source elements specify alternative image version(s)
  • srcset attribute specifies the URL of image
  • media attribute specifies the media query, in other words which image is correct to show
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  • favicon is a small icon that represents a website
  • It appears in the browser tab and bookmarks bar
  • It help uses to identify quickly which website is in each tab
  • link elements specifies the relationship between the HTML document and external resource
  • rel attribute specifies that the linked file is favicon
  • href attribute specifies the favicon’s URL
  • Modern browsers support ico, png, gif, jpeg and svg formats

Leave a Reply