Dimensions et poids des images

Quel est le format idéal pour une photo est la question récurrente que l'on me pose depuis que bgMax existe.

La réponse évidente est de privilégier un fichier très léger pour ne pas ralentir le chargement de la page. Le poids du fichier va dépendre de 2 critères : la taille de la photo en pixels et le format de stockage (jpg, png, gif, ...). Je vais essayer dans cet article d'éclaircir ces 2 points.

La taille idéale d'une image

Il est possible de séparer les besoins en 3 groupes :

  1. l'image d'arrière-plan pour bgMax par exemple. Elle doit couvrir la totalité de la fenêtre du navigateur.
    Si l'on se réfère aux stats ci-dessous, 85% des internautes ont un écran qui fait moins de 1600px de large. Je pense qu'une image de 1000x1500px couvre les besoins. Il est possible, pour des questions de poids de fichier, de préparer une image 800x1200px qui répondra à 40% des besoins et sera agrandie sans trop de perte par le navigateur client.
  2. les images d'illustration qui sont insérées dans les articles. Leur taille doit être celle de la plus grande utilisation.
    Je vais prendre ce site comme exemple; une photo qui occupe le tiers de la largeur d'un article sur grand écran (soit 870/3=290px), occupera la largeur complète d'un smartphone (soit 600px minimum). Le site screensiz.es nous renseigne sur les tailles des différents modèles.
  3. les vignettes et images popup nous obligent à répondre à 2 questions.
    • La taille de la vignette suit les mêmes règles qu'une image d'illustration.
    • La taille de l'image popup ou lightbox doit remplir au maximum la fenêtre du navigateur. La dimension importante est la hauteur de la zone utilisée pour afficher le site dans le navigateur. Toujours selon les stats de début 2016, 80% ont un écran de 900px de hauteur maxi, à laquelle il faut retirer les diverses barres d'outils : 750px me semble donc une hauteur raisonnable.
      Une image affichée dans un popup devrait s'inscrire dans un rectangle de H750 x L1050 pixels.

Statistiques dimension moniteur

Hauteur de l'écranLargeur de l'écran
Dimension% utilisateurDimension% utilisateur
entre 640 et 800px 59% inf. à 1280px 39%
900px 20% entre 1400 et 1600px 46%
env. 1050px 32% env. 1900px 15%

source : www.libstat.com (avril 2016)

Type photo et format

Mode opératoire pour la réalisation des tests

  • les photos utilisées sont des photos libres de droits de grande taille récupérées sur wikipedia.org et flickr.com.
  • la photo de base est une version réduite à 750x1050px au format TIFF.
  • la vignette est une zone de 200x200px de l'image de base.
  • toutes les variantes ont été créées à partir des modèles de base
  • chaque type de sujet a été enregistré aux formats :
    • JPEG 24bits (16 millions de couleurs) avec niveau de qualité 100, 80, 60, 40, 10 et 1%
    • PNG 24bits (16 millions de couleurs), 8bits (256 couleurs) et 4 bits (16 couleurs),
      plus une version compressée du fichier 24bits
    • GIF 8 bits (256 couleurs adaptatives) et 6 bits (64 couleurs adaptatives)
  • une anomalie de rendu a toujours été confirmée par l'utilisation d'un autre logiciel
  • la compression PNG a été réalisée avec le logiciel FileOptimizer

Cette section montre le meilleur résultat dans les 3 formats (JPG, PNG et GIF) pour les différents types de photos.
La photo entière est visible en cliquant sur sa vignette qui est un détail à la même échelle.
Toutes les photos sont sur un fond hachuré mauve pour mettre en évidence les transparences.
Le meilleur rapport qualité-poids est signalé par cette étoile

Toutes les images générées pour le test sont disponibles, de la plus lourde à la plus légère, en cliquant sur le lien juste au-dessous.

Paysage

Le format JPEG est à privilégier pour le poids du fichier. Un niveau de qualité à 60% convient à beaucoup de cas.

