JPG vs PNG : lequel choisir pour votre site Web ?

Lorsque vous choisissez des photos pour votre site, ce n'est pas seulement ce qu'il y a sur les photos qui compte. En fait, choisir le bon format d'image peut être tout aussi important. Parlons donc de JPG vs PNG, lequel choisir et pourquoi.

Si vous optez pour un mauvais format, vous risquez de vous retrouver avec un site Web plus lent, des taux de rebond plus élevés et des taux de conversion plus faibles - et ce n'est pas ce que vous voulez, surtout quand cela peut être facilement évité.

La différence entre PNG et JPG

Commençons par les définitions de base.

PNG signifie Portable Network Graphics, avec une compression dite « sans perte ». Cela signifie que la qualité de l'image était la même avant et après la compression.

JPEG ou JPG signifie Joint Photographic Experts Group, avec une compression dite « avec perte ».

Comme vous l'avez peut-être deviné, c'est la plus grande différence entre les deux. La qualité des fichiers JPEG est nettement inférieure à celle des fichiers PNG.

Cependant, la qualité inférieure n'est pas nécessairement une mauvaise chose.

Qu'est-ce que le JPEG ?

Les images JPEG sont un choix courant pour les images produites par la photographie numérique et elles sont un bon choix pour les images avec des couleurs et des ombres complexes.

Bien que la perte de qualité soit peu perceptible avec la compression 10: 1 de JPG, la taille plus petite rend les JPEG adaptés à une utilisation sur le Web, car la réduction de la quantité de données utilisées pour une photo est utile pour une présentation réactive.

D'un autre côté, les images JPG ne sont pas le meilleur choix pour les dessins au trait et autres graphiques textuels ou iconiques en raison des contrastes nets entre les pixels adjacents. Si vous souhaitez utiliser une image de ce type pour votre site, vous devriez probablement envisager d'utiliser des formats graphiques sans perte.

Qu'est-ce que le PNG ?

PNG a été créé pour remplacer les GIF et est devenu le format de compression d'image sans perte le plus courant sur Internet.

Qu'est-ce qu'un fichier PNG ?

Connue sous le nom de Portable Network Graphics, l'image PNG peut être basée sur une palette, en niveaux de gris et en couleur RVB/RGBA sans palette.

Le format de fichier PNG a été conçu spécifiquement pour transférer des images sur Internet plutôt que pour imprimer des graphiques et, par conséquent, ne prend pas en charge les espaces colorimétriques non RVB tels que CMJN.

Le gros avantage est que .png offre une variété de niveaux de transparence, ce qui signifie que l'arrière-plan PNG peut être complètement transparent, ce qui est important pour les conceptions de logo png et similaires. C'est également le meilleur choix pour les images avec des effets de fondu.

JPG vs PNG – la règle de base

Étant donné que les formats JPG et PNG ont leurs avantages et leurs inconvénients, vous devez tirer le meilleur parti des deux et exploiter leurs atouts.

En pratique, cela signifie que vous devez utiliser .jpeg pour les photographies et .png pour les graphiques et les captures d'écran.

Est-ce que c'est vraiment important?

Lorsque vous parlez JPG vs PNG et que vous comparez les deux côte à côte, la vérité est que vous ne pourrez pas voir beaucoup de différence dans les photos.

Donc, si les images PNG ne ressemblent pas beaucoup mieux aux JPG, pourquoi ne pas toujours utiliser le format JPG et vous faciliter la tâche ?

Malheureusement, ce n'est pas si simple et la raison en est la compression d'image.

Vous voulez le format d'image de la plus haute qualité, mais vous voulez également avoir un site Web réactif, vous devez donc vraiment prendre en compte la différence entre jpeg et png, et en particulier la différence de compression d'image.

Pensez-y comme ceci : la compression d'image signifie réduire la taille de l'image sans sacrifier la qualité pour la taille. Généralement, une compression plus forte équivaut à une taille de fichier plus petite, ce qui équivaut à une moins bonne qualité d'image.

Donc, si vous voulez une bonne compression, vous devez trouver le bon équilibre entre la qualité et la taille de votre fichier.

Lorsque vous regardez l'image enregistrée sur votre ordinateur, vous en voyez la meilleure version car le fichier n'a pas été compressé. Cependant, si cette même image se trouve sur le site Web, elle doit être téléchargée pour que vous puissiez la voir.

