Duyarlı resimler ve sanat yönü

Duyarlı resimler genellikle srcset özelliği kullanılarak uygulanır. srcset özelliği, görüntü dosya adlarının ve bunların genişlik veya yoğunluk tanımlayıcılarının virgülle ayrılmış bir listesidir. Düzen kaymalarını önlemek için srcset kullanan <img> ve <source> etiketlerinde width ve height özelliklerini ayarlayın.

Yoğunluk tanımlayıcıları kullanan duyarlı resimler için:

• src ve srcset özelliklerinde listelenen tüm resimlerin en boy oranı aynı olmalıdır.
• width ve height özelliklerini, 1x resminin boyutlarıyla eşleşecek şekilde ayarlayın.
• src özelliği, 1x resmine atıfta bulunmalıdır.

Genişlik tanımlayıcıları kullanan duyarlı resimler için:

• src ve srcset için listelenen tüm resimlerin en boy oranı aynı olmalıdır.
• width ve height özelliklerini, yedek resmin boyutlarıyla eşleşecek şekilde ayarlayın.
• Resim stilini gerektiği gibi ayarlayın: CSS stili yoksa, genişlik tanımlayıcıları kullanan bir duyarlı resimde width ve height ayarlarının yapılması, srcset öğesinde listelenen resimler farklı boyutlarda olsa bile resmin her zaman aynı boyutta oluşturulmasına neden olur. Bu, istediğiniz bir davranış olmayabilir. Resim stilinize width: 100%; height: auto; veya width: 100vw; height: auto; ekleyerek istediğiniz görsel görünümü elde edebilirsiniz.

<picture> etiketleri için:

• Tüm <source> etiketleri için width ve height özelliklerini ayarlayın: width ve height için uygun değerler, <source> etiketinin srcset öğesini nasıl kullandığına bağlıdır. (srcset ile çalışmayla ilgili bilgiler için yukarıdaki bilgilere göz atın.)
• Resim stilini ayarlayın: Resim stilini ayarlamanız gerekiyorsa <source> etiketine stil eklemenin herhangi bir etkisinin olmayacağını unutmayın. <source> etiketi boş bir öğedir. Bunun yerine, ilgili <img> etiketinin stilini belirlemeniz gerekir.
• <img> etiketinde width ve height özelliklerini ayarlayın: Bu değerler, yedek resmin gerçek boyutuyla eşleşmelidir.

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>