© 2016 Your Business Name!

 

Optimiser une image avec Photofiltre

Optimiser une image avec Photofiltre

La chasse aux octets est ouverte

Vous et moi vivons dans un monde qui va vite, très vite. Régulièrement, les grands pontifes du hightech inondent le marché des technologies avec leurs appareils de plus en plus petits, élégants, chers… et performants (ça fait plein de choses, et ça le fait vite).

Cette surenchère du progrès a des conséquences sur nous: nous devenons impatients, nous voulons avoir accès à un grand nombre d’informations en très peu de temps. Nous vivons à une ère où quelques secondes peuvent faire la différence.

Certes, ce que je dis là est de l’ordre du poncif. Mais si vous possédez un site internet, vous avez tout intérêt à ce que son temps de chargement soit le plus court possible, afin d’éviter de perdre des visiteurs avant même le début de la visite. (Oui, les visiteurs sont cruels, mais je pense que vous-même, en tant qu’internaute, pouvez les comprendre.)

Autrement dit: optimisez votre site, supprimez tout ce qui l’alourdit, et si ce n’est pas possible, allégez le poids des fautifs. Et, ces fautifs, qui sont-ils? Les images, en grande partie, et vous allez en comprendre la raison.

Pourquoi alléger les images pour le web ?

Pour commencer, remettons-nous dans le contexte. L’ordinateur fonctionnant sur un système binaire, toute information transitant par lui doit être traduite en une suite de 0 et de 1, les bits. Plus il y a de bits, plus l’information occupe de l’espace de stockage et s’alourdit.

Notre alphabet ne comportant que 26 caractères de base, un texte est par définition léger, car chaque caractère peut se permettre d’être représenté par une chaîne très courte de 0 et de 1: 8 bits, exactement, ce qui constitue une unité à part, l’octet. Cette nouvelle unité, à l’instar du bit, du mètre, du gramme, etc, a sa propre table de conversion:

  • 1 000 octets = 1 kilo octet (ko)
  • 1 000 ko = 1 méga octet (mo)
  • et ainsi de suite jusqu’à épuisement total des préfixes scientifiques.

Essayez maintenant d’imaginer ce système appliqué aux images. De la même manière qu’un texte se fragmente en caractères, une image se fragmente en pixels (px), c’est-à-dire, pour rappel, en petits carrés de couleur. Or, des couleurs, il en existe des millions, il faut des quantités astronomiques de bits pour donner une identité numérique à chacune ! On est bien loin de nos 26 lettres de base qui peuvent tenir sur un octet chacune !

Heureusement, il existe des systèmes de simplification qui utilisent une palette de couleurs réduite, et qui, du coup, permettent de mémoriser les couleurs d’une image avec moins d’informations. Il n’en reste pas moins qu’une image sollicite la plupart du temps bien plus de 26 couleurs, et que, par conséquent, les images pèsent toujours forcément beaucoup plus lourd que du simple texte.

Notre objectif pour aujourd’hui est d’apprendre à retravailler une image, ce qui nous permettrait d’obtenir à l’arrivée de belles pages internet rapides à charger, sans pour autant avoir dû verser dans le régime « texte sec ».

 

Prenez les choses en main et obtenez un résultat de qualité avec Photofiltre

Le roi des logiciels de traitement d’image, c’est le célèbre et imposant Photoshop. Si vous en disposez déjà, à vrai dire, cet article ne vous sera probablement pas très utile !
Par contre, si Photoshop n’est pas votre ami (il faut savoir qu’il est d’une part très coûteux et d’autre part pas très simple à prendre en main), sachez que tout n’est pas perdu, bien au contraire.

Il existe en effet un autre logiciel d’édition d’image, plus accessible et totalement gratuit, il s’agit, vous l’aurez déjà compris, de Photofiltre, que vous pouvez télécharger ici si ce n’est pas déjà fait.

Commencez par faire de la place en recadrant votre image

Imaginons que je veuille illustrer un article de blog avec une image de 560 ko. 560, c’est déjà trop, une page Internet mettrait trop de temps à s’afficher avec une telle charge sur les épaules. Commençons par voir si nous ne ne pourrions pas nous débarrasser d’une partie de l’image. Voyons ce que nous avons:

Et voici ce que nous pouvons obtenir, avec pour résultat une perte de près de 20% du poids de la photo originelle:

Étudions ensemble pas à pas la démarche à suivre pour arriver à ce résultat.

photofiltre

Repérez au préalable où se trouve le bouton pour ouvrir une image dans le logiciel, l’information sur le format de l’image (cela nous sera utile plus tard), et vérifiez que le zoom sur l’image est bien à 100%, comme ci-dessus: autrement, vous verrez l’image plus petite ou plus grande qu’elle ne l’est, et cela peut vous jouer des tours.

 

Choisissez cet outil dans la barre verticale de droite.

 

Une fois l’outil actif, sélectionnez simplement à la souris la partie de l’image à garder. La zone concernée sera encadrée par des pointillés.

 

Clic droit sur la zone, recadrer, et c’est bon.

 

Je vous recommande d’enregistrer régulièrement le travail effectué. Si besoin est, sauvegardez sous un autre nom de manière à conserver le fichier original intact.

