Quel est le bon format d'image pour votre site Web?

Sélection et optimisation du format d'image: meilleures pratiques pour les images du site Web

Points clés

• sélectionner correctement le format d'image et optimiser l'image est crucial pour l'utilisation correcte des images du site Web. Une utilisation incorrecte peut entraîner des performances de site Web lents et une mauvaise expérience utilisateur.
• JPEG, GIF, PNG, SVG et WebP sont des formats d'image de site Web couramment utilisés. JPEG, GIF et PNG sont des formats à long terme, tandis que SVG et WebP sont relativement nouveaux, mais deviennent de plus en plus populaires en raison de leur aptitude aux sites Web réactifs et à chargement rapide.
• La sélection du format d'image dépend du type d'image, de la taille du fichier et de la compatibilité du navigateur. Par exemple, JPEG est idéal pour les photos en raison de sa qualité et de sa compression, tandis que la PNG est idéale pour les logos et les icônes en raison de son soutien à la transparence.
• WebP est un format d'image moderne développé par Google qui combine les avantages de JPEG et PNG sans produire de grandes tailles de fichiers, ce qui le rend idéal pour l'utilisation du réseau. Cependant, il n'est pas universellement pris en charge par tous les navigateurs.

Cet article fait partie d'une série d'articles créés en collaboration avec Siteground. Merci de soutenir les partenaires qui ont rendu le point de point possible.

En mars 2017, les images représentaient plus de 65% du contenu Web.

Ce n'est pas surprenant: les images ajoutent de la beauté, transmettent des informations, racontent des histoires et se connectent avec les visiteurs de votre site Web.

D'un autre côté, s'ils sont utilisés mal, les images sont souvent la principale raison de la vitesse du site Web lente et de la mauvaise expérience utilisateur.

L'utilisation correcte des images sur Internet implique principalement deux choses:

• Sélectionnez le format d'image correct
• Image optimisée

Dans cet article, je vais discuter du premier point. En particulier, je couvrirai les meilleurs formats d'image sur le Web et le type d'image pour lequel ils conviennent le plus.

Mais avant une discussion plus approfondie, clarifions brièvement certains termes.

Images radic / bitmap et vecteur

L'image radicale ou bitmap se compose d'une grille de pixels bidimensionnelle. Chaque pixel stocke les valeurs de couleur et de transparence.

L'effet de zoom de l'image raster n'est pas très bon: si vous zoomez, il perd la clarté et la qualité. Les types d'images raster couramment utilisés sur le réseau sont les formats JPEG ou JPG, GIF et PNG.

Voici deux images raster (JPG) d'Apple. Le premier est la taille naturelle de l'image. Le second montre les détails de la même version agrandie.

Exemple de taille naturelle des images raster.

Détails d'image raster qui sont beaucoup plus grands que la taille naturelle.

Notez que la version d'image agrandie a une détérioration de la qualité par rapport à la copie d'origine.

En revanche, les images vectorielles sont composées de lignes, de formes et de points de chemin. Les informations du vecteur ne sont pas stockées dans le pixel. Au lieu de cela, ils sont stockés dans des instructions de dessin mathématique qui ne sont pas complètement liées au pixel. Alex Walker l'a dit très bien lorsqu'elle a mentionné SVG (le format vectoriel le plus populaire sur le Web):

SVG n'est pas un format d'image - cela ressemble plus à une "recette" d'image.

Pourquoi JPEG est comme la tarte aux pommes de McDonald's (et SVG n'est pas)

Une signification qui n'est pas liée à la résolution est que vous pouvez mettre à volonté les images vectorielles: elles seront toujours claires et lumineuses, parfaites pour les écrans rétiniens.

Graphiques SVG à petite échelle.

Zoom dans les détails graphiques SVG.

Les deux images ci-dessus sont des vues du même graphique vectoriel, mais dans la deuxième image, la taille de rendu du vecteur est plus de deux fois plus grande que la première image. Cependant, il n'y a pas de perte de qualité.

perte et non destructive

