Un guide pour débutants sur JPEG vs PNG (et comment utiliser les deux)

Que serait le web avec des images ? En quelques décennies, Internet est passé d'une imprimante matricielle numérique à un serveur multimédia dynamique, comprenant des images, des vidéos, des animations, etc. Cependant, en ce qui concerne les images fixes numériques, il peut y avoir une confusion entre JPEG et PNG, en particulier quand utiliser chacun d'eux.

Si vous regardiez une image JPEG à côté de la même mais en tant que PNG, vous ne verriez probablement aucune différence. C'est l'idéal, car les deux formats d'image visent à reproduire la meilleure image possible pour le web. Cependant, il existe différents cas d'utilisation et techniques d'optimisation dont vous devez tenir compte.

Dans cet article, nous allons comparer JPEG et PNG et vous dire quand vous devez utiliser chaque format d'image. Mais d'abord, nous allons vous présenter chaque type de fichier.

La différence entre JPEG et PNG

En surface (au sens littéral), il n'y a pas de différence entre JPEG et PNG. En d'autres termes, si nous mettions deux images en place et vous demandions de choisir laquelle était JPEG et laquelle était PNG, vous ne seriez pas en mesure de le dire la plupart du temps. Par exemple, prenez l'image suivante :

Êtes-vous en mesure de décider si ce papillon mormon écarlate est une image JPEG ou PNG ? Bien sûr, sans cadre de référence, vous ne pouvez pas faire de comparaison :

Il y a des différences nettes, bien que cela ne fasse pas une grande différence dans ce cas. Pendant que vous essayez de décider (sans jeter un coup d'œil aux outils de développement de votre navigateur), nous pouvons partager certains détails techniques :

• Le format de fichier JPEG (Joint Photographic Experts Group) offre une compression avec perte des images numériques. Cela signifie que la qualité de l'image est perceptible si l'équilibre entre cela et la taille du fichier oscille trop loin. Les JPEG sont des fichiers "plats". En d'autres termes, ils ne peuvent pas afficher la transparence dans un fichier. Bien que vous puissiez ajuster le niveau de compression, même à ses meilleurs réglages, un JPEG sera un fichier 8 bits, ce qui a un impact sur la plage dynamique. De plus, un JPEG comprend souvent un profil de couleur, qui indique aux moniteurs comment afficher les couleurs à l'intérieur.
• En revanche, les images PNG (Portable Network Graphics) sont des fichiers prêts pour le Web. C'est un format plus dynamique que JPEG, avec la possibilité de produire des fichiers 24 bits. C'est aussi un format « sans perte », ce qui signifie que vous pouvez le dupliquer sans dégrader la qualité de l'image. Cependant, vous ne pouvez pas ajuster la compression des fichiers PNG et il n'y a pas de profil de couleur. Malgré cela, un PNG est parfait pour le web, en fonction de ses spécifications techniques.

Cela semble clair - les PNG conviennent au Web, contrairement aux JPEG. Eh bien, ce n'est pas toute l'histoire. Chaque type de fichier est idéal pour certaines applications. Ensuite, nous en discuterons.

JPEG vs PNG : quand utiliser chacun d'entre eux

Le Web tire le meilleur parti des fichiers JPEG et PNG. En fait, ils s'emboîtent d'une manière agréable sans trop de croisement. En guise d'extrait sonore pratique, voici quand vous devriez utiliser JPEG vs PNG :

Si vous voulez afficher une photo, utilisez JPEG. Pour tout autre fichier, en particulier les graphiques numériques, utilisez PNG.

Cependant, ce conseil n'est pas vrai pour toutes les situations (bien qu'il soit pertinent pour presque tous les cas). Par exemple, si vous combinez des dessins numériques avec des images de stock, JPEG et PNG seront techniquement incorrects à utiliser. Plus tard, vous aurez plus de connaissances pour prendre une bonne décision, bien qu'il y ait d'autres indications à vous donner.

Par exemple, si vous envisagez de copier des images, utilisez un format de fichier différent de JPEG. En effet, les formats de compression avec perte ne reconstruisent qu'une version approximative du fichier. En revanche, PNG est une reproduction 1: 1 car il offre une compression sans perte.

De plus, si vous souhaitez redimensionner votre image une fois que vous l'avez enregistrée, utilisez JPEG car cela gère bien la mise à l'échelle. Les PNG utilisent une structure d'encodage différente, qui se dégrade une fois que vous modifiez les dimensions (ou d'autres attributs techniques).

Autres formats d'image que vous devez connaître

Bien sûr, JPEG vs PNG n'est pas la seule comparaison de format de fichier image à prendre en compte. Il existe de nombreux autres types de fichiers qui se disputent l'attention et ont d'autres cas d'utilisation :

