images en responsive, balises et rapidité de chargement

[feeline31]

Bonjour à tous,

Je me questionne depuis quelques temps sur la bonne technique à utiliser pour le redimensionnement des images pour le responsive et l'impact sur le référencement naturel.

J'ai, sur pas mal de site, que je dois optimiser, des bandeaux "pleine page" avec une image qui est automatiquement dupliquée en 3,4 ou 5 formats pour les différents écrans.

Ces images ont toutes la même balise qui se retrouve dupliquée X fois dans le code source de la page, est-ce problématique ? Cette technique peut-elle ressembler à de la suroptimisation pour Google ?

De plus, il est vrai que l'image chargée est plus adaptée au format de la page mais j'ai l'impression qu'au lieu de charger 1 grosse image, j'en charge 4 et que du coup pour tablette ou mobile, ma page est plus lourde que si j'avais laissé mon image initiale en grande taille. C'est peut-être un ressenti que j'ai par rapport à la façon dont ce site est développé et cela dépasse mes compétences. Je vous colle l'adresse pour avoir vos lumières https://www.ltp-geniecivil-gabions.fr/

Encore merci à tous pour vos lumières.

 

[WebRankInfo]

en effet ce n'est pas du tout la bonne méthode
je te conseille de lire https://web.dev/serve-responsive-images/ et https://web.dev/learn/design/responsive-images/
n'oublie pas aussi d'ajouter les dimensions (attributs height et width dans la balise img)

 

[nicodak]

Et pourquoi pas utiliser des formats d'images nouvelles générations comme webp vous gagnerez en temps de chargement. Votre score GG page speed est assez mauvais : PageSpeed Insights (web.dev) 37 en version mobile et même 46 en version desktop.

 

[Furtif]

Et pourquoi pas utiliser des formats d'images nouvelles générations comme webp vous gagnerez en temps de chargement.

Bah, le webp n'apporte pas grand chose de plus qu'un jpg bien optimisé, apres ce n'est pas tant le nombre d'images qui est important, mais la methode utilisée pour gerer l'affichage...

 

[nicodak]

Ok, je comprends.
Pourtant GG indique dans les résultats de son Page Speed score que les formats .jpg ne sont pas optimisés pour le web et qu'il est préférable d'utiliser du .webp par exemple.
Les économies de "poids" sont substantielles tout de même...

Après effectivement si on peut différer le chargement des images hors écran c'est bénéfique aussi.

 

[Furtif]

Google est bien gentil, mais quelquefois il pousse le bouchon un peu loin pour pas grand chose...
il te trouvera toujours un truc a ameliorer
Faire 2/3 mesures avec PSI a different moment de la journée, les resultats sont souvent variables, completer avec gtmetrix et ponderer tout ça...

Le webp je ne suis pas contre, mais utilisé a toutes les sauces comme produit miraculeux, bof bof...
Apres il n'y a pas de miracle, certains poussent les curseurs webp au max, mais bonjour la colorimetrie.

Oui pour remplacer le png car il gere la transparence et apporte un avantage niveau poids
il remplace aussi le gif animé
Apres pour le jpg, j'arrive au meme, voire meilleurs resultat dans certains cas

J'ai un site onepage, avec plus de 350 images dont 80% en 1500X1200px qui affiche un score de 83/85 sur mobile et 99 sur desktop...