"Lossy" et "sans perte" se réfèrent à des techniques de compression de fichiers appliquées aux médias numériques (c'est-à-dire des images, audio et vidéo).

Compression avec perte:

Les données numériques ne seront pas décompressées à 100% des données d'origine. Les méthodes avec perte peuvent fournir un niveau élevé de compression et produire des fichiers compressés plus petits, mais une certaine quantité de pixel, onde sonore ou cadre vidéo d'origine sera perdue pour toujours.

pcmag.com Encyclopedia

Cela signifie dans la pratique que plus vous compressez les fichiers avec perte, plus il sera petit. Cependant, à mesure que la taille du fichier diminue, vous pouvez également perdre irréversiblement la qualité de certains fichiers d'origine. La compression avec perte implique un compromis entre la taille du fichier et la qualité.

Un type d'image avec perte que vous voyez souvent sur le Web est jpeg.

En revanche, la compression sans perte ne provoque aucune perte de données entre la ressource compressée et la ressource d'origine. Cela signifie que la compression ne fait pas baisser la qualité des fichiers. Cependant, à cause de cela, les formats de fichiers sans perte sont généralement plus grands que ceux avec des formats de fichiers avec perte.

Les formats d'image sans perte que vous pouvez facilement trouver sur le Web sont GIF et PNG.

Cette information préliminaire est très utile lors de la décision du meilleur format d'image pour le contenu.

Les trois premiers types de fichiers image que je souhaite introduire ci-dessous, à savoir JPG, GIF et PNG, sont utilisés sur le site Web depuis longtemps. Les deux derniers, à savoir SVG et WebP, ne sont pas entièrement de nouveaux formats, mais ne sont pas encore devenus courant. Cependant, leur popularité a augmenté car ils sont bien adaptés à la demande de sites Web réactifs et à chargement rapide.

jpeg

JPEG ou JPG est un format d'image avec perte développé par le groupe d'experts d'image conjoint

Près de 3% de tous les types de contenu sur le site Web sont composés d'images JPG. C'est pourquoi ce format d'image est si populaire:

• Le format JPG peut afficher des millions de couleurs. Cela en fait un choix idéal pour afficher les travaux de photographie sur le Web
• En tant que type de fichier avec perte, vous pouvez utiliser la compression pour réduire considérablement la taille de son fichier. Les fichiers JPG offrent une variété de niveaux de compression: environ 60% sont suffisants pour les images réseau, et toute compression supérieure à 75% entraînera une dégradation de la qualité de l'image.
• Tous les appareils compatibles Internet prennent en charge le format d'image JPG, ce qui facilite l'utilisation sur le site Web.

Une chose évidente manquante dans les fichiers JPG est la prise en charge de la transparence. Donc, si vous prévoyez d'utiliser un arrière-plan transparent pour mélanger l'image avec la couleur d'arrière-plan ou la texture sur la page Web, une image JPG n'est pas un choix approprié. Il est préférable de choisir l'une des options que j'ai énumérées ci-dessous.

gif

GIF représente le format d'échange graphique. Il s'agit d'un format sans perte 8 bits qui prend en charge jusqu'à 256 couleurs. Cette limitation rend les fichiers GIF inappropriés pour afficher une gamme large et des images photographiques.

Voici quelques-uns des points clés qui jouent un rôle énorme dans l'utilisation à long terme des fichiers GIF sur votre site Web:

• Les tailles de fichiers sont généralement très petites étant donné la limitation de 256 couleurs
• Soutenir la transparence
• Prise en charge l'animation. Cela le rend adapté pour afficher des images d'animation en boucle telles que des icônes, des emojis, des bannières, etc.
• Ajuster pour des images simples avec des couleurs plates, mais pas pour les photos

png

PNG signifie Graphics réseau portable. Il s'agit d'un format alternatif pour les GIF développés par W3C. Comme GIF, il utilise un algorithme de compression sans perte et dispose d'un format 8 bits ou 24 bits. Les deux formats prennent en charge la transparence. Cependant, la transparence dans les images PNG 24 bits est obtenue à l'aide de canaux alpha ainsi que des canaux rouges, verts et bleus. Ainsi, alors que les images GIF et 8 bits PNG sont complètement opaques ou complètement transparentes, chaque pixel de l'image PNG fournit jusqu'à 256 niveaux d'opacité.

Vous pouvez utiliser le format PNG 24 bits pour

• Images réseau avec différents niveaux de transparence
• Images et graphiques complexes
• Graphiques que vous devez modifier et exporter fréquemment: leur format sans perte ne garantit aucune dégradation de la qualité.

Contrairement aux formats GIF, les types d'images PNG ne prennent pas en charge les animations et leurs tailles de fichiers peuvent être assez importantes.

svg

SVG signifie Scalable Vector Graphics, qui est un type de fichier vectoriel basé sur XML. Bien qu'il existe depuis 2001, il n'est devenu que récemment très populaire parmi les développeurs Web. La raison de cet amour tardif est que SVG a bénéficié du mauvais soutien du navigateur pendant des années. Heureusement, je suis heureux de dire qu'au moment de la rédaction du moment de la rédaction, SVG est soutenu dans tous les principaux navigateurs, malgré certaines incohérences et bugs.

Le format SVG a de nombreuses fonctionnalités et peut être recommandé comme un excellent choix pour les formats graphiques Web, en particulier lorsqu'ils sont utilisés pour des images simples telles que les logos, les cartes, les icônes, etc. Il est particulièrement approprié.

Avantages du format SVG

• Les SVG sont généralement plus petits dans la taille du fichier que leurs homologues raster, surtout si vous les optimisez pour votre réseau et les fournissez au format GZIP
• Ils sont évolutifs, ce qui signifie qu'ils semblent nets quelle que soit la résolution de l'écran
• Vous pouvez utiliser le code SVG dans les balises HTML et enregistrer les demandes HTTP
• Le code SVG lui-même peut être personnalisé à l'aide de CSS
• Vous pouvez animer les images SVG et leurs pièces à l'aide de CSS et JavaScript, ce qui est très cool.

Parce que la taille du fichier peut devenir assez grande, essayez d'éviter les images SVG trop complexes pour l'utilisation du réseau. Enfin, pour les images photographiques, SVG ne fonctionne pas et vous feriez mieux de vous en tenir au format JPG ou WebP.

webp

Bien qu'il existe depuis 2010, je ne dirais pas que WebP est toujours nouveau et pas aussi bien connu que JPG ou PNG. Cependant, ce format d'image contient le réseau dans l'ADN: il est conçu pour être utilisé sur le réseau, ce qui le rend très intéressant

WebP est un format d'image open source développé par Google. Voici ses principales fonctions:

WebP est un format d'image moderne qui fournit une excellente compression avec perte et sans perte pour les images sur le réseau. ... La taille des images webp sans perte est de 26% plus petite que celle de PNG. Les images webp pertes sont de 25 à 34% plus petites que les images JPEG comparables ... WebP sans perte prend en charge la transparence ... seuls 22% supplémentaires des octets sont nécessaires. Lossy WebP prend également en charge la transparence pour les situations où la compression RVB avec perte est acceptable, offrant généralement 3 fois plus de tailles de fichiers que PNG.

site Web webp

L'avantage de WebP est qu'il combine les avantages des formats JPG et PNG sans créer d'énormes tailles de fichiers.

À l'heure actuelle, la prise en charge du navigateur est très bonne: les navigateurs basés sur Blink l'ont pris en charge depuis le début, après tout, WebP est l'un des produits de Google. Pour la compatibilité arrière des navigateurs non pris en charge (c'est-à-dire IE / Edge, Firefox et Safari), certaines personnes intelligentes ont conçu des solutions de contournement appropriées.

