[Résolu] Background-size redimenssionne picto .svg, est-ce Google frie

Google apprécie que tu ais prévu différentes tailles d'images et notamment (surtout) quelque chose de très léger pour la version mobile. Il apprécie aussi que les balises <img> ai des height et width (même si ça ne correspond pas à ton image finale !). Mais dès que tu fais du responsive et demande par exemple une largeur 100%, il y aura forcément du redimensionnement.
Quant au svg c'est un format vectoriel, il ne peut pas avoir de taille intrinsèque.

Bonjour,

Merci de votre suivi.

Voilà un message de Dareboost à propos des images redimensionnées.

Dareboost a écrit :
2 images sont redimensionnées côté navigateur

Si vos images sont plus grandes que leur zone d'affichage, le navigateur téléchargera des données inutiles et procédera à des redimensionnements disgracieux.
Éviter le redimensionnement d'images côté navigateur

Lorsqu’il souhaite afficher une image dans votre page, le navigateur fait tout son possible pour l'adapter à sa surface de rendu. Si l'image est trop grande, il la réduit.

Fournissez directement vos images aux dimensions d'affichage utilisées sur votre site. Vous évitez ainsi l'envoi de données inutiles sur le réseau, ce qui diminue le temps de chargement de la page.

Comme les algorithmes embarqués dans les navigateurs ne sont pas aussi bons que ceux des outils dédiés à la manipulation d’images, vous obtiendrez un résultat visuel plus satisfaisant en redimensionnant vos images en amont, plutôt qu’en laissant le navigateur le faire.
Utiliser des Images Adaptatives (Responsive)

Plusieurs méthodes existent, permettant de servir des images adaptées au navigateur quelle que soit la résolution de l’écran ou la densité de pixels du matériel. Nous vous conseillons de lire les ressources suivantes :

"Images adaptatives", sur le Mozilla Developer Network (MDN)
Picturefill, permet d’utiliser l'élément <picture> dans des navigateurs qui ne le supportent pas encore (EN)
RICG, groupe de travail sur les images responsive (EN)

Sur cette page, 1 image est redimensionnée de moins de 40 % de sa taille. Plusieurs techniques de Responsive Web Design reposent sur le redimensionnement d'images dont les tailles sont proches de leurs surfaces de rendu respectives. Il est donc possible que des redimensionnements de ce type soit désirés, et nous ne les pénalisons pas. Cependant, nous vous invitons à vous assurer qu'il n'affecte pas les performances de la page :

Pour en savoir plus sur l’optimisation des images, vous pouvez lire cet article sur le sujet.

Par contre Dareboost ne produit pas d'alerte pour le redimensionnement d'un svg en background.
Modifié par boteha_2 (25 Mar 2022 - 19:25)

Salut,

Dareboost c'est pas Google. La on parle performance. Alors c'est sur que Google préfère un site qui est plus performant mais rien a voir avec "Google n'aime pas qu'une image .png ou autre soit redimensionnée côté navigateur". Je crois que Google s'en tape, mais ton site sera plus lourd, pour rien. L'extrait l'explique très bien.

Le svg n'a pas de taille à proprement parler. C'est un format vectoriel et le fichier fera la même taille sur 10px comme sur 100000000px, contrairement à une image avec une nombre de pixel défini qui a un taille proportionnelle à sa définition.

Pour le SVG traité via un tag img ça ne fait aucune différence, la source reste vectorielle. Pour les images et le picture tag voici un snippet de ma composition pour vous fournir un exemple : Picture tag, srcset and sizes attributes (CodePen).