JPEG-24bits 60% = 120Ko

JPEG-24bits 60%
120Ko

PNG-24bits optimisé = 382Ko

PNG-24bits optimisé
382Ko

GIF-6bits = 331Ko

GIF-6bits
331Ko

  • voir tous les exemples pour paysages
    PNG-24bits = 1452Ko

    PNG-24bits = 1452Ko

    JPEG-24bits 100% = 731Ko

    JPEG-24bits 100% = 731Ko

    PNG-8bits = 607Ko

    PNG-8bits = 607Ko

    GIF-8bits = 533Ko

    GIF-8bits = 533Ko

    PNG-24bits optimisé = 382Ko

    PNG-24bits optimisé = 382Ko

    GIF-6bits = 331Ko

    GIF-6bits = 331Ko

    PNG-4bits = 231Ko

    PNG-4bits = 231Ko

    JPEG-24bits 80% = 184Ko

    JPEG-24bits 80% = 184Ko

    JPEG-24bits 60% = 120Ko

    JPEG-24bits 60% = 120Ko

    JPEG-24bits 40% = 89Ko

    JPEG-24bits 40% = 89Ko

    JPEG-24bits 10% = 35Ko

    JPEG-24bits 10% = 35Ko

    JPEG-24bits 1% = 16Ko

    JPEG-24bits 1% = 16Ko

Visage

Le format JPEG est à privilégier pour le poids du fichier.

JPEG-24bits 40% = 79Ko

JPEG-24bits 40%
79Ko

PNG-24bits optimisé = 465Ko

PNG-24bits optimisé
465Ko

GIF-6bits = 417Ko

GIF-6bits
417Ko

  • voir tous les exemples pour les photos de personnes
    PNG-24bits = 1400Ko

    PNG-24bits = 1400Ko

    JPEG-24bits 100% = 665Ko

    JPEG-24bits 100% = 665Ko

    PNG-8bits = 662Ko

    PNG-8bits = 662Ko

    GIF-8bits = 642Ko

    GIF-8bits = 642Ko

    PNG-24bits optimisé = 465Ko

    PNG-24bits optimisé = 465Ko

    GIF-6bits = 417Ko

    GIF-6bits = 417Ko

    PNG-4bits = 274Ko

    PNG-4bits = 274Ko

    JPEG-24bits 80% = 157Ko

    JPEG-24bits 80% = 157Ko

    JPEG-24bits 60% = 104Ko

    JPEG-24bits 60% = 104Ko

    JPEG-24bits 40% = 79Ko

    JPEG-24bits 40% = 79Ko

    JPEG-24bits 10% = 33Ko

    JPEG-24bits 10% = 33Ko

    JPEG-24bits 1% = 17Ko

    JPEG-24bits 1% = 17Ko

Statue

Le format JPEG est à privilégier pour le poids du fichier.

JPEG-24bits 40% = 39Ko

JPEG-24bits 40%
39Ko

PNG-24bits optimisé = 242Ko

PNG-24bits optimisé
242Ko

GIF-6bits = 324Ko

GIF-6bits
324Ko

  • voir tous les exemples pour statues (modelés monochromes)
    PNG-24bits = 1110Ko

    PNG-24bits = 1110Ko

    PNG-8bits = 613Ko

    PNG-8bits = 613Ko

    GIF-8bits = 565Ko

    GIF-8bits = 565Ko

    JPEG-24bits 100% = 463Ko

    JPEG-24bits 100% = 463Ko

    GIF-6bits = 324Ko

    GIF-6bits = 324Ko

    PNG-24bits optimisé = 242Ko

    PNG-24bits optimisé = 242Ko

    PNG-4bits = 218Ko

    PNG-4bits = 218Ko

    JPEG-24bits 80% = 77Ko

    JPEG-24bits 80% = 77Ko

    JPEG-24bits 60% = 50Ko

    JPEG-24bits 60% = 50Ko

    JPEG-24bits 40% = 39Ko

    JPEG-24bits 40% = 39Ko

    JPEG-24bits 10% = 21Ko

    JPEG-24bits 10% = 21Ko

    JPEG-24bits 1% = 14Ko

    JPEG-24bits 1% = 14Ko