Voici d'excellentes ressources à partir desquelles vous pouvez en savoir plus sur WebP et comment l'implémenter maintenant:

• webp faq
• Quel est le format d'image Webp (et pourquoi c'est important)?
• Comment choisir le format d'image parfait pour optimiser votre site Web
• Guide de l'utilisation d'images WebP: études de cas
• à l'aide d'images WebP

Conclusion

Dans cet article, je décris les formats d'image du réseau et je discute brièvement des types d'images auxquels ils conviennent plus.

JPG, GIF et PNG sont très populaires et sont utilisés depuis longtemps. SVG et WebP sont des alternatives plus récentes et passionnantes. SVG est idéal pour les illustrations et les images simples, et WebP est idéal pour tous les cas où JPG et PNG peuvent être utilisés.

Avez-vous utilisé SVG ou WebP dans votre travail de développement? À quels défis êtes-vous confrontés? Avez-vous connu des gains de performances significatifs?

Cliquez sur la zone de commentaire à partager!

FAQ sur les formats d'image du site Web (FAQ)

Quels sont les facteurs clés à considérer lors du choix d'un format d'image de site Web?

La sélection d'un format d'image pour votre site Web dépend de plusieurs facteurs. Tout d'abord, considérez le type d'image sur lequel vous travaillez. Par exemple, les photos sont mieux enregistrées au format JPEG pour la meilleure qualité et la meilleure compression, tandis que les logos et les icônes peuvent être utilisés au format PNG pour soutenir la transparence. Deuxièmement, considérez la taille du fichier. Les tailles de fichiers plus petites se chargent plus rapidement, ce qui améliore la vitesse et les performances de votre site Web. Enfin, considérez la compatibilité du navigateur. Alors que la plupart des navigateurs modernes prennent en charge les formats tels que JPEG, PNG et GIF, les formats plus récents tels que WebP ne sont pas pris en charge par tous les navigateurs.

Comment le format d'image affecte-t-il mon site Web de site Web?

Les formats d'image peuvent affecter considérablement le référencement de votre site Web. Les moteurs de recherche tels que Google hiérarchisent les sites qui se chargent plus rapidement, tandis que les tailles de fichiers image plus petites peuvent aider à y parvenir. De plus, Google préfère certains formats d'image tels que JPEG 2000, JPEG XR et WebP en raison de leurs propriétés de compression et de qualité supérieures. L'utilisation de ces formats peut améliorer le classement des moteurs de recherche de votre site Web.

Quelle est la différence entre la compression avec perte et la compression sans perte?

Lossy et Lossless sont deux types de compression de données utilisés dans les formats d'image. La compression avec perte réduit la taille du fichier en éliminant les bits de données "inutiles", mais cela peut conduire à une dégradation de la qualité de l'image. JPEG est un format avec perte commun. La compression sans perte, en revanche, réduit la taille du fichier sans sacrifier la qualité d'image, mais génère

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!