Ετικέτες για εικόνες

Η HTML5 έχει εισαγάγει μια σειρά από νέες ετικέτες και μερικές από αυτές αφορούν τις εικόνες.

Η ετικέτα picture

Η ετικέτα picture συντάσσεται και λειτουργεί όπως και οι ετικέτες audio και video.

<picture>
	<source srcset="image.png">
	<source srcset="image.jpg">
	<img src="image.jpg" alt="image test">
</picture>

Η ιδιότητα media

Μέσα από την ετικέτα picture μπορούμε να επιλέξουμε κανόνες media.

<picture>
	<source srcset="image_small.png" media="(max-width: 400px)">
	<source srcset="image.png">
	<img src="image.jpg" alt="image test">
</picture>

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="κείμενο για την ιδιότητα alt">
</picture>

Η ιδιότητα type

Με την ιδιότητα type δηλώνουμε τη μορφή εικόνας στον browser.

<picture>
	<source srcset="logo.svg" type="image/svg+xml">
	<img src="logo.png" alt="logo">
</picture>

Η ετικέτα figure

Συνοδεύεται από την ετικέτα figcaption η οποία προσδιορίζει τη λεζάντα της εικόνας.

<figure>
	<img src="./images/wall-paper-01.jpg" alt="wall paper" />
	<figcaption>wall paper for screen</figcaption>
</figure>
wall paper
wall paper for screen

Η ετικέτα img

Στην img έχουν προστεθεί δύο ιδιότητες για την εναλλακτική επιλογή εικόνας σε διαφορετικές διαστάσεις οθόνης.

<img 
	srcset = "./images/city320.jpg 320w, ./images/city480.jpg 480w, ./images/city800.jpg 800w"
	sizes =	"(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
	src="./images/city800.jpg" alt="favorite city" 
/>
favorite city