Obrazy elastyczne i wskazówki dotyczące grafiki

Obrazy elastyczne są często implementowane z użyciem atrybutu srcset. Atrybut srcset to rozdzielona przecinkami lista nazw plików obrazów i ich deskryptorów width lub gęstości.

Aby zapobiec przesunięciu układu, ustaw atrybuty width i height w tagach <img> i <source>, które używają srcset.

Deskryptory gęstości

Aby utworzyć obrazy elastyczne, które używają deskryptorów gęstości:

  • Wszystkie obrazy wymienione w 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 się odwoływać do obrazu 1x.

Deskryptory szerokości

Aby utworzyć obrazy elastyczne, które używają deskryptorów szerokości:

  • Wszystkie obrazy w usługach src i srcset powinny mieć ten sam format obrazu.
  • Atrybuty width i height powinny pasować do wymiarów obrazu zastępczego.
  • Dostosuj styl obrazu do swoich potrzeb. Jeśli ustawisz atrybuty width i height dla obrazu elastycznego z deskryptorami szerokości, bez CSS, obraz zawsze będzie renderowany w określonym rozmiarze. Dzieje się tak nawet wtedy, gdy obrazy wymienione w polu srcset mają różne wymiary. Takie działanie może nie być oczekiwane. Dodaj width: 100%; height: auto; lub width: 100vw; height: auto; do stylu obrazu, aby uzyskać odpowiedni wygląd.

Elementy obrazu

Aby utworzyć elastyczne elementy <picture>:

  • Ustaw atrybuty width i height dla wszystkich tagów <source>. Odpowiednie wartości tego atrybutu zależą od tego, jak tag <source> używa srcset.
  • Dostosuj obraz, określając styl odpowiedniego tagu <img>. Tag <source> jest pustym elementem, więc styl nie ma na niego wpływu.
  • Ustaw atrybuty width i height w tagu <img>. Wartości te powinny pasować do wewnętrznego rozmiaru obrazu zastępczego.

Przykłady

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>