• Format d'interface graphique (GIF). Si vous publiez un mème ou une vidéo de réaction sur Twitter qui s'anime, c'est un GIF. En fait, PNG a cherché à remplacer les fichiers GIF dans sa spécification d'origine, et ils offrent tous deux des calques de transparence.
• Format de fichier d'image balisé (TIFF). Ce format de fichier raster est idéal pour l'impression en raison de sa prise en charge des espaces colorimétriques CMJN.
• Format d'image brute (RAW). Vous ne l'utiliserez que si vous êtes photographe, et il est exclusif à l'appareil photo que vous utilisez. Bien que vous puissiez afficher les fichiers RAW sur votre ordinateur, vous avez besoin d'un logiciel dédié pour les afficher. Les tailles de fichiers sont astronomiques, car les données sont complètes. En fait, les formats RAW ne sont pas des images, mais des données qui, une fois encodées, représentent l'image.
• Fichier image haute efficacité (HEIF). Il s'agit du format de fichier principal des appareils iOS. Il offre une meilleure compression et une meilleure taille de fichier que JPEG et peut gérer de nombreux formats multimédias différents.

Alors que chacun de ces fichiers image sera utilisé sur le Web (à l'exception des fichiers RAW en ce qui concerne l'affichage), JPEG vs PNG domine toujours. Ils ont tous deux des cas d'utilisation spécifiques pour lesquels les avantages et les inconvénients s'équilibrent bien.

Comment préparer vos images pour le téléchargement (de 3 manières)

Bien que JPEG vs PNG soit un tirage au sort en ce qui concerne la qualité d'affichage finale, vous devez gérer chaque format d'une manière différente pour en tirer le meilleur parti. Vous pouvez affecter la taille du fichier, la qualité et la préparation globale de vos images dans trois domaines :

• Assurez-vous que les dimensions tiennent compte des cas d'utilisation pertinents auxquels vous serez confronté.
• Choisissez une résolution pour votre image adaptée au Web.
• Utilisez une compression "de bon goût" pour réduire davantage la taille de fichier de vos images sans trop affecter la qualité.

Comme vous vous en doutez, il y a un bon équilibre ici. Commençons par les dimensions de votre image.

1. Définissez vos dimensions

Les dimensions d'une image sont plus importantes pour l'utilisateur final que tout autre point de la chaîne. En effet, le navigateur doit charger l'image et un fichier volumineux érodera l'expérience utilisateur (UX). Cependant, ce n'est pas la seule considération. Bien sûr, la qualité est également essentielle. Si vous décidez de faire une image de petite taille, cela affectera la qualité de l'image finale (plus pour les JPEG que pour les PNG).

La réponse est de toucher le point idéal dans quelques domaines, en commençant par les dimensions de votre image. En règle générale, vous souhaitez que vos images soient suffisamment grandes pour qu'elles puissent transmettre les détails dont vous avez besoin. Il y a un point de surpuissance quelque part qui est différent selon la plate-forme cible et l'image elle-même.

Les capteurs de recadrage modernes et les appareils photo numériques plein format peuvent produire des images avec des dimensions par défaut d'environ 6 000 px x 3 000 px (bien qu'il existe de grandes différences entre les appareils photo). En revanche, les images avec le "bord long" d'environ 2 000 pixels sont courantes sur les réseaux sociaux. Gardez à l'esprit qu'il s'agit d'un affichage dans la fenêtre d'affichage complète d'un appareil.

Pour les images de blog, cette règle empirique de 2 000 pixels peut même être aussi basse que 1 000 pixels. Cela prend également en compte les images haute définition ou 'Retina'. Ils ont souvent besoin du double de dimensions pour s'afficher aussi nets sur des écrans haute définition. En fait, la résolution est un bon endroit où aller ensuite.

2. Définissez la bonne résolution

Les pixels sont l'un des éléments de base des écrans numériques. Ces minuscules points constituent l'intégralité de l'affichage, bien que les pixels ne soient pas de taille uniforme. Pour cette raison, nous devons également tenir compte de la résolution lors de la préparation de nos images JPEG et PNG.

Nous utilisons Pixels Per Inch (PPI) pour discuter du nombre de pixels pouvant tenir sur un écran. Vous pouvez également l'exprimer en centimètres ou en « points ». Ce dernier est pour les formats d'impression physiques, et les cercles de conception graphique utilisent souvent le DPI. En tant que tel, vous l'entendrez utilisé de manière interchangeable, bien que PPI soit le terme correct.

Alors que la spécification d'image PNG utilise 72 PPI comme résolution de conception optimale, cela ne prendrait pas en compte les écrans haute définition modernes. Bien que vous puissiez doubler les dimensions d'une image afin de la rendre nette sur tous les écrans, vous pouvez également faire de même avec la résolution. Par exemple, prenez cette capture d'écran du bureau macOS Big Sur :

