Détermination des dimensions de l’image

La dimension de l’image dépend de l’usage qui en sera faite, par exemple:

• Une image de fond qui utilise 100% de l’écran.
• Une image en orientation ‘portrait’ qui utilise 100% la hauteur de l’écran.
• Une image visible sur 1/4 de l’écran.
• Une vignette qui prend 5% de l’écran.
•  etc …

En principe, je prends la base de calcul simplifiée suivante:

• 100% de la largeur de l’écran correspond à 2000 px.
• 100% de la hauteur de l’écran correspond à 1100 px.

Prenons un cas pratique

Vous voulez faire une nouvelle page pour vous présenter.

Vous commencez par établir une maquette de la présentation de la page.

Dimensions théoriques de la taille de la photo en pixel, d’après la maquette

Si la hauteur de la photo représente 50% de l’écran,  elle fait donc 0.5 * 1100 px = environ 550 px.

Si la largeur de la photo représente approximativement 15% de la largeur de l’écran, elle fait donc  0.15 * 2000 px = approximativement 300 px.

Ceci donne une idée indicative de la dimension de la photo, un ordre de grandeur.

Dimensions réelles de la photo d’origine qui doit être redimensionnée

Par exemple, la photo d’origine provient de votre appareil photo reflex équipé d’un capteur de 7360 px * 4912 px.

Vous faites quelques travaux de retouche  (colorimétrie et de recadrage) dans votre logiciel de retouche préféré.

Au final, vous obtenez un cliché d’une dimension  6500 px * 4333 px.

Détermination du facteur de redimensionnement à appliquer

Selon votre maquette, il faudrait théoriquement réduire la photo ainsi:

• Horizontalement :4333 px -> 300 px = 6.9%  de la taille d’origine.
• Verticalement: 6500 px -> 550px = 8.5% de la taille d’origine.

Puisque vous ne voulez pas déformer la photo, vous choisissez le même facteur de réduction en hauteur et en largeur afin de conserver le ratio hauteur:largeur de l’image d’origine.

Vous obtez pour 8.5 %, car il vous semble préférable d’avoir un petit peu trop de qualité, que pas assez.

Vous redimensionnez la photo HD ainsi:

• Largeur: 4333 * 0.085  = 368 px
• Hauteur: 6500 * 0.085  = 553 px

Ceci est pour l’axe ‘dimension de l’image’ qui contribue à la taille du fichier.

Format du fichier

• Le format JPG est générallement outilisé pour les images naturelles . Est entendu par ‘naturel’, les images du monde réel (paysages, portraits)
• Les formats PNG ou GIF seront réservés pour des graphiques avec un nombre de couleurs très réduit (< 255)
• Les fichiers TIFF ou RAW ne sont pas adaptés à une publication sur le web, car les tailles de ces fichiers sont monstrueuses. On réserve ces formats pour le prepress, l’impression ou une retouche ultérieure des photos.
  Conseil: Si vous commandez des photos à un photographe, essayez de récupérer les clichés dans un de ces formats ‘lossless’ (formats d’image sans perte).

Paramètre ‘qualité’ du format JPG

Le format JPG permet de régler la qualité, le taux de compression qui influe sur la taille du fichier.

Réglage de qualité faible ( 30% et moins)

Une image avec un réglage de qualité faible aura une taille de fichier réduite, mais avec des artéfacts visibles

Réglage de qualité élevé (80% et plus)

Une image avec un réglage de qualité élevé n’aura pas/peu d’artéfacts visibles, par contre le fichier sera plus volumineux.

Par expérience, une qualité de 90% est excellente et est mon choix de préférence pour les portraits.

Néanmoins, si l’image est destinée à devenir une image de fond qui sera recouverte par d’autres éléments, vous pouvez réduire la qualité, par exemple à 60% si ce n’est pas visuellement choquant.

Au final, le plus important, c’est la taille

L’objectif est de produire la meilleure qualité visuelle possible, sans que le site devienne lourd en raison d’images longues à charger.

Concernant la taille des fichiers, personnellement je me fixe les principes et limites suivantes:

• Une image de fond (plein écran) ne devrait jamais dépasser 700 Kb.
• Une photo qui prend 1/2 écran ne devrait jamais dépasser 300kb.
• Une photo qui prend 1/4 d’écran ne devrait jamais dépasser 150kb.
• Le volume de données chargées par une page web, tous éléments confondus (la page, les scripts, toutes les images qu’elle contient, etc ) ne devrait généralement pas dépasser 4Mb.
• La plus petite taille possible est préférable, tant que ça ne devient pas visuellement choquant.

Que faire si la taille du fichier demeure trop importante?

1. Vous essaierez de réduire la qualité.
2. Si les artéfacts deviennent gênants, vous réduirez la taille de l’image (dimension en pixels).
3. Vous rechercherez le meilleur compromis possible pour trouver le bon équilibre.