Graphique avec transparence et dégradé

Le format PNG optimisé est le grand gagnant : 33ko.

JPEG-24bits 100% = 136Ko

JPEG-24bits 100%
136Ko
Pas de transparence

PNG-24bits optimisé = 40 Ko

PNG-24bits optimisé
40 Ko

GIF-8bits = 121Ko

GIF-8bits
121Ko
La palette de 256 couleurs est insuffisante

  • voir tous les exemples pour grahiques avec dégradés et transparences
    JPEG-24bits 100% = 136Ko

    JPEG-24bits 100% = 136Ko

    GIF-8bits = 121Ko

    GIF-8bits = 121Ko

    PNG-24bits = 97Ko

    PNG-24bits = 97Ko

    GIF-6bits = 77Ko

    GIF-6bits = 77Ko

    PNG-8bits = 48Ko

    PNG-8bits = 48Ko

    PNG-24bits optimisé = 40 Ko

    PNG-24bits optimisé = 40 Ko

    JPEG-24bits 80% = 38Ko

    JPEG-24bits 80% = 38Ko

    PNG-4bits = 32Ko

    PNG-4bits = 32Ko

    JPEG-24bits 60% = 29Ko

    JPEG-24bits 60% = 29Ko

    JPEG-24bits 40% = 24Ko

    JPEG-24bits 40% = 24Ko

    JPEG-24bits 10% = 17Ko

    JPEG-24bits 10% = 17Ko

    JPEG-24bits 1% = 14Ko

    JPEG-24bits 1% = 14Ko

Dessin avec transparence

Le format PNG optimisé est le meilleur choix : 47ko.

JPEG-24bits 80% = 57Ko

JPEG-24bits 80%
57Ko
Pas de transparence

PNG-24bits optimisé = 47Ko

PNG-24bits optimisé
47Ko

GIF-8bits = 89Ko

GIF-8bits
143Ko
Problème de transparence sur les ombres.

  • voir tous les exemples pour les dessins et cliparts avec transparences
    PNG-24bits = 247Ko

    PNG-24bits = 247Ko

    JPEG-24bits 100% = 179Ko

    JPEG-24bits 100% = 179Ko

    GIF-8bits = 89Ko

    GIF-8bits = 89Ko

    GIF-6bits = 68Ko

    GIF-6bits = 68Ko

    PNG-8bits = 65Ko

    PNG-8bits = 65Ko

    JPEG-24bits 80% = 57Ko

    JPEG-24bits 80% = 57Ko

    PNG-24bits optimisé = 47Ko

    PNG-24bits optimisé = 47Ko

    PNG-4bits = 42Ko

    PNG-4bits = 42Ko

    JPEG-24bits 60% = 42Ko

    JPEG-24bits 60% = 42Ko

    JPEG-24bits 40% = 35Ko

    JPEG-24bits 40% = 35Ko

    JPEG-24bits 10% = 22Ko

    JPEG-24bits 10% = 17Ko

    JPEG-24bits 1% = 16Ko

    JPEG-24bits 1% = 16Ko

Dessin avec 5 couleurs en aplats

le format PNG a des coutours plus nets.

JPEG-24bits 80% = 57Ko

JPEG-24bits 80%
57Ko

PNG-24bits optimisé = 54Ko

PNG-24bits optimisé
54Ko

GIF-4bits = 51Ko

