Images SVG: Idéal pour la conception Web
Les graphiques vectoriels évolutifs (SVG) sont un excellent choix pour les formats graphiques Web pour de nombreuses raisons, l'une des raisons importantes est sa taille de fichier relativement petite. Cependant, ce n'est pas absolu. Jetons un look plus profond.
(Cet article fait partie d'une série d'articles en collaboration avec Siteground. Merci pour votre soutien aux partenaires qui ont rendu le point de point possible.)
Avantages des Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s vectorielles
Les Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s radicales (telles que .jpeg, .png, etc.) sont composées de pixels carrés disposés dans la grille. Par conséquent, plus l'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? est grande, plus les pixels sont utilisés, ce qui entraîne une augmentation de la taille du fichier.
Non seulement cela, la mise à l'échelle des graphiques basée sur les pixels n'est pas bonne. qu'est-ce que cela signifie? Voici une fleur avec une largeur d'origine de 300 x 225 pixels.jpeg Image:
C'est ainsi que la même Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? s'affiche à des résolutions plus élevées:
Notez la diminution significative de ses bords flous, ses surfaces floues et sa qualité d'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? globale.
Étant donné que les écrans rétiniens sont courants sur les appareils utilisateur de nos jours, le risque que cela se produise avec les Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s raster sur votre site Web est élevée. Une alternative consiste à fournir des graphiques haute résolution, mais cela peut bien sûr affecter sérieusement les performances de la page Web.
srcset et <picture></picture> Éléments Heureusement, le HTML moderne résout ce problème avec des Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s réactives (c'est-à-dire des éléments srcset et <picture></picture>). Au moment de la rédaction du présent document, toutes les dernières versions du navigateur majeur prennent en charge ces deux éléments sauf IE11 et Opera Mini.
L'objectif des Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s réactives est de fournir la meilleure Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? de qualité pour l'appareil utilisé. Cela implique de fournir des Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s à diverses résolutions, mais permet au navigateur de charger uniquement des Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s adaptées pour accéder aux fonctionnalités de l'appareil.
Si vous voulez en savoir plus sur le fonctionnement de ces technologies, comment construire des Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s réactives avec SRCSET, par Saurabh Kirtani, plonge dans ce sujet en profondeur.
Ce qui suit est à quoi ressemble srcset dans la pratique:
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975437655791.jpg" class="lazy" alt="Is Using SVG Images Good for Your Website's Performance? " />
Ce qui suit est un exemple de l'élément <picture>:
<picture> <source media="(orientation: landscape)" srcset="retina-horizontal-Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?.jpg 2x, horizontal-Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?.jpg"> <source media="(orientation: portrait)" srcset="retina-vertical-Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?.jpg 2x, vertical-Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?.jpg"> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975437681258.jpg" class="lazy" alt="Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?"> </picture>
Comme vous pouvez le voir, bien qu'une seule copie de l'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? soit fournie en fonction du périphérique d'accès, les deux technologies vous obligent à préparer et à télécharger plusieurs copies de l'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? sur votre serveur. Cela n'affectera pas les performances de votre site Web, mais aura un impact négatif sur votre bande passante de temps et de serveur.
La mise à l'échelle est l'ADN des graphiques vectoriels, tandis que SVG est un format d'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? vectoriel basé sur XML. SVG se compose d'instructions de dessin géométrique (telles que des formes, des chemins, des lignes, etc.) qui sont indépendantes de la taille des pixels. Du point de vue de la taille du fichier, peu importe la taille de l'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? rendue, car ces instructions restent les mêmes.
Une autre signification de la résolution indépendante est que vous n'avez pas besoin de préparer différentes copies de la même Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? pour différents appareils;
c'est-à-dire que certains facteurs peuvent affecter négativement la taille du fichier SVG, comme la complexité de l'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?. Plus les instructions de dessin sont complexes, plus la taille du fichier est grande.
Suggestions pour les fichiers SVG efficaces
D'une manière générale, les SVG pour les pages Web sont très simples, comme les logos, les cartes, les icônes, etc. Ces Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s SVG simples peuvent avoir une taille de fichier plus petite par rapport à leurs homologues raster.
Cependant, vous pouvez prendre certaines étapes pour optimiser davantage la taille des fichiers et vous assurer que vos visiteurs ont une grande expérience sur votre site Web.
Voici quelques conseils:
Vous pouvez écrire vous-même des graphiques SVG simples ou utiliser des bibliothèques JavaScript comme snap.svg pour dessiner des graphiques vectoriels. Habituellement, pour faire le travail, il vous suffit de démarrer un éditeur graphique vectoriel, comme Adobe Illustrator.
Si vous utilisez un éditeur graphique, envisagez de simplifier le code SVG pendant la phase de conception peut réduire le risque de détruire le travail lorsque vous optimisez plus tard.
La première étape que vous pouvez franchir dans cette direction consiste à définir correctement la taille du canevas dans l'éditeur graphique de votre choix. Sarah Drasner recommande de le régler à 100 x 100 pixels, selon votre projet. Cela garantit que la toile n'est pas trop petite, ce qui entraîne un grand nombre de décimales que vous pouvez difficilement réduire en retard sans jouer avec les graphiques. D'un autre côté, cette taille n'est pas trop grande. En fait, une toile plus grande signifie qu'il existe un plus grand nombre de points de chemin correspondants.
Ensuite, la réduction du nombre de points de chemin est cruciale pour réduire la taille du fichier SVG. Cela signifie utiliser les formes au lieu des chemins autant que possible, mais aussi combiner plusieurs chemins vers moins de chemins à moins que vous ne prévoyiez de les animer séparément. Adobe Illustrator fournit un panneau "simplifié" pour réduire davantage les points de chemin. Ceci est un court tutoriel vidéo pour illustrer son utilisation.
utilisez pleinement la fonction d'exportation de l'éditeur graphique. Ne pas le faire peut entraîner un code SVG rempli de balises propriétaires et de ballonnements dont vous n'avez pas besoin.
Par exemple, si vous avez la dernière version d'Adobe Illustrator (CC 2017 au moment de la rédaction), utilisez l'option Exporter comme option pour exporter le dessin SVG et sélectionnez le type de fichier .svg:
Le panneau de l'illustrator fournit certains paramètres pour vous aider à réduire la taille du fichier et la sortie nettoyant les balises presque respectueuses du réseau. Vous pouvez même prévisualiser le code en cliquant sur le bouton Afficher le code dans le panneau.
Pour une procédure pas à pas détaillée de chaque option dans Illustrator, les différentes façons de Geoff Graham d'obtenir SVG d'Adobe Illustrator est un excellent article.
Après avoir exporté les graphiques SVG, vous pouvez toujours le réduire davantage avec les excellents outils d'optimisation SVG disponibles.
SVGOMG (et sa version correspondante sur l'interface graphique basée sur le Web) et l'éditeur SVG de Peter Collingridge sont les outils les plus populaires.
Découvrez "Optimiser les Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s SVG" de Guillaume Cedric Marty pour plus d'informations sur la façon d'utiliser SVGOMG.
La dernière étape de la liste de tâches d'optimisation SVG consiste à activer la compression GZIP sur le serveur. SVG est juste une balise XML, il peut donc être compressé facilement sans aucun problème.
Les avantages de la réduction des fichiers sont importants. L'annexe J de la spécification SVG 1.1 montre un tableau de comparaison entre des exemples de fichiers SVG non compressés et compressés. Les résultats favorisent massivement la compression, avec des tailles de fichiers réduites de 77 à 84%.
Conclusion
Les graphiques SVG sont un excellent choix pour les pages Web. Lorsqu'il est utilisé avec des icônes simples, des logos, etc., il fonctionne généralement mieux que ses homologues grinçant, surtout si vous prenez le petit nombre de précautions répertoriées dans cet article.
Les techniques que j'ai mentionnées ci-dessus ne sont en aucun cas exhaustives. Vous pouvez encore améliorer votre efficacité. Pour les techniques d'optimisation détaillées, les ressources suivantes sont à lire:
Quel est votre flux de travail d'optimisation SVG? Cliquez sur la zone de commentaire à partager!
FAQ (FAQ) sur SVG et les performances du site Web
Scalable Vector Graphics (SVG) offre de nombreux avantages pour les performances du site Web. Premièrement, SVG ne concerne pas la résolution, ce qui signifie qu'ils maintiennent leur qualité, quelle que soit la taille ou la résolution de l'écran. Ceci est particulièrement bénéfique pour la conception Web réactive. Deuxièmement, SVG a généralement une taille de fichier plus petite par rapport à d'autres formats d'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? tels que JPEG ou PNG, ce qui peut considérablement améliorer la vitesse de chargement des pages. Enfin, SVG peut être animé et manipulé avec CSS et JavaScript, offrant une plus grande flexibilité et interactivité sans requêtes HTTP supplémentaires.
SVG peut influencer positivement le référencement de plusieurs manières. Étant donné que le fichier SVG est petit, il peut améliorer la vitesse de chargement des pages, qui est un facteur de classement pour Google. De plus, contrairement à d'autres formats d'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?, SVG peut être indexé et rampé par les moteurs de recherche. Cela signifie que vous pouvez ajouter du texte alternatif et d'autres métadonnées à SVG, améliorant davantage vos efforts de référencement.
Oui, SVG est idéal pour les graphiques complexes tels que les logos, les icônes et les illustrations. Contrairement aux Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s raster, les SVG ne se déforment pas après avoir été agrandis ou réduits, ce qui les rend idéaux pour des conceptions complexes qui nécessitent un affichage dans différentes tailles. De plus, SVG peut être stylé et animation avec CSS et JavaScript, réalisant ainsi une conception plus complexe et interactive.
Bien que SVG offre de nombreux avantages, il existe également des inconvénients potentiels à considérer. Certains navigateurs plus anciens peuvent ne pas prendre en charge SVG, ce qui peut affecter la façon dont votre site Web s'affiche à certains utilisateurs. De plus, bien que les SVG sont parfaits pour les graphiques simples ou modérément complexes, ils peuvent ne pas être le meilleur choix pour des Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s très détaillées ou de type photo.
Il existe plusieurs façons d'optimiser le SVG pour de meilleures performances. Une façon consiste à réduire le code SVG, qui supprimera les caractères et les espaces inutiles, réduisant ainsi la taille du fichier. Vous pouvez également utiliser la compression GZIP pour réduire davantage la taille du fichier. Pensez également à utiliser CSS et JavaScript pour créer des animations SVG ou manipuler les SVG au lieu d'incorporer plusieurs fichiers SVG.
Oui, SVG peut considérablement améliorer les performances des sites Web mobiles. Étant donné que les SVG sont indépendants de la résolution, ils peuvent maintenir leur qualité sur n'importe quelle taille d'écran, ce qui les rend idéaux pour une conception Web réactive. De plus, leurs tailles de fichiers plus petites peuvent améliorer les vitesses de chargement des pages, ce qui est particulièrement important pour les utilisateurs mobiles qui peuvent avoir une connexion Internet plus lente.
SVG est généralement meilleur que les autres formats d'Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web? en termes de performances. Leur taille de fichier est petite, ce qui peut améliorer la vitesse de chargement des pages. Contrairement aux Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s raster qui peuvent devenir pixélisées lorsqu'elles sont zoomées, elles conservent leur qualité à n'importe quelle taille. Cependant, pour les Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s très détaillées ou de type photo, des formats tels que JPEG ou PNG peuvent être plus appropriés.
Oui, vous pouvez animer SVG à l'aide de CSS ou JavaScript. Cela permet des conceptions plus interactives et attrayantes sans avoir besoin de demandes HTTP supplémentaires. Cependant, n'oubliez pas que les animations complexes peuvent augmenter la taille du fichier et peuvent affecter les performances.
Oui, SVG peut être rendu accessible en ajoutant du texte alternatif et d'autres métadonnées. Cela permet aux lecteurs d'écran de décrire des Lutilisation dimages SVG est-elle bonne pour les performances de votre site Web?s aux utilisateurs ayant une déficience visuelle, améliorant ainsi l'accessibilité à votre site Web.
Il existe de nombreuses ressources disponibles en ligne pour apprendre SVG. Des sites Web tels que la documentation Web MDN, CSS-Tricks et divers bootcamps codants fournissent des tutoriels et des guides sur la création et l'utilisation de SVG. De plus, il existe de nombreux outils tels que Adobe Illustrator et Inkscape qui peuvent vous aider à créer des graphiques SVG.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
commandes communes postgresql
Que dois-je faire si je ne peux envoyer qu'un seul message privé sur TikTok ?
Base de données de restauration MySQL
Quels sont les systèmes de gestion communs ?
caisse d'armurerie
Que signifie le masque PS ?
Comment supprimer des éléments de tableau en JavaScript
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
