Comment utiliser parfaitement les formats graphiques tels que JPG sur le web

JPEG

JPEG a été créé en 1992 par le Joint Photographic Experts Group et porte le nom de son créateur. JPEG est un format d'image raster avec perte, ce qui signifie que chaque fois qu'un JPEG est enregistré avec compression, certaines informations

sont perdues de manière irréversible.

JPEG profite des défauts de perception de l'œil humain - étant plus sensible à la luminosité qu'à la couleur - en utilisant un algorithme de compression qui élimine les informations que nous ne parvenons pas à obtenir, et constitue donc un "format avec perte". Le paramètre de compression déterminera la taille et la qualité du fichier final enregistré.

Utilisations du JPEG

Parce que le JPEG convient à la luminosité et à la compression des couleurs, il est utilisé dans les photos et autres images réalistes ou ombrées telles que les peintures et Rendu 3D) avec de bons résultats. C'est pourquoi il s'agit du format de stockage d'images le plus populaire depuis de nombreuses années.

Pour la même raison, JPEG ne convient pas aux images vectorielles, telles que les logos, les figures géométriques, les captures d'écran, etc.

Les photos, ainsi que les images complexes ou ombrées telles que les peintures, sont de bons exemples d'utilisation du JPEG.

JPEG compressé

En tant que format avec perte, le taux de compression d'un fichier JPEG est inversement proportionnel à la qualité de l'image finale. Lorsque vous enregistrez un JPEG dans un outil comme Photoshop, vous verrez un paramètre de qualité compris entre 0 et 100. Photoshop définit certaines plages de qualité d'image :

Faible — 10 %

Moyenne — 30 %

Élevée — 60 %

Très élevée — 80 %

Meilleur — 100 %

Meilleur 100 % (61 Ko), Très élevé 80 % (29 Ko). 🎜>

Élevé 60 % (16 Ko), Moyen 80 % (7 Ko).

Faible 100 % (6 Ko), Minimum 0% (3 Ko).

Il est recommandé d'utiliser JPEG entre 50% et 60% de qualité sur la page Web, car il combine une bonne qualité d'image avec un petit fichier. taille. La suppression des métadonnées peut également réduire la taille du fichier JPEG.

Dans Photoshop, la compression peut être effectuée en sélectionnant « Métadonnées : Aucune » ou « Enregistrer pour le Web (héritage) » dans « Exporter ». Le flou de tout ou partie d’une image produira également des fichiers de plus petite taille.

Veuillez noter que puisque JPEG est un format avec perte, même enregistrer le même fichier avec une qualité de 100 % entraînera une réduction de la qualité de l'image après plusieurs fois car l'algorithme de compression est appliqué encore et encore sur la même image. . Mais ce changement peut ne pas

apparaître comme un changement dans la taille du fichier.

PNG

Portable Network Graphics est également un format d'image raster qui existe depuis 1995. Il est différent du JPEG en ce sens qu'il s'agit d'un format sans perte et qu'il s'agit actuellement du format

sans perte le plus courant sur le Web. Cela signifie que grâce à son algorithme de compression, aucune information n'est perdue lorsque le fichier est enregistré et compressé.

PNG possède de nombreuses fonctionnalités intéressantes telles que :

Canal de transparence - signifie que chaque pixel peut avoir une transparence différente ;

Les fichiers 8 bits peuvent utiliser un modèle de couleurs basé sur une palette (également appelé couleur indexée) - ce qui signifie que le fichier peut être plus petit si le nombre de couleurs est réduit ;

• La compression PNG est 25 % plus efficace que la compression GIF

• 2D entrelacée — l'image s'affiche progressivement pendant le chargement, plutôt que seulement lorsque l'image est complètement chargée. Vous devez utiliser cette option avec prudence car elle augmente la taille du fichier.

Utilisations du PNG

• Le PNG est idéal pour les dessins au trait, les LOGOs, les icônes et les images avec moins de couleurs. Les photos et images aux couleurs complexes généreront d’énormes fichiers au format PNG. Un autre avantage du PNG est qu’il prend en charge les arrière-plans transparents. Dans ce cas, même si

est une image complexe, vous devez quand même utiliser PNG, car la transparence de l'image ne peut pas être obtenue en JPEG.