C'est un PNG, avec 1 000 pixels sur le bord long (le haut et le bas dans ce cas). Cependant, il utilise 144 PPI - bien qu'il y ait une « magie » de téléchargement qui convertit la résolution en 72 PPI lors du téléchargement vers WordPress.

Les images PNG et JPEG peuvent également utiliser des PPI beaucoup plus élevés - les résolutions prêtes à imprimer sont d'environ 300 DPI/PPI. De plus, de nombreuses images provenant de sites de photos telles que Pixabay seront téléchargées en utilisant 300 PPP :

En tant que tel, réduire cela préparera mieux vos images pour le Web et ses différents affichages.

3. Optimisez vos images à l'aide de la compression

Nous n'avons pas besoin de vous en dire beaucoup sur l'optimisation des images. C'est un sujet que vous pouvez trouver ailleurs sur le blog, et presque tous les utilisateurs de WordPress sauront optimiser les images avant ou pendant le processus de téléchargement.

Le concept général est que vous appliquez une compression supplémentaire aux images, souvent avec perte. Cela affecte la qualité de l'image, et cela se remarque si vous apportez des modifications radicales aux dimensions et à la résolution avant d'appliquer une compression lourde avec perte.

Ces artefacts doivent être minimes pour bien présenter les images. Pour cette raison, il existe de nombreux outils disponibles pour faire le travail. Le plus accessible est TinyPNG, bien qu'il comprime aussi les JPEG :

Cependant, la compression qu'il applique est douce sur certaines images, ce qui peut ne pas réduire suffisamment la taille du fichier. Un service tel que ShortPixel dispose d'un format de compression avec perte agressif, tandis que sa compression Glossy fait un travail admirable par rapport à TinyPNG.

Le point à retenir ici est que vous devez équilibrer le niveau de compression avec la taille du fichier et tous les autres éléments de l'image. Dans la section suivante, nous discuterons de la meilleure approche à adopter.

JPEG vs PNG : comment tirer le meilleur parti de chaque format

Malgré les différences de formats de fichiers, la nature de la navigation sur le Web signifie que vous pouvez vous résumer à la préparation de vos images comme suit :

• Utilisez des dimensions comprises entre 1 000 et 2 048 pixels sur le bord long.
• Définissez une résolution de 144 PPP pour toutes vos images, afin de vous assurer qu'elles s'affichent de manière nette et claire sur tous les écrans.
• Appliquez une compression subtile grâce à l'optimisation de l'image pour aider à réduire la taille du fichier. En tenant compte de tout, la plupart des images auront une taille d'environ 100 à 200 Ko.

Il y a un peu plus ici basé sur des formats de fichiers spécifiques :

• Pour les fichiers PNG, réduire les dimensions pourrait trop dégrader la qualité de l'image. L'idée ici est de maintenir la résolution aussi élevée que possible pour atténuer ces facteurs.
• Les fichiers JPEG ne résistent pas à la copie, car chaque duplication est plus dégradée que la précédente. Si vous pouvez contrôler la provenance du JPEG (par exemple, si vous avez pris la photo), créez un JPEG à partir d'un fichier TIFF ou RAW pour conserver la qualité de l'image.
• D'après notre expérience, les JPEG ne prennent pas la compression aussi bien que les autres formats de fichiers. Cela signifie qu'il est important de préparer et d'optimiser ces images avant de passer à l'étape de compression.

À présent, vous devriez avoir une solide compréhension de JPEG vs PNG, quand les utiliser et comment préparer vos fichiers ; et si vous voulez toujours savoir quelle image était JPEG depuis le début de l'article, c'est la première !

Emballer

Il semble que les images courent sur le Web. Pour cette raison, nous avons un certain nombre de formats de fichiers pour nous aider à fournir la bonne qualité à une taille de fichier respectable pour l'application. JPEG vs PNG est une comparaison courante car il n'est pas clair dans quoi l'un ou l'autre est bon, et ce sont deux formats d'image populaires.

En bref, les JPEG sont pour les photos et les PNG sont pour les graphiques. Pour préparer vos fichiers, la principale préoccupation doit être de maintenir une qualité d'image élevée plutôt que la taille du fichier. Pourtant, bien que les ajustements de la résolution vous apportent les changements les plus importants, cela a plus d'impact sur la qualité de l'image. L'astuce consiste à équilibrer les dimensions, la résolution et la compression pour obtenir l'image ultime prête pour le Web.

Préparez-vous vos images pour le Web comme nous l'avons décrit ici, ou faites-vous quelque chose de différent ? Faites-nous savoir dans la section commentaires ci-dessous!

Crédit image : minka2507, christels .