Quel est le format d'image de la plus haute qualité. Quel format choisir pour les images - JPEG, PNG ou GIF
De l'auteur: Pour mars 2017, les images dépassent plus de 65% du contenu Web. Et ce n'est pas surprenant: les images donnent la beauté, passent des messages, racontent des histoires et établissent un contact avec les visiteurs sur votre site. arrière Question - Si l'image est mal utilisée, c'est souvent la principale raison du site de ralentissement et une mauvaise expérience utilisateur.
Une utilisation correcte des images sur Internet implique deux choses:
sélectionnez le format d'image correct;
optimisation de l'image.
Dans cet article, je vais révéler le premier élément, en particulier, je vous dirai des formats d'image plus appropriés pour le Web, ainsi que sur les images que vous devez utiliser ces formats.
Mais avant de courir brièvement sur la terminologie.
Images raster ou vectorielles
Basé sur images raster Il y a une grille de pixels bidimensionnelle. Chaque pixel stocke la couleur et la valeur de la transparence.
Les images raster sont mal échelonnées: si vous augmentez l'image raster, elle perdra la clarté et la qualité. Populaire formats de raster Images pour web - JPEG, JPG, GIF et PNG.
Vous trouverez ci-dessous deux images raster (JPG) avec une pomme. La première image est authentique. La seconde montre la partie agrandie de la première image.
Un exemple d'image bitmap en nature.
Une partie accrue du bitmap.
Faites attention à la perte de qualité dans une version agrandie de l'image.
Contrairement à des images raster graphiques vectoriels Se compose de lignes, de chiffres, de points de route. Les informations sur les images vectorielles ne sont pas stockées en pixels, elles sont stockées dans des instructions mathématiques pour le dessin, qui ne sont pas associées à des pixels. Alex Walker a très clairement expliqué la différence dans l'exemple de SVG - le format le plus populaire des images vectorielles sur le réseau:
"SVG n'est pas un format d'image, c'est une recette d'image plus grande." - Pourquoi les images JPEG sont comme une tarte aux pommes de McDonalds (pas de SVG)
L'une des conséquences de l'indépendance à partir de la résolution de l'écran - Les images vectorielles peuvent être éduquées sous la taille du contenu. Les images seront claires, idéales pour les écrans de rétine.
Graphiques SVG à petite échelle.
Partie de l'image SVG agrandie.
Les deux images d'en haut sont un exemple d'une seule image vectorielle, cependant, la deuxième image est augmentée de plus de deux fois par rapport au premier. Il n'y a pas de perte de qualité.
Avec perte de qualité ou sans perte (perte et sans perte)
Le terme perte et sans perte fait référence aux techniques de compression des fichiers multimédias, c'est-à-dire Images, audio et vidéo.
Compression à perte: "Ne rétablit pas les données numériques jusqu'à 100% de l'original. Les méthodes de perte de qualité sont caractérisées par un degré élevé de compression, ce qui réduit le poids fichiers compressés. Cependant, certains des pixels d'origine, des ondes sonores et des cadres vidéo sont supprimés pour toujours. " - Encyclopédie PCMAG.com
Qu'est-ce que cela signifie dans la pratique: plus vous serrez le fichier avec une perte de qualité, moins ce sera. Obtenir un poids de fichier plus petit, vous perdez de manière irréversible. Avec la compression avec perte, vous devez équilibrer entre le petit poids du fichier et la qualité.
Vous êtes très souvent trouvé au format image avec perte de qualité, c'est JPEG.
Contrairement aux images avec une perte de qualité sans perte, elle enregistre toutes les données comme dans l'original. Cette compression ne conduit pas à une chute de la qualité des fichiers. Pour cette raison, les formats de fichiers sans perte ont souvent plus de poids par rapport à la perte.
Dans le réseau, vous pouvez facilement trouver des formats d'image sans perte, c'est GIF et PNG.
Les informations fournies sont utiles lors du choix mieux formater Images pour votre contenu.
Les trois premiers formats d'image que je décrirai ci-dessous (JPG, GIF et PNG), ils ont déjà été utilisés sur des sites pendant une longue période. Les deux derniers formats, SVG et WebP, pas tout à fait nouveaux, ils ne sont pas encore populaires. Néanmoins, ils ne peuvent pas être mieux adaptés aux exigences de l'adaptabilité et des sites rapidement chargés, et leur popularité a considérablement augmenté.
Jpeg.
JPEG ou JPG - Format de pertes conçu par un groupe d'experts photographiques conjoints. Les images JPG occupent près de 3% de tous les types de contenu sur les sites. Pourquoi ce format est si populaire:
le format JPG est capable d'afficher des millions de couleurs, ce qui en fait un candidat idéal pour afficher des photos sur Internet;
Tendances modernes et approches dans le développement Web
Apprenez l'algorithme de croissance professionnelle rapide à partir de zéro dans le bâtiment du site
comme il s'agit d'un format pertinent, vous pouvez utiliser une compression pour réduire considérablement la taille du fichier. Dans les fichiers JPG, il existe de nombreux niveaux de compression: environ 60% suffiront pour des images sur Internet, quelque chose de plus élevé que 75% altère la qualité de l'image;
tous les périphériques Internet prennent en charge le format JPG, qui simplifie l'utilisation du format sur Internet.
Un inconvénient notable de JPG - fichiers de ce format ne prend pas en charge la transparence. Si vous souhaitez utiliser un fond transparent pour superposer une image sur la couleur de fond ou la texture de la page, les images JPG ne correspondent pas. Choisissez l'une des options que je dirai ci-dessous.
Gif.
Format d'interchange GIF ou Graphics est un format sans perte 8 bits avec une quantité maximale de couleurs égale à 256. Restrictions de couleurs Faites l'option inappropriée GIF pour afficher des photos et des images avec une large gamme de couleurs.
Facteurs qui ont influencé une telle utilisation à long terme sur Internet:
en raison de la limite de 256 couleurs, la taille du fichier est plutôt faible;
soutient la transparence;
prend en charge l'animation, qui vous permet d'utiliser le format pour afficher des images en boucle, telles que des icônes, des émoticônes, des bannières, etc.
bien approprié pour images simples Avec des couleurs monophoniques, mais pas adapté aux photos.
Png.
Les graphiques de réseau PNG ou portables sont une alternative au GIF. Le format est développé par W3C. Comme GIF, le format utilise un algorithme de compression sans perte d'options de qualité, de 8 bits et de 24 bits. Les deux options soutiennent la transparence. Cependant, dans une image PNG 24 bits, la transparence fonctionne sur Alpha Channel, ainsi que des canaux rouges, verts et bleus. Par conséquent, malgré le fait que les images GIF et 8 bits PNG peuvent être complètement opaques ou totalement transparentes, dans PNG Chaque image de pixel offre 256 niveaux de transparence.
L'option PNG 24 bits peut être utilisée pour:
weig images avec différents niveaux transparence;
photos complexes et graphiques;
les graphiques que vous souhaitez modifier souvent Modifier et exporter: le format sans aboutit conservera la qualité.
contrairement à Format gif PNG ne supporte pas l'animation et le poids des fichiers peut être assez important.
Svg.
Graphiques vectoriels SVG ou évolutif (graphiques vectoriels évolutifs) est un type fichiers vectoriels Basé sur XML. Le format est apparu en 2001, mais il a reçu une popularité des développeurs Web récemment. La raison de cet amour tardif est un mauvais soutien pour SVG dans les navigateurs au fil des ans. Je voulais vous informer de joie qu'au moment de la rédaction de l'article SVG est pris en charge dans tous les grands navigateurs, mais pas sans distinction et insectes.
Le SVG a beaucoup de fonctions qui rendent ce format recommandé pour le Web, en particulier si SVG est utilisé pour des images simples telles que des logos, des cartes, des icônes, etc.
PLUS DE FORMAT SVG
SVG pèse souvent moins d'images raster, surtout après l'optimisation de la bande et de la compression via GZIP;
le format est évolutif, ce qui permet de clarifier une résolution de l'écran;
Le code SVG peut être placé dans HTML et économiser sur les requêtes HTTP;
Le code SVG peut être configuré via CSS;
Les images SVG peuvent être animées, y compris des pièces individuelles comme avec utiliser CSS.Et JS, qui est très cool.
Évitez les images SVG trop complexes, il augmente légèrement la taille du fichier. Enfin, SVG n'est pas applicable aux formats de photos, JPG et WebP sera mieux adapté ici.
Survêtement
Malgré le fait que le format est apparu en 2010, je ne me tromperai pas si je dis que la pigibilité est toujours très nouveau formatCe qui n'est pas si célèbre que JPG et PNG. Néanmoins, le Web a ce format dans le sang: il a été spécialement conçu pour Internet, ce qui le rend extrêmement intéressant.
WebP - Format d'image avec ouvert code sourcedéveloppé par Google. Principales caractéristiques: "Webp - format moderne Articles sur Internet, offrant une excellente compression avec des pertes et sans perte de qualité ... La version sans perte d'images WebP pèse 26% moins de png. Perte de version Web peser 25-34% moins comparable Jpeg images... La WebP sans perte prend en charge la transparence ... due à 22% d'octets supplémentaires. Dans les cas où la permission de la compression RGB est applicable, la pondérine WebP prend également en charge la transparence, fournissant une taille de fichier 3X par rapport à la PNG. " - site WebP
La peluche Web est qu'elle combine les avantages de JPG et de PNG sans augmenter la taille du fichier.
Sur le ce moment Le support au format est assez bon: les navigateurs de clignotements ont pris en charge le format de la libération elle-même, toutes les mêmes web - créer Google. Pour la compatibilité en arrière avec les navigateurs sans support, c'est-à-dire IE / Edge, Firefox et Safari, des artisans folkloriques ont trouvé des solutions de contournement.
Conclusion
Dans cet article, je vous ai parlé des formats d'images pour le Web et transmis brièvement les types d'images les mieux adaptés à Internet.
JPG, GIF et PNG sont des formats très populaires qui ont été utilisés depuis très longtemps. SVG et Webp Dernières alternatives intéressantes. SVG Super pour les illustrations et les images simples, WebP remplace toutes les applications JPG et PNG.
Avez-vous déjà utilisé SVG et WebP dans le développement? Quelles difficultés avez-vous? Avez-vous obtenu des gains de performance notable? Ecrivez dans les commentaires!
Attention, beaucoup de photos! Tous cliquables.
Png.
Raster format graphique PNG, gagnant une popularité croissante dans l'époque de Web 2.0, est apparue en 1995 en remplaçant l'ancien GIF (et, en partie, TIFF). À ce moment-là, les propriétaires du GIF breveté "a décidé de supprimer des quantités à quatre chiffres de tous les développeurs à l'aide du format et de la communauté libre, il n'y a plus rien à gauche sauf pour offrir une alternative gratuite.Alors, quels sont les avantages du format?
- Soutien complet à l'alpha-transparence - transparence. Vous permet de faire des sections avec transparent et translucide.
- Algorithme de compression de haute qualité sans perte de qualité. Lzw, mais un peu plus efficace.
- La possibilité d'un micrologiciel et contrairement à GIF) à la fois verticalement et horizontalement simultanément.
- Correction gamma intégrée. Vous permet de joindre à l'image de la configuration de son affichage, afin que différents moniteurs apparaissent de la même manière que l'auteur.
Depuis que PNG-24 utilise une palette de couleurs complète, le comparer avec GIF est assez difficile. PNG-8 avec sa palette d'index ici est plus similaire. Je vais donner des captures d'écran à la comparaison: 
La pratique (comme l'opinion des collègues) montre que de simples petites images GIF compressent mieux. Mais quand il s'agit de grandes images, GIF reste toujours derrière.
En outre, un autre avantage assez important: en fait, contrairement à la croyance populaire, PNG-8 peut également utiliser un canal alpha à part entièrecomme png-24. Juste Photoshop ne le supporte pas, Sergey Chikuenok de Lebedev's Studio recommande d'utiliser Adobe Fireworks que j'ai décidé de le faire (un peu de cela).
Et dans cette bataille, si nous n'avons pas besoin de transparence, PNG perd, pour ainsi dire sur le "segment du marché du marché". Bien que, si vous vous tenez à JPEG "dans un profil ICC, la différence dans le volume devient invisible. Mes mesures ont été apportées à - JPEG 100%. Et avec moins de qualité (sans particulièrement perceptible pour la différence des yeux), malheureusement, devient malheureusement encore plus triste.
En général, nous voir: 
UPD. En général, les résultats dépendent de manière significative de l'image elle-même: Png est meilleur Squeez les gradients et les sections monotones, mais pour les photos, la meilleure compression donne JPEG. Bien qu'ils disent (il est difficile de le croire), à \u200b\u200bde grandes photos de PNG puis dirige - il vient d'être vérifié dans le processus de conversion des captures d'écran à l'article (PNG contre JPEG-70% - Times gagnants dans une heure et demie ).
La vie après photoshop "ou presser
Dans de nombreuses situations, le PNG reste généralement indispensable, car la transparence n'est normalement pas soutenue par aucun des formats Web alternatifs et quel espace il s'ouvre aux concepteurs et aux cameramen ... UPD. En outre, en tenant compte des détails du format, pour des éléments de conception dans le Web - c'est probablement la meilleure solution.Google et Swing -. Le programme est d'environ 1,5 MB avec un nombre minimal de paramètres vous permet de conduire (y compris des fichiers PACKET) PNG avec compression.
Sur le pack d'icônes (90 fichiers avec un fond transparent sans soufflet spécial), le gain du volume était en moyenne d'environ 10-15%. Pas particulièrement, bien sûr, impressionnant. Mais pour les fichiers ci-dessus, le pourcentage de compression variait de 10% (grande affiche sans transparence) à 72% (rectangles translucides). Alors, essayant d'essayer, plus le travail avec l'utilité n'occupe pas beaucoup de temps. 
En plus de pngout, il y a beaucoup plus de programmes observation détaillée Qui maintenant ne veulent pas faire:
- OptiPng - n'a pas de coque graphique et ne fonctionne de ligne de commande. Par des données non vérifiées, le pourcentage de compression est inférieur. UPD. Mais ses utilisateurs disent le contraire.
- Pngcrush - ne s'est pas essayé lui-même, ils disent "essayer d'optimiser le fichier de tous méthodes disponibles"Mais la chose principale n'est pas" comment essayer ", mais" comment optimise ".
- et une autre gamme d'utilitaires simplement des déchets plus propres à partir de fichiers.
Adobe Fireworks.
Honnêtement, Adobe Fireworks est devenu une véritable découverte pour moi: PNG-8, PNG-24 et PNG-32 + Pile de paramètres!
PNG-24 et PNG-32 Je ne considérais pas en détail. Autant que je comprenne, dans leur terminologie 32 - avec un canal alpha et 24 - sans. Selon les pré-attaques, Photoshop Copes avec cette tâche mieux.
Mais PNG-8 a brisé tous mes stéréotypes (et la plupart des collègues). Le fichier final est beaucoup moins que GIF "A et il existe un soutien total à la transparence de deux manières: alpha et index Transparency. Le seul moins que le PNG-24 reste une palette d'index, bien que tout dépend des besoins. Mon personnel dépend de ses besoins. Mon personnel dépend de ses besoins. avis - PNG-8 dans la plupart des cas ou GIF et PNG-24.
PNG contre GIF en AF, bien que, juste avec les feux d'artifice GIF-JPEG familiers, ne fonctionne pas par défaut, pas très (je n'ai pas joué avec les paramètres). Mais même en comparaison avec Photoshop, le résultat est la différence de faveur de PNG:
Et voici toute la variété de PNG-8 - pour cela, il vaut la peine d'installer Adobe Fireworks: 
À titre de comparaison: le même fichier par les efforts de Photoshop pesait 3 188 octets contre les 450 reçus maintenant, c'est-à-dire 6 fois plus.
Verdict
À mon avis, GIF a déjà été parlé. Maintenant, son existence est principalement la question de l'inertie de la société. UPD. Cependant, le segment de différents plaisirs d'animation est tôt tant que GIF :).Pour des éléments de conception transparents, il vaut la peine d'utiliser PNG-8 (moins souvent PNG-24, lorsque les palettes PNG-8 ne suffisent pas pour enregistrer l'image sans perte).
Pour les photos et complexes Éléments graphiques Le responsable reste toujours JPEG en raison des fonctionnalités puissantes de l'optimisation de l'image. Bien que dans certains cas, cela pourrait être suffisant et PNG-8 - comme avant, avec GIF "Ohm, des expériences audacieuses - la clé du succès. UPD. Mais pour vraiment grandes images, JPEG perd.
UPD. Je ne suis vraiment pas un spécialiste et un avis a écrit sur le genou, ce que l'épithète "bref" dit; Peut-être pas sur les meilleurs exemples. Par conséquent, grâce à tous ceux qui ont participé activement à la discussion, en particulier
Bonjour à tous sur le blog. En général, dans cet article, je souhaite dissiper le mythe à propos de deux données d'expansion pour les images, c'est JPG et png meilleur D'eux pas encore trouvé. Le tout est que, selon les deux, en fonction de l'utilisation du site lui-même peut affecter la vitesse du site et l'optimisation. Qu'est-ce qui vous a bien mis dans une impasse? Ensuite, lisez sur.
Deux formats PNG et JPG dans quelles différences.
Il semble que l'image et que voici cela, mais tout est dans les couleurs. Format jpg Le plus courant, car par rapport aux autres:
- Pèse moins (mais cette question est controversée voir plus loin).
- Il est facile de compresser.
- Hautes couleurs en transmission.
Le format PNG-8 le plus courant dans le bâtiment du site, car par rapport à son collègue PNG-24, a une différence colossale dans la taille du fichier. La seconde est donc très rarement utilisée.
La principale différence entre les deux formats que JPEG est un hôpital et les couleurs de celle-ci n'étirera plus pour enlever le supplément et réduire ainsi la portée de la photo et que JPG ne fonctionne pas arrière-plan transparent Ce format ne le supporte pas.
Détruisez des mythes.
Le mythe le plus important de tous les SitesProev est que, en aucun cas, PNG, ce n'est que des non-sens, les images de ce format compressent et optimisent sont meilleures que la JPG, à plusieurs reprises avec la bonne approche.
Comment choisir un format?
Regardez l'exemple, prenons une photo du Supposon de notre drapeau russe.
Je serai considéré comme toutes les opérations sur l'exemple de Photoshop, aussi plus facile. Spécialement choisi une grande taille et une petite couleur, seulement trois couleurs, et maintenant je veux le sauvegarder, voir ce qui se passe, pour commencer, prendre le format JPG.
Mais que si je l'ai sauvé dans PNG.
La taille a diminué 6 fois presque. Je n'ai rien fait seulement demandé au nombre minimum de couleurs, juste super je pense. Cette méthode convient à ceux qui ne sont pas intéressés par la reproduction des couleurs, comme un blog, toutes les captures d'écran sont ainsi faites, présentant un minimum de couleurs à lisible et que tout va bien.
Ce moment et besoin de numériser, il concerne non seulement des sites. La taille du disque dur n'est pas en caoutchouc, ma mère a des images et des images sur le travail en général, 246 concerts occupent et elle se demande pourquoi elle manque autant de la place. Juste besoin d'utiliser ma méthode et c'est tout.
Bien sûr, si la photo est multicolore avec beaucoup de couleurs et d'ombres, PNG ne vous aidera pas, puis je vous conseille d'utiliser
- Reconsidérer toutes les images sur le blog et choisir le format meilleur jpeg ou png postuler pour toutes sortes de photos. Même ceux qui ont déjà été pressés et optimisés, parce qu'ils peuvent être coupés encore plus et sans perdre de la qualité.
- Lorsque vous écrivez de nouveaux articles, évaluez ce moment, je sais que le temps partira plus, mais.
- Utilisez le programme RIOT, qui a été testé ci-dessus ou l'utiliser pour compresser JPG.
- Ne soyez pas paresseux parce que cela est nécessaire pour la vérité.
Et vous allez le prendre pendant deux minutes de plus, et le bénéfice sera un wagon entier avec un petit chariot.
Eh bien, quel est votre article, je pense que pour certaines choses, je vous ai ouvert vos yeux sur lesquels vous ne savez même pas, alors appliquez et utilisez-le, jusqu'à présent, vous attendez dans les commentaires.