Le PNG peut être bien utilisé dans les œuvres en ligne, les logos et les icônes.

Compresser PNG

Étant donné que l'algorithme de compression en PNG est sans perte, vous pouvez réduire sélectivement ses couleurs et ainsi réduire la taille de l'image grâce à des outils externes.

Pour la plupart des scénarios d'utilisation du PNG (dessins au trait, graphiques, icônes), 256 couleurs suffisent. Par conséquent, la taille du fichier peut être encore réduite en réduisant le nombre de couleurs dans la palette.

GIF

Graphics Interchange Format est également un format bitmap et est apparu plus tôt que les autres formats mentionnés dans cet article. Il a été créé par Steve Wilhite en 1989 et était le format d'image 8 bits le plus populaire jusqu'à la création du PNG. Le GIF a des caractéristiques similaires au PNG, mais présente quelques inconvénients :

ne prend en charge que 256 couleurs
Entrelacement unidimensionnel — l'image sera progressive ; affichage, mais pas assez fluide ;
Mauvaise compression par rapport au PNG
Transparence binaire - les pixels ne peuvent être qu'à 100 % transparents ou 100 % visibles ;
Prononciation ambiguë

SVG

Graphiques vectoriels évolutifs (Graphiques vectoriels évolutifs ) sont différents du format raster mentionné précédemment, comme son nom l'indique, il s'agit d'un format vectoriel. Cela signifie qu'il ne stocke pas de données basées sur des pixels, mais stocke des informations graphiques sous forme de coordonnées enregistrées. SVG utilise une structure de balises sémantiques basée sur XML, qui ressemble un peu à HTML. Grâce à la structure DOM, vous pouvez obtenir des éléments SVG par ID et les manipuler. Cela ouvre de nombreuses possibilités, comme modifier et animer des éléments ou créer des graphiques réactifs à l'aide de JavaScript et CSS

.

Comme les autres formats vectoriels, les images SVG peuvent être agrandies à n'importe quelle taille sans perdre aucun détail.

Utilisations de SVG

SVG est largement utilisé dans les dessins au trait, les logos, les icônes, les illustrations et la visualisation de données. Mais il ne convient pas aux images réalistes et aux images complexes comportant de nombreux détails. Dans certains cas, SVG et PNG remplissent très bien le même objectif

. Pour les dessins au trait, SVG produit généralement des fichiers de plus petite taille. Mais ce n’est pas inévitable. Selon le nombre de points d’ancrage de l’image vectorielle, elle peut même générer un fichier plus volumineux que PNG. Là où SVG excelle vraiment, c'est dans la visualisation de données. Étant donné que les animations vectorielles peuvent être manipulées et créées à l'aide de JavaScript, les bibliothèques comme D3 offrent des possibilités infinies

SVG compressé

Dans la plupart des cas, utilisez des outils tels que SVGz (GZipped SVG). ) ne sont pas nécessaires pour compresser les fichiers SVG à utiliser dans les pages Web. Vous pouvez (et devez) activer Gzip sur le serveur pour obtenir la compression, même si cela peut

avoir peu d'effet. Une meilleure approche consisterait à réduire la taille du fichier en supprimant les ancres, éléments et attributs inutiles des graphiques vectoriels SVG. Les points d'ancrage dessinent l'image vectorielle, vous devez donc vous assurer que les points d'ancrage supprimés n'affectent pas la forme finale de la forme vectorielle

. Si vous utilisez Adobe Illustrator pour modifier votre SVG, assurez-vous de l'enregistrer en utilisant Exporter >Exporter sous... plutôt que Fichier >Enregistrer sous... car cela produit un fichier réduit, ce qui présente bien sûr d'autres avantages

Pointez. Dans Sketch, veillez à ne pas utiliser de dossiers inutiles car ils seront également enregistrés en tant que balises supplémentaires dans le SVG.

Nettoyer les nœuds inutiles est un moyen de réduire la taille du SVG. La balise d'élément

correspond à tout ce qui est contenu dans le fichier SVG, y compris les balises d'ouverture et de fermeture. Les logiciels d'édition vectorielle tels qu'Adobe Illustrator et Sketch peuvent encombrer le SVG d'éléments et d'attributs inutiles. Les compresseurs SVG peuvent être utilisés pour

supprimer ces informations redondantes.

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!