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 :
- 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. - 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. - 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'écran | Largeur de l'écran | ||
|---|---|---|---|
| Dimension | % utilisateur | Dimension | % 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
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.
Visage
Le format JPEG est à privilégier pour le poids du fichier.
Statue
Le format JPEG est à privilégier pour le poids du fichier.
Graphique avec transparence et dégradé
Le format PNG optimisé est le grand gagnant : 33ko.
Dessin avec transparence
Le format PNG optimisé est le meilleur choix : 47ko.
GIF-8bits
143Ko
Problème de transparence sur les ombres.
Dessin avec 5 couleurs en aplats
le format PNG a des coutours plus nets.
PNG-24bits = 263Ko
JPEG-24bits 100% = 174Ko
GIF-8bits = 121Ko
GIF-6bits = 90Ko
PNG-8bits = 66Ko
PNG-8bits optimisé = 48Ko
JPEG-24bits 60% = 42Ko
JPEG-24bits 40% = 33Ko
PNG-4bits = 26Ko
PNG-4bits optimisé = 21Ko
JPEG-24bits 10% = 16Ko
JPEG-24bits 1% = 8Ko
Copie d'écran
Encore le format PNG optimisé en tête : 29ko.
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.
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 1
Enregistrement 100
Enregistrement 1000
Enregistrement 10000
Référence logiciels et sites Internet
Compression
- Site Internet : optimizilla compression PNG et JPG jusqu'à 20 images avec aperçu en ligne
- Site Internet : compresspng.com compression PNG, JPG et PDF en ligne
- Site Internet : imagecompressor compression PNG et JPG en ligne (images jusqu'à 50 Mo)
- Site Internet tinypng.com compression PNG et JPG en ligne. Merci Folamour.
- Logiciel PC : FileOptimizer (PC) compression PNG, PDF, CSS, JS, ...
- logiciel PC/MAC/LINUX : Caesium PH compression JPG
- Logiciel PC : VJC compression JPG. voir article sur ce site
- Logiciel PC : PNG Optimizer compression-optimisation PNG
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.
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.