GIF-4bits
51Ko

  • voir tous les exemples pour la fleur de 5 couleurs en aplat
    PNG-24bits = 263Ko

    PNG-24bits = 263Ko

    JPEG-24bits 100% = 174Ko

    JPEG-24bits 100% = 174Ko

    GIF-8bits = 121Ko

    GIF-8bits = 121Ko

    GIF-6bits = 90Ko

    GIF-6bits = 90Ko

    PNG-8bits = 66Ko

    PNG-8bits = 66Ko

    JPEG-24bits 80% = 57Ko

    JPEG-24bits 80% = 57Ko

    PNG-24bits optimisé = 54Ko

    PNG-24bits optimisé = 54Ko

    GIF-4bits = 51Ko

    GIF-4bits = 51Ko

    PNG-8bits optimisé = 48Ko

    PNG-8bits optimisé = 48Ko

    JPEG-24bits 60% = 42Ko

    JPEG-24bits 60% = 42Ko

    JPEG-24bits 40% = 33Ko

    JPEG-24bits 40% = 33Ko

    PNG-4bits = 26Ko

    PNG-4bits = 26Ko

    PNG-4bits optimisé = 21Ko

    PNG-4bits optimisé = 21Ko

    JPEG-24bits 10% = 16Ko

    JPEG-24bits 10% = 16Ko

    JPEG-24bits 1% = 8Ko

    JPEG-24bits 1% = 8Ko

Copie d'écran

Encore le format PNG optimisé en tête : 29ko.

JPEG-24bits 80% = 97Ko

JPEG-24bits 80%
97Ko

PNG-24bits optimisé = 29Ko

PNG-24bits optimisé
29Ko

GIF-6bits = 122Ko

GIF-6bits
122Ko

  • voir tous les exemples pour les copies d'écran
    JPEG-24bits 100% = 244Ko

    JPEG-24bits 100% = 244Ko

    GIF-8bits = 155Ko

    GIF-8bits = 155Ko

    GIF-6bits = 122Ko

    GIF-6bits = 122Ko

    PNG-24bits = 92Ko

    PNG-24bits = 119Ko

    JPEG-24bits 80% = 97Ko

    JPEG-24bits 80% = 97Ko

    JPEG-24bits 60% = 71Ko

    JPEG-24bits 60% = 71Ko

    JPEG-24bits 40% = 57Ko

    JPEG-24bits 40% = 57Ko

    PNG-8bits = 42Ko

    PNG-8bits = 132Ko

    PNG-4bits = 34Ko

    PNG-4bits = 68Ko

    PNG-24bits optimisé = 29Ko

    PNG-24bits optimisé = 29Ko

    JPEG-24bits 10% = 26Ko

    JPEG-24bits 10% = 26Ko

    JPEG-24bits 1% = 12Ko

    JPEG-24bits 1% = 12Ko

Conclusion

  • JPEG est idéal pour toutes les photos avec beaucoup de couleurs et des dégradés.
    Un niveau de qualité (compression) de 40% à 60% convient dans la plupart des cas, au-dessous des taches apparaissent sur les aplats clairs (ciel, peau, ...)
  • PNG, indispensable pour les fonds transparents, fait merveille sur des sujets avec des aplats. Ne pas oublier de le compresser.
  • GIF est à réserver pour les animations. la gestion des transparences n'est pas au niveau du PNG.

webp : un nouveau format

WebP est un format d'image matricielle développé et mis à disposition du public par Google. Il exploite un algorithme de compression avec pertes. Voir wikipedia et developers.google.com

Actuellement les images webp sont visibles uniquement avec les navigateurs Chrome et Opéra. Source: caniuse.com

Ci-dessous une comparaison avec 2 des images de cette page. Je vous laisse juge, mais pour moi aucun intérêt dans l'immédiat.

Image visible uniquement avec Chrome et Opera - WEBP = 166Ko

WEBP
166Ko

JPEG-24bits 40% = 79Ko

JPEG-24bits 40%
79Ko

PNG-24bits optimisé = 465Ko

PNG-24bits optimisé
465Ko

GIF-6bits = 417Ko

GIF-6bits
417Ko

Image visible uniquement avec Chrome et Opera - WEBP = 64Ko

