Redimensionner vos photos pour le Web

Nous sommes nombreux à publier nos photos sur le Web, et la question se pose souvent de savoir quelle taille des photos doivent être utilisées. Si vous publiez des images avec des fichiers trop volumineux, vous enliserez votre site Web et mécontenterez les utilisateurs (et les moteurs de recherche). En même temps, vous voulez que vos photos soient aussi belles que possible.

J'ai de bonnes nouvelles - la réponse est assez simple. Cela dépendra cependant de l'endroit où vous téléchargez vos photos. Très souvent, vous n'aurez pas du tout besoin de les redimensionner, et lorsque vous le faites, le processus est facile. Dans cet article, je vais vous montrer ce que vous devez savoir sur le redimensionnement de vos photos et, pour les occasions où vous avez besoin de les redimensionner, je vais vous montrer comment le faire dans Photoshop et Lightroom.

Téléchargement vers une galerie Web

Si vous publiez vos photos sur une galerie Web proposée par un service tel que SmugMug, SquareSpace ou même Flickr, vous n'avez pas du tout à vous soucier du redimensionnement de vos photos. Le service redimensionnera les photos pour vous. Téléchargez simplement les fichiers JPEG les plus volumineux que vous avez sur le site Web. Le service les redimensionnera pour vous et créera même des photos de différentes tailles à utiliser comme images miniatures et à utiliser sur des appareils mobiles.

Il en va de même pour les sites de médias sociaux tels que Facebook et Instagram. Ils redimensionneront la photo en la réduisant fortement (souvent beaucoup plus que vous ne le souhaiteriez). Téléchargez simplement des fichiers JPEG en taille réelle et tout ira bien.

Si vous téléchargez sur l'un de ces services, ce que je vous recommande de faire, vous n'aurez jamais à penser à redimensionner vos photos pour le Web. J'ai personnellement téléchargé mes photos sur SmugMug pendant des années et je n'ai même jamais pensé à redimensionner mes photos. Je n'avais pas à le faire jusqu'à ce que je commence à utiliser WordPress pour ce site Web.

Mise en ligne sur votre propre site Web

