comment optimer au mieux mes images

[flexi2202]

Bonjour je cherche a optimiser au mieux mes images pour le chargement
que pensez vous de ce code

  <picture>
    <source type="image/svg+xml" srcset="https://phil.pecheperle.be/image-perles/3000-perle-verre-peche-3-mm-brune-cylindrique-petite.svg">
    <source type="image/webp" srcset="https://phil.pecheperle.be/image-perles/3000-perle-verre-peche-3-mm-brune-cylindrique-petite-800w.webp 800w, https://phil.pecheperle.be/image-perles/3000-perle-verre-peche-3-mm-brune-cylindrique-petite-480w.webp 480w, https://phil.pecheperle.be/image-perles/3000-perle-verre-peche-3-mm-brune-cylindrique-petite-320w.webp 320w">
    <source type="image/jpeg" srcset="https://phil.pecheperle.be/image-perles/3000-perle-verre-peche-3-mm-brune-cylindrique-petite-800w.jpg 800w, https://phil.pecheperle.be/image-perles/3000-perle-verre-peche-3-mm-brune-cylindrique-petite-480w.jpg 480w, https://phil.pecheperle.be/image-perles/3000-perle-verre-peche-3-mm-brune-cylindrique-petite-320w.jpg 320w">
    <img src="https://phil.pecheperle.be/image-perles/3000-perle-verre-peche-3-mm-brune-cylindrique-petite-800w.jpg"
         sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
         alt=""
         title="">
  </picture>
  <figcaption>Légende incluant des mots-clés</figcaption>
</figure>

 

[Madrileño]

Bonjour,

Le code du topic : "Exemple de code HTML pour les images, optimisé SEO", basé sur l'article de @WebRankInfo : "Comment référencer ses images en haut des résultats de Google", était mieux. Exemple : ALT qui est vide pour l'exemple actuel.

En complément : "Bonnes pratiques de SEO pour Google Images".

Cordialement.

 

[colonies]

Pour cet exemple précis, je trouve ce code ultra chargé pour rien si le svg est vraiment une image vectorielle et que les autres ne sont que des rendus bitmaps. Dans ce cas, seule la version svg est utile.

De manière générale, j’évite les picture/source pour les formats (codecs) d’image, je préfère configurer le serveur pour choisir le format que le navigateur supporte. Si on génère tous les tags html des images, ça va, mais s’ils sont tapés chacun à la main, c’est ultra pénible. Repasser une fois partout pour WebP, puis pour AVIF, et bientôt pour JPEG XL, et avoir 1ko de code HTML par image, c’est bon, ras le bol.

Pas de problème avec un alt vide puisque c’est dans un figure avec figurecaption, et ça évite du blabla qui pollue la lecture des aveugles et malvoyants (si ton site peut les intéresser).

 

[bg62]

... à se demander SI les réponses que l'on te donne, pour lesquelles on passe un ... certain temps ... , servent à quelque chose puisque tu renouvelles les mêmes demandes d'un forum à un autre ....

 

[flexi2202]

Merci beaucoup pour vos réponses. J'ai fini par suivre vos conseils et cela fonctionne.

Encore un grand merci et désolé pour la réponse tardive, mais j'ai des soucis avec les spams parfois