HTML - Slike

Za prikazivanje slika na web stranici koristimo HTML <img> element. Slike su povezane sa stranicom više nego što su u njoj fizički smještene. <img> element ostavlja prostor za sliku na koju upućuje i ne zahtijeva zatvarajući tag.

Osnovni atributi <img> elementa su:

src (source) - putanja do slike ili URL.
alt (alternative text) - opis slike koji se prikazuje ako slika nije dostupna.

<img
  src="./path/to/img.png"
  alt="Alternativni tekst koji se prikazuje ako slika nije dostupna"
/>

Opcioni atributi img elementa koje možemo definisati uključuju:

width i height - određivanje širine i visine slike (u pikselima ili postocima).
title - dodatni opis slike koji se pojavljuje kao alatka kada korisnik pređe kursorom preko slike.
loading - omogućava kontrolu nad trenutkom učitavanja slike. Postavljanjem na “lazy” odlaže se učitavanje slike dok ne postane potrebno (na primer, dok se ne približi vidljivom dijelu stranice).

<img
  src="./path/to/image.png"
  alt="Alternativni tekst"
  width="700"
  height="500"
  title="Moja fotografija"
  loading="lazy"
/>

Map

Kada je potrebno definisati interaktivne oblasti na slici koje vode do različitih izvora, koristimo kombinaciju <map> i <area> elemenata. Interaktivno povezivanje se ostvaruje pomoću oznake map i njenog atributa name, koji upućuje na vrijednost atributa usemap unutar oznake img. Koordinate oblasti na koje se može kliknuti koje su povezane sa atributom href nalaze se u oznaci area.

<img src="URL" alt="Alternativni teskt" usemap="#mapName" />
<map name="mapName">
  <area shape="" cordsd="n, n, n, n" alt="description" href="url" />
  <area shape="" cordsd="n, n, n, n" alt="description" href="url" />
  <area shape="" cordsd="n, n, n, n" alt="description" href="url" />
</map>

Picture

Ponekad nam je potrebna fleksibilnost pri određivanju izvora elemenata slike, posebno kada želimo da se slike lijepo skaliraju na svakom tipu uređaja. Element <picture> omogućava skaliranje slike na osnovu širine uređaja, rezolucije i orijentacije. Ide u paru sa <source> oznakom koja pruža alternativne verzije slika za različite veličine. Takođe, dobro je uključiti <img/> tag kao rezervnu opciju u slučaju da neko koristi pretraživač iz II sv rata pa isti ne podržava element <picture>.

<picture>
  <source media="(min-width: 650px)" srcset="./path/to/imgOne.jpg" />
  <source media="(min-width: 550px)" srcset="./path/to/imgTwo.jpg" />
  <source media="(min-width: 450px)" srcset="./path/to/imgThree.jpg" />
  <img src="./path/to/fallBackImg.jpg" alt="alt vlaue" />
</picture>

Figure

Oznaka <figure> se koristi za grupisanje sadržaja koji se može odnositi na slike, video zapise, dijagrame, ilustracije i druge slične stavke. Pomoću oznake <figcaption> moguće je dodati natpis sadržaju koji se nalazi u ovom elementu.

<figure>
  <img src="path/to/img" alt="Img alt" />
  <figcaption>Opis slike</figcaption>
</figure>