Si vous créez votre propre site Web, notamment en utilisant une plateforme de blogs telle que WordPress, vous devrez redimensionner vos photos. Les tailles de fichier des JPEG qui sortent de votre appareil photo (quel que soit l'appareil photo que vous utilisez) seront trop volumineuses et enliseront votre site Web.

Quelle taille devez-vous faire pour les fichiers de votre site Web ? Probablement beaucoup plus petit que vous ne le pensez. Vous contrôlez deux variables (et je vous montrerai comment les contrôler plus tard dans cet article) :

• la taille - mesurée en pixels ; et
• la qualité, mesurée en pourcentage.

Je vais d'abord vous montrer comment déterminer la bonne taille et la bonne qualité de votre image, je vous montrerai alors comment procéder pour le réglage eux.

1. Taille

Pour déterminer la bonne taille de votre image, la première chose à faire est de déterminer la largeur de la zone de contenu de votre site Web. Cela peut nécessiter de creuser de votre côté, car différents sites ont des largeurs différentes. Par exemple, sur ce site Web, ma zone de contenu principale pour les articles a une largeur de 1024 pixels. Par conséquent, cela n'a aucun sens d'avoir des images plus larges que cela. Donc, immédiatement, je sais que je devrais réduire toutes les images à pas plus de 1024 pixels de large.

D'autres sites Web utiliseront des zones de contenu plus petites, généralement parce qu'ils incluent des barres latérales et d'autres zones de contenu. Par exemple, j'écris pour Digital Photography School et leur zone de contenu principale mesure 750 pixels de large (jusqu'à récemment, elle ne faisait que 600 pixels de large). Par conséquent, DPS n'utilise pas d'images de plus de 750 pixels de large.

Rappelez-vous que ce sont des maximums. Vous voudrez peut-être que votre image soit plus petite que la zone de contenu réelle. Dans ce cas, décidez simplement du pourcentage de votre zone de contenu que vous souhaitez que l'image remplisse, puis définissez la taille en fonction du pourcentage de cette zone de contenu.

2. Qualité

Une fois que vous avez décidé de la taille de l'image, vous pouvez toujours contrôler la qualité réglage, qui déterminera en outre la taille de l'image. Réduire le pourcentage de qualité réduit la taille du fichier, ce qui est une bonne chose. Les effets des réductions légères à modérées de la qualité ne sont pas perceptibles.

De plus, une réduction du pourcentage de qualité se traduira par un pourcentage plus élevé de réduction de la taille du fichier. En d'autres termes, une diminution du pourcentage de qualité de 5 % (par exemple, de 100 % à 95 %) entraînera une réduction bien supérieure à 5 % de la taille du fichier. Chaque réduction de 5 % de la qualité réduit la taille du fichier d'environ 15 %, bien que cette réduction diminue à mesure que vous réduisez la qualité.

De combien devriez-vous diminuer le pourcentage de qualité de vos images ? Il n'y a pas de règle établie ici, vous devez juste utiliser votre propre jugement.

Comme guide pour vous, les gens de Digital Photography School - qui savent une chose ou deux sur la façon de dimensionner les photos - n'autorisent que les photos sur leur site Web jusqu'à 200 kilo-octets (Ko). Même après avoir réduit la taille de l'image à 750 pixels sur son côté long (leur taille maximale), je dois souvent réduire la qualité de l'image entre 70 et 90 % afin d'obtenir une taille de fichier inférieure à 200 Ko.

Je suis plus indulgent sur mon propre site Web parce que je n'ai pas le volume d'images (ou de trafic) que DPS fait, est-ce que je permets à mes images d'être un peu plus grandes. Pourtant, j'essaie de les maintenir à environ 200 Ko et de ne jamais les laisser dépasser 450 Ko. Je trouve que mes pages s'ouvrent encore assez rapidement de cette façon.

Encore une fois, il n'y a pas de règle absolue avec des pourcentages de qualité. J'aurai quelques exemples ci-dessous qui vous donneront une idée de l'apparence de vos fichiers après leur réduction. Je pense que vous serez surpris du peu de différence que vous voyez dans les fichiers réduits.

3. Taille du fichier

Le point principal à retenir est que les photos que vous publiez sur le Web doivent être mesurées en kilooctets (Ko) et non mégaoctets (Mo) lorsqu'ils sont affichés sur le Web. Le fichier Raw typique qui sort de mon appareil photo est d'environ 24 Mo, et même lorsque je convertis le fichier en JPEG, il est toujours de 7 à 10 Mo. C'est façon trop volumineux pour un fichier Web. Cela ne vous fait aucun bien et enlise votre système.

Exemples

À titre d'exemple de ce dont je parle sur cette page, voici quelques versions différentes de la même image.

Grand vs Extra Large

Tout d'abord, comme point de départ, le haut de cette page est une photo que j'ai récemment prise à Torre Pines State Natural Area en Californie. J'ai redimensionné l'image pour l'adapter à la zone de contenu de ce site Web, qui mesure 1024 pixels de large. De plus, j'ai également réduit le paramètre de qualité à 80%. Cela a entraîné une taille de fichier de 450 kilo-octets.

À des fins de comparaison, j'ai également posté la même image ci-dessous, mais deux fois plus grande. Cette image fait 2048 pixels de large et j'ai gardé le réglage de qualité à 100%. Cela a abouti à un fichier de 3,8 Mo, soit environ 8 fois la taille d'un fichier de la taille de l'image en haut de l'écran.

Jetez un œil aux deux photos. (Je sais qu'ils ne sont pas côte à côte, mais j'aurai un tel exemple ci-dessous). Pouvez-vous faire une grande différence entre l'image ci-dessous et celle en haut de l'écran ? Je suppose que vous ne pouvez pas.

L'augmentation de la taille en pixels ne fait évidemment rien pour vous. La largeur de l'écran n'est que de 1024 pixels, donc avoir une image plus large ne sert à rien. L'augmentation du pourcentage n'aide pas non plus. À titre de démonstration supplémentaire, examinons la même image avec différents paramètres de qualité.

Différents paramètres de qualité

Examinons maintenant un autre exemple, cette fois en utilisant des images côte à côte. Les 4 photos ci-dessous sont exactement de la même taille, mais de qualité très différente. Plus précisément, chacune des images ci-dessous fait 512 pixels de large, mais a un paramètre de qualité :

• Paramètre de qualité à 100 % (fichier de 234 Ko)
• Paramètre de qualité de 80 % (fichier de 115 Ko)
• Paramètre de qualité de 60 % (fichier de 70 Ko)
• Paramètre de qualité de 40 % (fichier de 44 Ko)

Je les ai mélangés. Pouvez-vous dire lequel est lequel ? Une fois que vous avez votre supposition, comparez-la à la réponse dans la légende ci-dessous.

Avez-vous pu déterminer lequel était lequel ? Si vous êtes comme moi, vous ne pourriez pas. Je ne vois pas beaucoup de différence dans ces images.

Pourtant, la plus petite d'entre elles ne représente que 25 % de la taille de fichier de la plus grande image. Par conséquent, le but de tout cela est que vous n'avez probablement pas besoin de trop vous soucier de réduire la taille du fichier de vos images avant de les publier sur le Web.

Dans cet esprit, voyons comment redimensionner vos photos.

Comment redimensionner vos photos

Lorsque vous avez besoin de redimensionner vos photos, comment faites-vous ? Cela dépend du logiciel que vous utilisez. Photoshop ou Lightroom feront du bon travail à cet égard, et vous n'avez pas besoin d'un logiciel de redimensionnement séparé.

Voici comment procéder dans chaque programme :

Redimensionner des photos dans Photoshop

Dans Photoshop. utilisez la fonction Enregistrer pour le Web. Il vous permettra de définir les longueurs exactes en pixels des côtés de votre image, et il vous permettra également de définir le pourcentage de qualité comme vous le souhaitez.

Dans le menu Fichier, sélectionnez Enregistrer pour le Web. Une boîte de dialogue apparaîtra qui vous permettra de définir la taille et la qualité de l'image :

Les réglages de la taille de l'image sont vers le bas. Réglez simplement la largeur ou la hauteur à la longueur souhaitée, et l'autre côté passera automatiquement à la longueur correspondante. La taille du fichier apparaîtra en bas à gauche. Ajustez le paramètre de qualité en haut à droite jusqu'à ce que la taille du fichier corresponde à ce que vous souhaitez.

Le processus est simple et vous en avez le contrôle total. La seule limitation est que vous devez redimensionner chaque image individuellement. Lightroom fonctionne un peu différemment et vous permet de traiter plusieurs photos à la fois.

Redimensionner des photos dans Lightroom

Dans Lightroom, vous utiliserez la fonction Exporter pour redimensionner vos photos. Pour afficher la fonction d'exportation, cliquez avec le bouton droit de la souris, sélectionnez Exporter, puis sélectionnez à nouveau Exporter. La boîte de dialogue suivante apparaît :

Dans Lightroom, vous pouvez définir la taille de l'image en définissant la largeur, la hauteur ou les deux. Vous pouvez également définir en pixels, pouces ou centimètres.

Lorsqu'il s'agit de déterminer la taille du fichier, Lightroom vous permet de le faire de deux manières :

• en définissant une limite spécifique sur la taille du fichier, ou
• en définissant la qualité (en pourcentage - comme avec Photoshop).

Mais vous ne pouvez pas faire les deux. Vous choisissez la taille ou la qualité du fichier.

Une fois que vous avez cliqué sur Exporter, Lightroom crée une nouvelle copie de l'image dans le dossier que vous avez désigné.

Aucun programme n'est meilleur que l'autre pour redimensionner les photos. Utilisez simplement celui avec lequel vous êtes le plus à l'aise. Dans les deux cas, redimensionner vos photos est simple et sera très facile une fois que vous l'aurez fait une fois ou deux.

Conclusion

À ce stade, vous devriez avoir une bonne idée de la façon de redimensionner vos photos et de la taille des fichiers lors de la publication sur le Web. Pour renforcer cela - et simplement les choses - le processus expliqué dans cet article peut être résumé en quelques étapes :

• Déterminez si vous devez même vous soucier du redimensionnement de vos images. Si vous utilisez SmugMug, SquareSpace, Flickr ou un autre service pour publier vos photos sur le Web, vous ne le faites pas. Il vous suffit de les publier tels quels et votre fournisseur de services s'occupera de tout pour vous. Mais si vous créez votre propre site Web ou site WordPress, vous devez dimensionner correctement vos images.
• Si vous avez besoin de redimensionner vos images, déterminez la taille (en pixels) de votre image en fonction de la taille du conteneur sur votre site Web et de la quantité de ce conteneur que vous souhaitez que l'image remplisse.
• Utilisez la fonction Enregistrer pour le Web dans Photoshop ou la fonction Exporter dans Lightroom pour redimensionner l'image, en commençant par définir la taille que vous avez déterminée à l'étape 2.
• Définissez un pourcentage de qualité pour réduire davantage la taille de fichier de l'image (ou vous pouvez utiliser la taille de fichier maximale dans Lightroom). Essayez de limiter la taille de l'image à environ 250 Ko au maximum.
• N'ayez pas peur d'utiliser des pourcentages de qualité aussi bas que 50 %.

Ce processus devrait permettre à vos images d'avoir une belle apparence sur votre site Web, mais sans l'enliser.