Obrazki

Do obrazków używa się znacznika <img>. Czasami obrazek załącza się do bloku figure. W takim przypadku możliwe jest dodanie podpisu do obrazka w figcaption. Przykładowo:


<figure>
  <img src="pics/monkej.jpg" alt="Szympans" />
  <figcaption>Rząd: naczelne, Podrząd: Haplorrhini</figcaption>
</figure>

Ćwiczenie 1.4:

Dodaj do dokumentu swoje zdjęcie z podpisem. Jeżeli nie masz pod ręką zdjęcia, zastąp je tymczasowo przez inny obrazek. Dodaj do elementu zdjęcia atrybuty alt, width, height, title. Jaki jest sens tych atrybutów?


Format WebP

Firma Google wprowadziła nowy format WebP zoptymalizowany dla statycznych obrazków. Mimo że jest wspierany przez większość przeglądarek, format ten nie jest standardowym. Jeżeli korzystasz z tego formatu, zalecane jest wykorzystanie znacznika picture, aby przedstawić wybór z kilka formatów. Jak w poniższym przykładzie:


<picture>
   <source srcset="pics/monkej.webp" type="image/webp" />
   <source srcset="pics/monkej.jpg" type="image/jpeg" /> 
   <img src="pics/monkej.jpg" alt="Szympans">
</picture>