Réduire la taille de vos photos en deux étapes

Dans le tutoriel d’introduction à l’optimisation des images pour le web nous avons déjà discuté de l’importance du traitement de vos images avant de les importer sur votre site web. Aujourd’hui nous allons parler de deux étapes simples par lesquelles vous devez passer pour réduire la taille de vos photos avant de les importer sur un site web.

Réduire la taille de vos photos n’est qu’une étape dans tout le processus d’optimisation des images. Rappelons que ce processus comprend trois étapes :

  • L’aspect visuel : la sélection des images et les retouches si nécessaire
  • L’allègement du poids de l’image
  • L’optimisation  pour améliorer le référencement organique

Pourquoi réduire la taille des photos ?

Selon Google, 53% des sessions sont abandonnées si un site mobile prend plus que 3 secondes à charger.

Il existe plusieurs facteurs qui peuvent ralentir votre site en l’occurrence :

  • La qualité de votre hébergement
  • Le nombre de requêtes vers votre serveur
  • La structure de votre site web (le code)
  • Le poids des images
  • Etc.

Selon le httparchive.org, en date du 1er décembre 2017, une page web pesait en moyenne 3 464 Ko. 1 826 Ko (53%) était attribué aux images seulement. Par conséquent, alléger vos images vous permettra d’améliorer la vitesse de téléchargement de vos pages web même si vous n’avez pas effectué d’améliorations techniques. Alléger vos images est une tâche simple, qui ne nécessite pas de connaissance en HTML/CSS, ni l’utilisation de Photoshop.

Rappel de notions importantes

Avant de rentrer dans le vif du sujet, rappelons quelques notions importantes.

Le poids des images

Un fichier occupe un certain espace dans l’emplacement où il se trouve (disque dur, clé USB, base de données, etc.).  Cet espace représente le poids de l’image qui se mesure en octet. À titre de rappel :

  • un octet = 8 bits
  • 1 024 octets = 1 Kilo octet (Ko)
  • 1 024 Ko = 1 Méga octet (Mo)

Le temps de téléchargement des images dépend du poids de l’image et de la rapidité de votre connexion internet.

En général, une image est considérée comme trop lourde si elle pèse plus de 200 Ko.

Avant de pouvoir afficher les images que vous importez sur votre site internet, les fureteurs internet (Internet Explorer, Google Chrome ou Firefox) de vos internautes doivent d’abord télécharger les images. Le temps de téléchargement sera différent pour chacun des internautes et dépendra de la qualité de leur connexion internet respective.

Par exemple, une image de 20 Mo prendrait 1 heure 37 minutes à télécharger avec une connexion internet super lente (28,8Kbit/seconde) comparativement à 2 secondes si l’internaute visite votre site web avec une connexion 4G.

temps de téléchargement d'un fichier pour plusieurs connections internet
Source : http://www.download-time.com/
Préparez-vous au pire scénario et optimisez vos images pour qu’elles téléchargent dans des délais raisonnables quelque soit la vitesse de connexion des internautes.

Le choix du format a son importance

Voici quelques recommandations pour bien choisir le format de vos images :

  • Si votre image est une photo sans texte, sauvegardez-la en format JPG. Les images en JPG sont généralement moins lourdes que les PNG.
  • S’il s’agit d’une image avec du texte ou des éléments transparents, alors il vaudrait mieux utiliser le format PNG.
  • Le format GIF est parfait pour les images animées et les images simples.

Je vous recommande de lire le tutoriel sur les différents formats d’images sur web pour en savoir plus sur le choix les formats les plus populaires.

Alléger vos images sans perdre en qualité

L’optimisation du poids des images est un processus en deux étapes que vous devez suivre après avoir retouché vos photos.

Étape 1 : Redimensionner l’image

Le premier pas consiste à réduire ou rogner l’image dans les dimensions dont vous avez besoin. Dès cette première étape, vous allez éliminer les octets superflus.

Dans l’article 20 banques d’images gratuites, je partageais ma liste de banques d’images gratuites préférées. La plupart de ces images pèsent plus de 1 Mo et sont de très grandes dimensions. A moins que vous souhaitiez imprimer ces photos, vous n’avez pas besoin d’images aussi lourdes pour votre site web.

Par expérience, l’image la plus grande que j’ai utilisée sur un site web faisait 1300px de large. On l’avait utilisée comme une image de fond. Pour des photos que vous utilisez dans le corps du texte, vous n’avez probablement pas besoin de quelque chose d’aussi grand.  Je vous encourage à demander à votre développeur web de vous fournir les dimensions optimales à utiliser sur votre site web.Vous pouvez aussi « deviner » les dimensions optimales de votre site en testant plusieurs dimensions par vous-même.

Chaque site web est différent mais en général j’essaie d’utiliser des images qui ne dépassent pas 640px de large.

Pensez à faire une copie de l’image originale au cas où vous ayez besoin de tout recommencer à zéro.

Etape 2 : Compresser l’image pour l’alléger encore plus

TinyPNG est un site web qui permet de compresser à la fois des images JPG et PNG gratuitement. Vous pouvez importer jusqu’à 20 images à la fois. Chaque image doit peser 5 Mo au maximum, d’où la nécessité de redimensionner vos images avant de les compresser.

Démonstration

Voici un comparatif d’une image que j’ai optimisée dans le cadre du tutoriel optimiser une image pour le web sans Photoshop.

J’ai téléchargé l’image originale à partir de SplitShire. Elle pesait 19.5Mo et faisait 5 781 pixels de large pour 3 854 pixels de long. Pour les fins de la démonstration, j’ai dans un premier temps modifié ses dimensions pour une largeur de 1024px (la hauteur est calculée automatiquement en fonction du ratio largeur / hauteur de la photo originale) et je l’ai compressée à 30%.

Vous pouvez voir que la différence de la qualité de la photo originale et sa version finale est négligeable. Par contre, l’impact en terme de vitesse de téléchargement est impressionnant.

Comparatif de la réduction d'une image après le processus d'optimisation sans Photoshop
Cliquez sur l’image pour la voir en grand

 

Je vous recommande de suivre ces étapes pour toutes vos images car croyez-moi sur le web, on ne fait jamais trop d’économie d’octets. Réduire la taille d’une image pour le web revient à faire un arbitrage entre la qualité en dessous de laquelle vous n’êtes pas prêt à aller et le poids de l’image (qui détermine sa vitesse de téléchargement). L’image idéale est celle dont la qualité est acceptable et qui charge rapidement.

Il faut faire attention à ne pas trop compresser vos JPEG pour ne pas perdre trop de qualité.

Donnez votre opinion! en tant qu’internautes, est ce que vous préféreriez un site web avec de belles grandes images qui prend plus de temps à s’afficher ou un site très rapide dont les images sont de moins bonne qualité?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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