HTML
Zdjęcia

Składnia

• <img src="" alt="">

Parametry

Tworzenie obrazu

Aby dodać obraz do strony, użyj znacznika obrazu.

Tagi graficzne ( img ) nie mają tagów zamykających. Dwa główne atrybuty, które img znacznikowi img to src , źródło obrazu i alt , który jest alternatywnym tekstem opisującym obraz.

<img src="images/hello.png" alt="Hello World">

Możesz także pobrać obrazy z internetowego adresu URL:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Uwaga: obrazy nie są technicznie wstawiane na stronie HTML, obrazy są połączone ze stronami HTML. Znacznik <img> tworzy miejsce do przechowywania obrazu odniesienia.

Możliwe jest również osadzanie obrazów bezpośrednio na stronie za pomocą base64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Wskazówka: Aby połączyć obraz z innym dokumentem, po prostu zagnieżdż <img> wewnątrz znaczników <a> .

Szerokość i wysokość obrazu

Uwaga: Atrybuty szerokości i wysokości nie są przestarzałe na obrazach i nigdy nie były. Ich użycie zostało jednak znacznie ostrzejsze.

Wymiary obrazu można określić za pomocą atrybutów width i height znacznika obrazu:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Określając width i height obrazu, twoja struktura daje przeglądarce podpowiedź, jak powinna wyglądać strona, nawet jeśli tylko określasz rzeczywisty rozmiar obrazu. Jeśli wymiary obrazu nie zostaną określone, przeglądarka będzie musiała ponownie obliczyć układ strony po załadowaniu obrazu, co może powodować, że strona „przeskakuje” podczas ładowania.

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

Wybór tekstu alternatywnego

Tekst alternatywny jest używany przez czytniki ekranu dla użytkowników niedowidzących oraz przez wyszukiwarki. Dlatego ważne jest, aby napisać dobry tekst alternatywny dla swoich zdjęć.

Tekst powinien wyglądać poprawnie, nawet jeśli zastąpisz obraz atrybutem alt. Na przykład:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

Bez zdjęć wyglądałoby to tak:

Avatar użytkownika anonimowego Anonimowy użytkownik napisał:

Lorem ipsum dolor sed.

Ikona edycji / ikona usuwania

Aby to poprawić:

• Usuń tekst alternatywny dla awatara. Ten obraz dodaje informacje dla widzących użytkowników (łatwo identyfikowalna ikona pokazująca, że użytkownik jest anonimowy), ale te informacje są już dostępne w tekście. ¹
• Usuń „ikonę” z tekstu alternatywnego ikon. Wiedza, że gdyby był, byłaby to ikona, nie pomaga w przekazaniu jej faktycznego celu.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

Anonimowy użytkownik napisał:

Lorem ipsum dolor sed.

Edytuj / Usuń

Przypisy

¹ Istnieje semantyczna różnica między włączeniem pustego atrybutu alt a całkowitym wyłączeniem go. Pusty atrybut alt wskazuje, że obraz nie jest kluczową częścią treści (jak w tym przypadku jest prawdą - jest to po prostu obraz addytywny, który nie jest konieczny do zrozumienia reszty) i dlatego może zostać pominięty przy renderowaniu. Jednak brak atrybutu alt wskazuje, że obraz jest kluczową częścią zawartości i po prostu nie ma dostępnego odpowiednika tekstowego do renderowania.

Responsywny obraz przy użyciu atrybutu srcset

Używanie srcset z rozmiarami

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes są podobne do zapytań o media, opisujące, ile miejsca zajmuje obraz w rzutni.

• jeśli rzutnia jest większa niż 1200px, obraz ma dokładnie 580px (na przykład nasza zawartość jest wyśrodkowana w pojemniku o maksymalnej szerokości 1200px. Zdjęcie zajmuje jej połowę minus marginesy).
• jeśli rzutnia ma wielkość między 640px a 1200px, obraz zajmuje 48% rzutni (na przykład obraz jest skalowany na naszej stronie i zajmuje połowę szerokości rzutni minus marginesy).
• jeśli rzutnia ma jakikolwiek inny rozmiar, w naszym przypadku mniej niż 640px, obraz zajmuje 98% rzutni (na przykład obraz jest skalowany na naszej stronie i zajmuje całą szerokość rzutni minus marginesy). Warunek nośnika należy pominąć dla ostatniego elementu.

srcset po prostu mówi przeglądarce, jakie obrazy mamy dostępne i jakie są ich rozmiary.

• img/hello-300.jpg ma szerokość 300 pikseli,
• img/hello-600.jpg ma szerokość img/hello-600.jpg ,
• img/hello-900.jpg ma szerokość 900 pikseli,
• img/hello-1200.jpg ma szerokość 1200 pikseli

src jest zawsze obowiązkowym źródłem obrazu. W przypadku korzystania z srcset , src wyświetli obraz zastępczy, jeśli przeglądarka nie obsługuje srcset .

Używanie srcset bez rozmiarów

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset zapewnia listę dostępnych obrazów, z proporcją piksel urządzenia x deskryptor.

• jeśli stosunek urządzenia do piksela wynosi 1, użyj img/hello-300.jpg
• jeśli stosunek urządzenia do piksela wynosi 2, użyj img/hello-600.jpg
• jeśli stosunek urządzenia do piksela wynosi 3, użyj img/hello-1200.jpg

src jest zawsze obowiązkowym źródłem obrazu. W przypadku korzystania z srcset , src wyświetli obraz zastępczy, jeśli przeglądarka nie obsługuje srcset .

Responsywny obraz za pomocą elementu obrazu

Kod

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

Stosowanie

Aby wyświetlić różne obrazy przy różnej szerokości ekranu, musisz dołączyć wszystkie obrazy przy użyciu znacznika źródłowego do znacznika obrazu, jak pokazano w powyższym przykładzie.

Wynik

• Na ekranach o szerokości ekranu> 600 pikseli wyświetla duży_obraz.jpg
• Na ekranach o szerokości ekranu> 450px pokazuje small_image.jpg
• Na ekranach o innej szerokości ekranu pokazuje default_image.jpg