Logiquement, cela signifie que plus l'image est grande, plus le temps de chargement est long.

Services de compression d'images

Il existe de nombreux services et outils de compression d'image et voici quelques-uns des bons que vous pouvez utiliser pour jpg ou png :

• Kraken.io - excellent équilibre entre la taille et la qualité

• Le plugin Kraken WordPress - compression automatique des images que vous téléchargez sur votre site

• WP Smush – un plugin WordPress qui compresse automatiquement vos images

Images contenant du texte

De temps en temps, vous voudrez utiliser des images contenant du texte et choisir jpeg ou png est vraiment important ici. Les PNG sont généralement un meilleur choix pour les photos de ce type, ainsi que pour les graphiques avec des détails fins.

Une différence importante entre jpg et png est qu'avec les JPG, les contours des lettres, ainsi que les lignes fines des graphiques, apparaissent généralement moins nettes.

Photos régulières

Et tandis que les graphiques et les images avec des lettres sont généralement plus beaux dans le fichier .png, avec les photos ordinaires, JPG est un meilleur choix pour le Web car il est de plus petite taille.

Si vous décidez d'utiliser uniquement des PNG, ils ralentiront votre site Web, ce qui peut frustrer les utilisateurs.

Redimensionner les images

Outre la compression, vous pouvez également envisager de redimensionner les images que vous souhaitez utiliser pour votre conception Web. La bonne nouvelle est que le redimensionnement n'est pas un processus compliqué et qu'il existe deux façons de le faire correctement :

1 - Utilisez certains des outils de redimensionnement qui vous permettront de décaler manuellement les bords de l'image. Si vous souhaitez conserver le rapport hauteur-largeur d'origine, assurez-vous de saisir un coin de l'image au lieu d'un des côtés, et cela vous permettra de redimensionner votre image proportionnellement.

2 - Si vous ne souhaitez pas redimensionner l'image en l'ajustant manuellement, ou si vous avez besoin d'une image d'une taille spécifique, vous pouvez utiliser certains des programmes graphiques avancés qui vous permettront de spécifier la taille de l'image, puis d'ajuster le temps image en conséquence.

Cependant, il arrive parfois que les images soient un peu floues après avoir été redimensionnées. Pensez donc à utiliser certains des outils de netteté avant de les exporter au format png ou jpg.

PNG vs JPG lorsque vous n'êtes pas sûr

À présent, nous savons que les JPG sont meilleurs pour les photographies, tandis que les images .png fonctionnent mieux pour les graphiques et les images avec du texte. Mais quoi de mieux pour les images qui se situent quelque part entre les deux ?

Les captures d'écran en sont un bon exemple car elles contiennent souvent des photographies ainsi que du texte et des lignes nettes.

Cependant, lorsqu'il s'agit de JPG vs PNG lorsqu'il s'agit de captures d'écran, il est presque toujours préférable d'utiliser le format PNG pour conserver la netteté et la lisibilité du texte dans l'image.

À la fin de la journée, si vous n'êtes toujours pas sûr du format à utiliser, vous pouvez toujours enregistrer l'image dans les deux, puis les comparer et décider lequel vous convient le mieux.

Réflexions finales sur la comparaison JPG vs PNG

Maintenant que vous savez ce qu'est un fichier PNG et quelle est la différence entre un PNG et un JPG, il devrait vous être plus facile de choisir le bon format pour que votre site Web reste à la fois beau, rapide et réactif.

Lorsque vous parlez de JPG vs PNG, il y a quelques éléments clés à garder à l'esprit.

PNG est le meilleur choix pour les graphiques, les images avec du texte, les captures d'écran et pour les conceptions qui nécessitent l'utilisation de la transparence, telles que les conceptions de logo et similaires. Cependant, le plus gros inconvénient est qu'ils sont de plus grande taille et qu'ils ralentiront votre site Web.

JPG, d'autre part, est plus petit et plus rapide à charger, mais la compression s'accompagne d'une certaine perte de qualité qui n'est généralement pas un problème pour les photographies, mais cela peut être mauvais pour le texte ou les images contenant des lignes fines.

Alors, lequel devriez-vous utiliser? Eh bien, cela dépend du type d'image et du type de site Web que vous créez.