HTML Picture Tag

HTML Img tag yetersiz kalıyor. Açıklaması şöyle

However, with the development of devices of various screen sizes, resolutions, and complex user requirements, questions have begun to raise about its responsiveness and ability to be used in multi-device applications.

Yani iki temel sebep var. 

1. Resolution Switching

2. Art Direction : 

Bu iki sebepten herhangi birisi tek başına HTML Picture tag'i seçmek için yeterli değil. Sadece Resolution Switching gerekiyorsa, HTML Img tag te kullanılabilir.

Resolution Switching

HTML Img tag ile olan problem şöyle

Suppose you use a simple Img tag for high-res images. In that case, that same image is used in each device your application runs, and indeed it will result in performance issues in devices with lower screen resolutions like mobile devices.

Art Direction

Orientation yani Landscape veya Portrait demek

source/media Alanı

Örnek

Şöyle yaparız

<picture>
     
   <source media="(orientation: landscape)"
             
      srcset="land-small-car-image.jpg 200w,
              land-medium-car-image.jpg 600w,
              land-large-car-image.jpg 1000w"
             
      sizes="(min-width: 700px) 500px,
             (min-width: 600px) 400px,
             100vw">
     
   <source media="(orientation: portrait)"
             
      srcset="port-small-car-image.jpg 700w,
              port-medium-car-image.jpg 1200w,
              port-large-car-image.jpg 1600w"
             
      sizes="(min-width: 768px) 700px,
             (min-width: 1024px) 600px,
             500px">
     
   <img src="land-medium-car-image.jpg" alt="Car">
</picture>

Açıklaması şöyle

If the screen orientation is landscape browser will show the images from the first image set, and if the orientation is portrait browser will use the second set. 

En alttaki img için açıklaması şöyle

The last img tag is there for backward compatibility for browsers that do not support picture tags.

Örnek

Şöyle yaparız

<picture>
     <source media="(max-width: 767px)" ....>
     <source media="(min-width: 768px)" ....>
</picture>

source/srcset Alanı

Örnek

Şöyle yaparız

<picture>
   <source
      srcset="small-car-image.jpg 400w,
              medium-car-image.jpg 800w,
              large-car-image.jpg 1200w"
      sizes="(min-width: 1280px) 1200px,
             (min-width: 768px) 400px,
             100vw">
   <img src="medium-car-image.jpg" alt="Car">
</picture>

Örnek - type

Şöylee yaparız

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="test image">
</picture>

Açıklaması şöyle

The above example includes three image types from avif, webp, and png formats. First, the browser will try avif format, and if that fails, it will try webp format. If the browser does not support both of these, it will use png image.