Mais ne nous arrêtons pas en si bon chemin: malgré le découpage, l’image est peut-être encore trop grande dans son ensemble, et vous voudrez peut-être la faire rétrécir sans perdre davantage de contenu. Suivez le guide!

Réduisez la taille sans perdre de pixels: le redimensionnement

Avant d’aborder cette étape, il est bon de vous interroger sur ce que vous comptez faire de votre image. En effet, la taille finale que vous allez lui donner dépendra de l’usage auquel elle est destinée et de l’importance qu’elle devra avoir in situ, en contexte.

Il est également utile de tenir compte de la largeur dont vous disposez pour afficher le contenu de votre page: si votre image est plus large que votre bloc de contenu, le design de votre site risque de s’en trouver déformé.

Néanmoins, quelque soit la finalité, je ne saurai que trop vous conseiller d’éviter les extrêmes. Une image qui fait 2000 pixels de côté est trop lourde pour transiter sur internet (publication, envoi par email…), mais ne tombez pas dans l’excès inverse: à quoi vous servirait une photo de la taille d’un ongle?

Il n’y a pas de règle générale, mais gardez toutefois à l’esprit qu’il vaut mieux éviter de dépasser les 700 voire les 800 px de largeur pour une image d’illustration au sein d’un article ou d’une page. (En revanche, sentez-vous libre de choisir la hauteur qui vous convient, à partir du moment où le thème de votre site le permet.)

Voici comment il vous faut procéder pour réduire la taille de votre image.

poids007

Sans doute vous sera-t-il nécessaire de faire plusieurs essais avant de trouver la taille appropriée. Après l’étape 3, si vous n’êtes pas satisfait, pressez simultanément les touches Ctrl et Z de votre clavier pour annuler la modification de taille, et repartez à l’étape 1.

Par défaut, la case « conserver les proportions » devrait être cochée, mais si ce n’était pas le cas, je vous recommande de le faire avant de toucher à la largeur ou à la hauteur: cela vous permettra d’éviter la déformation de l’image.

Faites « perdre du ventre » à votre image grâce à la compression

Choisissez le bon format d’image

A présent que nous avons passé en revue les options les plus évidentes, intéressons-nous à la nature même de notre image, le format, afin de voir si nous ne pourrions pas en retirer un avantage.

Les images que vous êtes amené à manipuler possèdent, de base, un format défini, mais qui peut être changé à volonté. Vous verrez passer beaucoup d’images ayant l’un de ces trois formats (ou extensions): JPG, PNG. ou GIF.
L’information est facile à obtenir avec Photofiltre, comme vous avez pu le voir sur une précédente capture d’écran. Mais comment choisir entre les trois? Voici un petit récapitulatif des inconvénients et avantages de chacun:

  • JPG: C’est sans doute le format d’image le plus utilisé sur Internet, car bien exploité, il permet d’obtenir un bon compromis entre le poids et la qualité. Son gros défaut, c’est qu’il ne gère pas la transparence, néanmoins, comme vous serez sans doute amené à utiliser beaucoup d’images JPG, et qu’il est pleinement adapté à la compression, c’est avec lui que nous poursuivrons notre travail.
  • PNG: Ce format est particulièrement axé sur la qualité de la photo, ce qui a pour conséquence de générer des images souvent un peu lourdes. Néanmoins, il gère la transparence, ce qui en fait le format de prédilection pour des éléments graphiques tels que des logos.
  • GIF: Comme le GIF ne supporte que 256 couleurs, les images enregistrés dans ce format sont particulièrement légères, mais si elles comportent à la base de nombreuses nuances de couleurs, le résultat sera forcément médiocre. A l’instar du PNG, le GIF gère la transparence. A réserver pour des illustrations, des éléments graphiques, ou des photos en noir et blanc.

A présent que vous y voyez un peu plus clair (du moins je l’espère !), nous allons pouvoir passer aux travaux pratiques. Voyons comment nous pouvons compresser notre image grâce à l’enregistrement au format JPG.

Exploitez le potentiel du format JPG

Arrivé à cette étape, vous constaterez qu’une boîte de dialogue vous demande de choisir un taux de compression. Il s’agit en fait tout simplement d’optimiser le poids de l’image sans (trop) toucher à sa qualité visuelle. Ou, pour le dire autrement, cela consiste, en résumé, à se débarrasser des informations superflues (les pixels dont la suppression ne provoque aucun changement à l’œil nu).

Dans le cas d’une image JPG, le taux de compression idéal avec Photofiltre tourne autour de 80%: pas de dégradation de l’image, mais un affichage plus rapide sur une page internet.

Mais, bien entendu, ce n’est pas une règle immuable! Un taux de compression de 50%, par exemple, pourrait ne pas être très visible sur une première image et être totalement désastreux sur une seconde image.

La seule chose vraiment essentiel à retenir, c’est que plus vous baisserez le pourcentage, plus l’image perdra en qualité. Prenez quelques minutes pour y réfléchir, faites plusieurs essais si besoin est et finalisez la sauvegarde.

Une fois tout ceci fait, vous devriez être en possession d’une image agréable à l’œil, mais avec un poids tournant autour de 100 ko, voire moins. Dans le cas contraire, essayez de baisser un peu plus la qualité de l’image lors de la compression.

Pas de commentaires

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Share This