Votre site Web comprend de nombreuses photos, notamment des photos de produits, de collections et d'icônes, tout comme d'autres sites, la plupart d'entre elles sont au format d'image PNG ou JPEG. Mais vous avez constaté que plus vous téléchargez d’images PNG ou JPEG, plus votre site Web se charge lentement. Si c'est votre cas, il est temps de penser à l'optimisation d'image pour certains types d'images comme les icônes au format SVG.
Par rapport aux fichiers PNG et JPEG, les fichiers SVG présentent l'avantage d'augmenter votre vitesse de chargement tout en conservant la haute résolution des images. Découvrons les meilleurs atouts des fichiers SVG et pourquoi vous devriez les utiliser pour augmenter les performances de votre site Web à travers cet article.
Sur cette page
- Qu'est-ce qu'un fichier SVG
- Pourquoi vous devez utiliser les fichiers SVG
- Utilisation de SVG dans le thème Be Yours
Qu'est-ce qu'un fichier SVG
Contrairement à d'autres fichiers d'image populaires tels que PNG ou JPEG, SVG (Scalable Vector Graphics) est un format d'image vectoriel et peut être évolutif plus petit ou plus grand sans perte de qualité. Pour comprendre les fichiers SVG, nous comparerons peut-être leurs caractéristiques avec le format PNG, largement utilisé.
| SVG | PNG | |
|---|---|---|
| Type de fichier | Basé sur le vecteur | Basé sur un raster (ou basé sur des pixels) |
| Taille du fichier | Beaucoup plus petit que PNG | Grand avec haute résolution |
| Comment ça fonctionne | Utiliser le langage de programmation XML pour communiquer avec le navigateur Web ou les applications afin d'afficher une image | Subissez le processus de filtrage, d'encodage et de compression sans perte pour afficher l'image compressée de manière aussi identique que l'image source. |
| Mieux utilisé pour | Conception de site Web, logo, icône | Photographies, retouche et logo |
Pourquoi vous devez utiliser les fichiers SVG
Le format SVG présente de nombreux avantages exceptionnels qui en font le meilleur choix pour la conception de sites Web et d’applications.
Évolutivité illimitée
Grâce à l'utilisation de vecteurs, les images SVG sont indépendantes de la résolution et évolutives dans n'importe quelle dimension sans être affectées par leur qualité. Sur la base de l'algorithme mathématique utilisé pour créer l'image, le navigateur Web la lira et l'affichera à l'écran. Juste un petit code et peut s'adapter à divers visualiseurs tels que les fenêtres d'affichage, les appareils, les conceptions réactives, etc., le format SVG permet à vos images d'apparaître plus facilement en rendu complet à l'écran sans perte de qualité.
Cette fonctionnalité rend le SVG supérieur aux types de fichiers raster tels que PNG ou JPEG. Comme pour les images raster, les informations sur l'image sont stockées dans une grille de pixels. Ainsi, lorsque nous agrandissons l’image, chaque pixel doit s’étendre au-delà de sa taille d’origine, ce qui entraîne une diminution de la qualité.
Personnalisation facile
Les fichiers SVG donnent beaucoup de contrôle aux concepteurs Web pour apporter des modifications telles que des formes vectorielles, des textes, des couleurs avec certains logiciels de conception populaires tels qu'Adobe Illustrator ou CorelDraw, etc. Le fichier image est édité en quelques minutes seulement.
Petite taille
Comme mentionné, un fichier SVG est beaucoup plus léger qu'une image raster et, plus encore, vous n'avez pas à faire de compromis entre la petite taille et la qualité de l'image. Plus les images sont petites, plus votre site Web se charge rapidement. Ainsi, les SVG peuvent améliorer globalement la vitesse de chargement de votre site Web.
Optimisé pour le référencement
Le format SVG étant défini en fonction du texte, le moteur de recherche peut lire, explorer et indexer les images plus rapidement et plus facilement. Ainsi, vous pouvez améliorer votre classement de page et votre optimisation pour les moteurs de recherche. Les SVG l'emportent sur les PNG ou les JPEG à cet égard, car les moteurs de recherche ne reconnaissent les images raster qu'en fonction de leurs métadonnées telles que le titre, les mots-clés ou la balise ALT.
Désormais, la plupart des fournisseurs de thèmes de sites Web souhaitent donner la priorité à des facteurs tels qu'un chargement rapide, des images haute résolution et un classement élevé dans les moteurs de recherche. Surtout, certains thèmes Shopify comme Be Yours désigneront certaines sections ou blocs où seuls les SVG sont acceptés. Il est donc recommandé de choisir les SVG plutôt que les PNG ou les JPEG dans ce cas.
Utilisation de SVG dans le thème Be Yours
Un fichier SVG peut être créé par vous-même avec certaines applications de conception graphique courantes comme Adobe Photoshop ou Adobe Illustrator, conformément aux instructions de cet article .
S'il est un peu compliqué de créer des SVG par vous-même, nous avons un fournisseur d'icônes SVG, Remixicon.com , pour vous faciliter la vie. Remixicon.com dispose d'une énorme bibliothèque d'icônes SVG pour vos choix et vous pouvez facilement obtenir n'importe quelle icône comme vous le souhaitez en seulement deux clics :
- Sur Remixicon.com, tapez un mot-clé pour rechercher l'icône souhaitée.
- Cliquez sur l'icône dans la liste et choisissez le bouton Copier SVG .
Accédez à la section/bloc de votre thème où vous souhaitez ajouter une icône SVG et collez le code de l'image SVG dans le champ contenant correspondant.
Par exemple, dans le thème Be Yours, vous avez la section Garantie qui permet d'ajouter du SVG personnalisé dans le champ Icône SVG personnalisée .
- Cliquez sur Enregistrer pour confirmer votre modification.
Merci pour votre temps de lecture. Nous espérons que cet article vous sera utile. Suivez-nous aujourd'hui sur Facebook , Twitter et le blog du site Web pour recevoir nos dernières mises à jour !
