Immagini webp

[romualdo94]

Immagini webp

Buongiorno, vorrei modificare le immagini attuali presenti nel sito con la versione webp ma ho un dubbio, per mantenere la massima compatibilità con tutti i browser ho letto di utilizzare il seguente codice html:

[HTML]
<picture>
<source srcset="img/esempio.webp" type="image/webp">
<source srcset="img/esempio.jpg" type="image/jpeg">
<img src="img/esempio.jpg" alt="Alt Text!">
</picture>
[/HTML]

in altri siti c'è indicato di utilizzare:

[HTML]
<picture>
<source srcset="img/esempio.webp" type="image/webp">
<img src="img/esempio.jpg" alt="Alt Text!">
</picture>
[/HTML]

Consigliate di aggiungere anche <source srcset="img/esempio.jpg" type="image/jpeg"> ?
E' necessario impiegare altri accorgimenti per l'utliizzo delle immagini webp?
Grazie!

[hub]

Ciao, ti consiglio di approfondire l'uso di srcset, parti da qui: w3schools.com/tags/att_source_srcset.asp
Ad esempio il primo codice che hai postato non ha molto senso perché la prima chiamata cerca l'immagine webp, la terza è una chiamata fallback, se il browser non visualizza la webp mostra la jpg, ma la seconda riga così come scritta non ha senso.

Per questo motivo in altri siti hai trovato il secondo codice che ha più senso.
Entrambi funzionano ma lo scopo principale di srcset è chiamare immagini diverse a seconda della risoluzione del monitor, quindi parliamo di responsive.

Approfondisci su questo link: developer.mozilla.org/it/docs/Learn/HTML/Multimedia_and_embedding/immagini_reattive

[romualdo94]

Ciao, in effetti ho aperto questa discussione proprio perchè non capisco il motivo di utilizzare: [HTML]<source srcset="img/esempio.jpg" type="image/jpeg">
<img src="img/esempio.jpg" alt="Alt Text!">[/HTML] ad esempio cercando su google: "using webp" i primi due risultati: css-tricks.com/using-webp-images/ e bitsofco.de/why-and-how-to-use-webp-images-today/ dicono di utilizzare quel codice. Io li ho indicati così magari tu riesci a capirne il motivo Grazie mille!