Bonjour,

Google n'aime pas qu'une image .png ou autre soit redimensionnée côté navigateur, il paraît même que ce n'est pas bon pour le référencement.

Quand un dessin .svg est traité en background, la propriété background-size permet de la redimensionner de façon très efficace.

Savez-vous si Google tolère ?
Le sujet n'est pas traité dans ce tuto sur les images .svg.

Accessoirement j'ai trouvé sur le Web plusieurs services de redimensionnement .svg qui fonctionnent mal.
En connaissez-vous un bon ?
Modifié par boteha_2 (24 Mar 2022 - 19:35)
Bonjour,

La propriété CSS background-size est une propriété valide et tout à fait légitime. Utilisée sur tous les bons sites web aujourd'hui.

Avant de commencer à chercher des solutions alternatives il serait bon de vérifier la source de cette affirmation. Car - à moins qu'il s'agisse d'une mauvaise interprétation de votre part - cette affirmation, si elle existe, est plus que douteuse.
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)
Modérateur
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.
Bonjour _laurent,

Merci de ton suivi, ta réponse est claire.

J'admire la rapidité avec laquelle les navigateurs sont capables de redimensionner un dessin .svg selon les valeurs de background-size car les calculs sont très complexes.

Ils font cela beaucoup mieux que les utilitaires de redimensionnement que l'on trouve sur Internet.

Je me demande si les navigateurs sont aussi performants quand le .svg est traité comme une <img width="x" height="y" />.
Bonjour,

Un image créée sur Illustrator.

Pour avoir des zones opaques et d'autres transparentes (colorées par background-color au :hover), on n'y est pas arrivé avec Illustrator.

Il a fallu créer les zones opaques avec Photoshop, importer dans Illustrator puis exporter en .svg.

Problème, les zones opaques ne sont pas 100 % blanches, il y a un halo très léger mais visible.

Avez-vous une bonne procédure pour créer un SVG avec zones 100 % opaques blanches et d'autres transparentes ?

Merci d'avance pour vos lumières.
Bonjour,

1) Une image .svg peut être facilement redimensionnée dans le code html ou css.

2) Pour passer par Illustrator et avoir un arrière-plan Blanc en SVG je propose cette solution.
Faire un carré blanc.
Le mettre en arrière-plan.
Utiliser « l’outil concepteur de forme » de pointer les éléments que tu veux enlever pour créer un arrière-plan transparent en cliquant dessus et en maintenant la touche alt ou option enfoncée (un petit - doit s’afficher en bas de ton pointeur).