Obrazy elastyczne i wskazówki dotyczące grafiki

Obrazy elastyczne są często implementowane za pomocą atrybutu srcset. Atrybut srcset to rozdzielona przecinkami lista nazw plików obrazów oraz ich deskryptorów width lub gęstości. Aby zapobiec przesunięciom układu, ustaw atrybuty width i height w tagach <img> i <source>, które korzystają z srcset.

W przypadku obrazów elastycznych, które używają deskryptorów gęstości:

• Wszystkie obrazy wymienione w atrybutach src i srcset powinny mieć ten sam współczynnik proporcji.
• Ustaw atrybuty width i height, tak aby pasowały do wymiarów obrazu 1x.
• Atrybut src powinien odnosić się do obrazu 1x.

W przypadku obrazów elastycznych, które używają deskryptorów szerokości:

• Wszystkie obrazy wymienione w formatach src i srcset powinny mieć ten sam współczynnik proporcji.
• Ustaw atrybuty width i height, tak aby pasowały do wymiarów obrazu zastępczego.
• W razie potrzeby dostosuj styl obrazu: w razie braku stylu CSS ustawienie wartości width i height na obrazie elastycznym, który korzysta z deskryptorów szerokości, spowoduje, że obraz będzie zawsze renderowany w tym samym rozmiarze nawet wtedy, gdy obrazy wymienione w srcset mają różne wymiary. Może to nie być zgodne z Twoimi oczekiwaniami. Dodanie width: 100%; height: auto; lub width: 100vw; height: auto; do stylu obrazu może uzyskać pożądany wygląd.

Tagi <picture>:

• Ustaw atrybuty width i height we wszystkich tagach <source>: odpowiednie wartości dla width i height zależą od tego, jak tag <source> wykorzystuje srcset. (Informacje na temat pracy z usługą srcset znajdziesz powyżej).
• Dostosowywanie stylu obrazu: jeśli chcesz zmienić styl obrazu, pamiętaj, że dodanie stylu do tagu <source> nie przyniesie żadnego efektu – tag <source> będzie pustym elementem. Zamiast tego musisz określić styl odpowiedniego tagu <img>.
• Ustaw atrybuty width i height w tagu <img>: te wartości powinny pasować do wewnętrznego rozmiaru obrazu zastępczego.

HTML

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