WEBP
64Ko

JPEG-24bits 80% = 57Ko

JPEG-24bits 80%
57Ko

PNG-24bits optimisé = 54Ko

PNG-24bits optimisé
54Ko

GIF-4bits = 51Ko

GIF-4bits
51Ko

Idée reçue : le JPEG perd en qualité à chaque enregistrement

Ayant un doute sur cette assertion, j'ai écrit une petite moulinette qui ajoute un numéro de version sur une image JPEG, l'enregistre, la relit puis recommence l'opération 9999 fois en alternant le niveau de qualité entre 60 et 70%. Vous pouvez constater que la qualité est identique de la première à la dernière.

Cela ne m'empêchera pas de privéligier les formats PNG et PSD comme format de travail et de stockage.

Enregistrement n°1 au format JPEG à 70%

Enregistrement 1

Enregistrement n°100 au format JPEG à 60%

Enregistrement 100

Enregistrement n°1000 au format JPEG à 60%

Enregistrement 1000

Enregistrement n°10000 au format JPEG à 60%

Enregistrement 10000

Référence logiciels et sites Internet

Compression

Redimensionnement en lot

  • Logiciel PC : Easy Image Modifier redimensionnement avec de nombreuses options. C'est celui que j'utilise (en version PLUS) après avoir essayé quasiment tous les autres. Voir ci-dessous
  • Logiciel PC : Light Image Resizer redimensionner en lot
  • Logiciel PC : Photofiltre (menu Outils>Automatisation) permet le redimensionnement, les modifications diverses, l'ajout de marges en lot
  • logiciel PC/MAC/LINUX : xnConvert est un puissant outil de traitement pas lot pour PC, MAC et LINUX
  • Logiciel MAC et PC basé sur la technologie Air de Adobe Shrink-o-Matic. Merci Ghazal pour ces infos.

Au début 2016, j'ai dû traiter plus de 500 photos pour une boutique en ligne. Les photos devaient être redimensionnées pour tenir dans un format carré avec ajout de marges. J'ai donc fait le comparatif ci-dessous pour choisir le logiciel qui me ferait gagner du temps pour ce travail répétitif à l'ennui.

Télécharger le document: lomart-comparatif-logiciels-images.pdf

Traitement d'image

  • L'incourtournable Photoshop sur MAC et PC
  • logiciel PC/MAC/LINUX : The GIMP Tutoriels sur le site www.gimpons.net
  • Logiciel MAC payant ... mais pas cher pour les performances Affinity Designer qui a l'énorme avantage d'ouvrir du .ai, du .svg, du .eps, et les autres formats, et d'exporter d'un format vers un autre (png vers svg par ex. avec un résultat assez sympa). Merci Ghazal pour ces infos.

En résumé

Dimensions de l'image

Image de fond du site
H1000 x L1500 pixels
Image d'illustration
taille de la plus grande utilisation en responsive
Vignette pour lightbox
taille de la plus grande utilisation en responsive
lightbox et popup
inscrite dans un rectangle de H750 x L1050 pixels.

Format d'enregistrement

photos avec beaucoup de couleurs.
dessins, copie d'écran
avec ou sans transparence
ne pas oublier de les compresser
uniquement pour les animations

Je n'ai pas parlé dans cet article du format vectoriel SVG qui est à privilégier pour vos logos quand vous disposez d'un fichier Inkscape, Illustrator, CoreDraw, ...

Il est possible de convertir une image en format SVG sur des sites comme image.online-convert.com, puis de la coloriser avec votre logiciel de dessin. La fleur utilisée comme exemple pèse 40Ko et peut être agrandie indéfiniment sans perte de qualité.

Me voici arrivé au bout de mon expérimentation, si vous avez des précisions à apporter, des commentaires, des suggestions de logiciels ou sites, vous pouvez utiliser le forum ou le formulaire de contact, je me ferais un plaisir d'actualiser cet article.

Print Friendly and PDF