Optimiser ses images pour avoir un site rapide


Lors de la rédaction de cet article, il était plus simple pour nous d’utiliser le pronom « je ». Mais il a été coécrit (dans la joie et la bonne humeur) par Diane Wattiez, intégratrice web de génie de l’agence Mahii conception, et Cécile Uzel, Atelier graphique qui fait mouche.

L’intérêt

Quel que soit le site web, si celui-ci met 3h à s’afficher, cela nuira à votre visibilité : les gens sont de moins en moins patients pour ce type d’attente. C’est vraiment dommage de mettre de l’argent et des efforts dans un site pour que celui-ci ne soit même pas visité pour une raison aussi bête. D’autant plus qu’un site rapide sera également mieux référencé et utilisera moins d’énergie. Je pense que toutes les raisons sont là pour réellement mettre un point d’honneur à s’occuper de cette facette, souvent négligée, de votre site.

Parmi toutes les raisons qui peuvent impacter la vitesse d’un site se trouve le poids des pages. Et les deux éléments les plus importants à prendre en compte dans le poids d’un page sont :

  • les vidéos (dont il ne sera pas sujet ici)
  • les images

On va parler de deux choses concernant les images : 

  • Leur poids  qui se calcule en Kilo octet (ko) voir Mega octet (Mo) pour les plus lourdes 
  • Leur dimension calculée en pixel (px)

Poids des fichiers (Rappel)

Du plus petit au plus grand, en octet :

1 o <  1 ko < 1 mo < 1 go < 1 to

Dimension des images (rappel)

La dimension d’une image est calculée en pixel. Les pixels ne peuvent pas être convertis en cm.

Les images png et jpg ne peuvent pas être agrandies sans perte de qualité / pixellisation. Par exemple : si vous avez une grande photo que vous rétrécissez. Vous ne pourrez plus la ré-agrandir sans perdre de la qualité : elle sera pixelisée.

Les illustrations vectorisées sont créées à partir d’outils spécifiques tel que Illustrator. Les logos sont souvent créés en vecteur (convertible ensuite en PNG ou JPG si besoin) car ils ont la propriété de pouvoir s’agrandir à l’infini sans se pixeliser (très utile lorsqu’il faut décliner une illustration sur différents formats). Pour le web, on les utilise notamment sous le format SVG.

Voici les différentes méthodes pour bien optimiser vos images.

Spoil alert !

Diane a créé un outil à installer sur son ordinateur pour redimensionner et optimiser automatiquement ses images. On a essayé de détailler la démarche simplement pour que ce soit accessible au plus grand nombre, mais cela nécessite quand même des manipulations un peu techniques. Si cela n’est pas votre truc, nous détaillons avant d’autres démarches et astuces différentes.

Redimensionner les images

Mettre une image plus grande que la taille réelle de l’affichage est contre productif qui lui est destiné = à optimisation égale, son poids sera toujours plus important. En plus d’être plus lourde et de prendre plus de temps à se charger, elle va également être recalculée par le navigateur pour apparaître dans une nouvelle taille, ce qui peut impacter le rendu de l’image. 

Quelle dimension pour mon image ?

La principale problématique est de savoir quelle est la taille idéale pour votre image. Le plus simple c’est de demander directement à votre développeur ou votre graphiste les dimensions finales des images de votre site. Sinon voici quelques méthodes pour définir la bonne taille pour votre image. 

La méthode approximative

Vous pouvez estimer la taille nécessaire à l’affichage de votre image à l’œil, si vous ne voulez pas vous servir d’outils. 

Vous pouvez utiliser quelques règles de logique pour cela : 

Votre image doit s’afficher sur toute la largeur de l’écran : il vous faudra une image de 1920px de large afin qu’elle s’affiche correctement sur les écrans HD (à multiplier par deux pour les écrans retina).  

Calculer en fonction de la taille du container : sur les sites internet, vous avez souvent une largeur de contenu qui correspond à la zone où s’étend votre contenu. A droite et à gauche vous avez le plus souvent des marges.

Le container sur le site de Diane et Cécile

Vous devez connaître la taille de votre container pour cette méthode, soit vous le demandez à une personne compétente et vous le notez quelque part, soit vous utilisez l’inspecteur de site (voir chapitre suivant sur la méthode précise)

Ensuite, il suffit de juger à l’œil la proportion de votre image dans le container. 

Par exemple, si elle s’affiche sur toute la largeur du container, il suffit de prendre la largeur du container. Soit 1080px dans notre exemple. 

Si elle s’affiche sur la moitié ce sera 50% de la largeur du container, donc 540px. Etc. 

La méthode précise

Vous pouvez utiliser l’inspecteur de votre navigateur pour connaître la dimension exacte de votre image. Pour Edge, Chrome et mozilla (et sans doute d’autres), il suffit d’utiliser le raccourci F12 de votre clavier pour l’ouvrir. 

Si vous êtes sur safari, vous devez d’abord activer la fonctionnalité dans les préférences. 

Une fois l’inspecteur ouvert, cliquez sur le petit bouton en haut à gauche de l’inspecteur : 

Puis, survolez l’image en question :

Vous avez la dimension dans l’infobulle au-dessus de l’image. Ici la dimension est de 339px de large pour 338px de haut.

Comment redimensionner une image ?

Avec Photoshop

Ça se fait au même moment que l’enregistrement de l’image. Pour le choix du format, voir dans le chapitre suivant : l’optimisation

  1. Importer votre image sur Photoshop
  2. Fichier > Exportation > Enregistrer pour le Web (hérité)
  3. Redimensionner l’image, en pixel, dans la section”taille de l’image”

Avec Illustrator

Globalement, si vous avez la suite Adobe, je vous recommande plutôt de passer par Photoshop pour recadrer vos images. Mais si vous n’avez qu’Illustrator, voici la démarche :

  1. Importer votre image sur Illustrator
  2. Cliquez sur l’outil de recadrage à dans la barre d’outil à gauche. 
  3. En laissant l’outil de recadrage sélectionné, cliquer-glisser ensuite sur la feuille pour recadrer l’image. La partie hors de la sélection sera coupée.
  4. Fichier > Exportation > Enregistrer pour le Web (hérité) :
  5. Redimensionner l’image dans la section”taille de l’image” (voir dans le chapitre suivant pour le choix du format)

Avec Paint

Pour ceux qui ont windows et qui n’ont pas illustrator ou Photoshop, vous pouvez redimensionner vos images par l’outil Paint (par défaut dans votre ordinateur).

  1. Ouvrir votre image sur Paint
  2. Cliquer sur l’outil de redimensionnement
  3. Cliquer sur pixel et rentrer vos mesures
Équivalent pour Mac

N’ayant pas de Mac, je ne peux pas vous détailler personnellement la démarche. Mais, après recherches, je vous propose de passer par l’outil Aperçu. Vous trouverez les informations nécessaires via ce LIEN

Avec WordPress

WordPress inclut un outil bien pratique pour redimensionner vos images directement dans l’administration du site. 

  1. Rendez-vous dans la bibliothèque de médias → menu “Medias” 
  2. Cliquez sur l’image à redimensionner, puis sur le bouton → “Modifier l’image” 
  3. Dans la colonne de droite, trouvez la section “REDIMENSIONNEMENT DE L’IMAGE”, puis modifier les dimensions dans les champs prévus à cet effet, si vous changez la largeur, la hauteur s’adapte automatiquement et vice versa pour ne pas déformer l’image :
  1. Cliquez ensuite sur le bouton “Redimensionner” et l’image sera enregistrée dans les nouvelles dimensions. 

Enregistrer et optimiser ses images

Choix des formats

Ça dépend des images.

Format pour les images sans fond transparent avec beaucoup de couleurs (type photos) .jpeg
Format pour les images avec fond transparent ou les images avec peu de couleurs (types logo ou icônes).png
Format des images animées – Déconseillés, il existe d’autres formats bien meilleurs pour cette utilisation (non abordé dans cet article).gif
Format pour les illustrations/logo/icônes vectorielles (pour les initiés).svg

Exemple en images :

À enregistrer en jpg
À enregistrer en png ou svg

Le poids des images

Idéalement, les images ne devraient pas peser plus de :

Poids image plein écran : 400 ko max

Poids image dans la page : 100 ko max

Optimiser ses images

Les outilsFormatsLes +Les –
CompressorEn lignejpg, png, gifSimple à utiliserTraite jusqu’à 20 images en même tempsEn ligne, donc pas éco-conscient ***
Besoin d’internet
RiotÀ installerjpg, pngPas besoin d’internetGratuitSimple à utiliserIl faut traiter les images une à une
Outil de DianeÀ installerjpg, png, svgGratuit
Redimensionner et optimiser en même temps : gain de temps +++
Traite plusieurs fichiers en même temps
Directement sur son ordinateur
Pas besoin d’internet
Installation complexe (même si tout est bien expliqué plus bas)
Demande l’utilisation de l’invité de commande (outil un peu technique)
SVGomgEn lignesvgSimple d’utilisation
Multiples options pour les plus initiés
En ligne, donc pas éco-conscient ***
Besoin d’internet
*** Lorsqu’on cherche à développer son site de manière écologique, cela peut avoir de l’importance. Avec ces outils en ligne, votre fichier devra être importer et télécharger plusieurs fois à travers le net, donc c’est plus énergivore.

Avec Photoshop et Illustrator (PNG, JPG)

  1. Fichier > Exportation > Enregistrer pour le Web (hérité)
  2. Redimensionner l’image dans la section”taille de l’image” (voir dans le chapitre suivant pour le choix du format), le poids s’affiche en bas de l’image à gauche
  3. Choisir le format approprié selon l’usage
  4. Enregistrer
  5. À optimiser avec l’un des outils ci-dessus

Avec Paint

  1. Fichier > Enregistrer sous > Choisir le format adapté
  2. Enregistrer
  3. À optimiser avec l’un des outils ci-dessus

Avec Illustrator, format SVG

Une image SVG sera forcément une illustration vectorielle. J’utilise Illustrator, il existe d’autres outils (tel qu’Inkscape, gratuit).

Pour qu’un SVG soit léger, il faut qu’il y ait le moins de point de vecteurs possible. Selon votre dessin, il faudra donc jouer avec les pathfingers et la simplification des lignes pour avoir le résultat le plus optimal. Je suis en train d’écrire un autre article entièrement sur le sujet.

Ensuite pour bien enregistrer votre image :

  1. Fichier > Exporter > Exporter sous
  2. Choisir les options : style intégré, vectoriser, incorporer, unique
  3. Noter 2 comme décimales
  4. Cocher sur minifier, responsive
  5. Cliquer sur ok
  6. Optimiser le SVG crée via l’outil SVGomg (pour les initiés, n’hésitez pas à regarder les options qui vous intéressent, mais ceux par défaut font déjà très bien le job)

Avec des outils

RIOT : Radical Image Optimization Tool

Voici un petit logiciel qui vous permet d’optimiser vos images en quelques clics : 

RIOT – Radical Image Optimization Tool (riot-optimizer.com)

  1. Installez le logiciel 
  2. Ajoutez une photo
  1. Choisissez la nouvelle dimension de votre image
  1. Comparez la version avant / après. Vous pouvez faire varier la qualité pour les JPG ou le nombre de couleurs pour les PNG, vous avez le poids final de l’image au dessus de l’image de droite
Qualité pour les jpg



Nombre de couleurs pour les png (passez d’abord la “color reduction” à 256 colors palette)

  1. Enregistrez l’image optimisée à l’aide du bouton “Save”. 

ImageOptim

Pour les utilisateurs de Mac vous pouvez utiliser Image Opti il existe une documentation en ligne pour vous aider à l’utiliser. 

Astuces supplémentaires

  • Privilégier l’usage d’illustrations aux photos. Ensuite, selon le type d’illustrations, vérifier le format le plus léger (le format SVG ne sera pas automatiquement le plus optimiser, même s’il est très aimé par les développeurs et permet une netteté sans égale).
  • Vous pouvez également choisir de limité le nombre de couleurs de vos photos. Par exemple en les passant en noir et blanc. Si vous souhaitez quand même une couleur, vous pouvez rajouter un filtre coloré. par exemple :

Avec node et gulp

J’utilise régulièrement Gulp pour compiler mes projets d’intégration. C’est un outil d’automatisation de tâches.

Je vous ai donc préparé un petit script d’optimisation d’image à configurer en fonction de vos besoins 😉 il sera à lancer à l’aide de la console mais ne vous en faite pas nous allons vous expliquer pas à pas comment l’utiliser !

Ce script est contenu dans un dossier composé comme cela : 

Cet outil va surveiller le dossier “src” et lancer les actions suivantes à chaque fois que vous déposez une image dedans : 

  • si l’image est un SVG : elle sera optimisée (de la même manière que SVGomg) puis rangée dans le dossier “minified”
  • si l’image est en jpg ou png elle sera découpée en 3 formats : 
    • 1920px de large si l’image originale est plus large que 1920px puis rangée dans le dossier “resized” avec le suffixe “-fullwidth”
    • 1100px de  large si l’image originale est plus large que 1100px puis rangée dans le dossier “resized”avec le suffixe “-1100”
    • 600px de large si l’image originale est plus large que 600px puis rangée dans le dossier “resized”avec le suffixe “-600”
    • 100px X 100px (recadrée)  puis rangée dans le dossier “resized” avec le suffixe “-thumb”
    • toutes les versions redimensionnées et recadrées seront optimisées
    • toutes les versions sont converties en webp 

Vous avez aussi une variante qui prend juste vos images originales contenues dans le dossier “src” et les optimise (sans les redimensionner) avant de les ranger dans le dossier final. 

  1. Tout d’abord vous devez installer nodejs sur votre ordinateur : 

Node.js (nodejs.org) 

Prenez la version LTS et c’est parti ! Lancer le programme d’installation et suivez les étapes. 

  1. Il vous faudra aussi ImageMagik si jamais vous souhaitez utiliser la fonction qui redimensionne automatiquement les images : 

Avec Ubuntu :

apt-get install imagemagick

apt-get install graphicsmagick

Avec Mac OS X (avec Homebrew) :

brew install imagemagick

brew install graphicsmagick

Avec Windows :

ImageMagick – Download

Pendant l’installation, cochez bien la case « add application directory to your system path » et  « Install legacy utilities (e.g. conert) » :

Pour vérifier qu’il a bien été installé, ouvrez votre invité de commande ou PowerShell (window) depuis le menu d’application de votre ordinateur

 et tapez :

convert -help

Voici le résultat que vous devriez obtenir :

  • Ensuite, téléchargez le projet sur github depuis le bouton “code”
  1. Vous devriez récupérer un simple dossier compressé, décompressez-le. 

Ouvrez votre invité de commande ou PowerShell (window) avec les droits d’administrateur :

Et entrez cette ligne de commande : 

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

Acceptez ensuite en écrivant T pour tout acccepter, suivi de la touche entrée. Cela va vous permettre de lancer les scripts.

  1. Nous allons installer Gulp sur l’ordinateur en tapant cette ligne de commande :
npm install -g gulp
  1. Toujours dans l’invité de commande tapez la commande “cd” suivie du chemin absolu de votre répertoire. Pour le trouver, cliquez dans la barre d’adresse de votre navigateur de fichier et copier – coller le lien vers votre dossier.

Par exemple : 

  1. Vous venez de vous placez dans le dossier, maintenant tapez : 
npm install

Ex :


Cela va installer les dépendances nécessaires à notre outil,cela peut prendre quelques instants. 

  1. Dernière étape, lancez la ligne de commande :
gulp default


Pour vérifier son fonctionnement, ajoutez simplement une image dans le dossier “src” et allez voir dans les dossiers “resized”, “minified” et “final”.

  1. Pour arrêter le script utilisez le raccourci : ctrl + C 

Vos images sont prêtes pour votre intégration, optimisées et redimensionnées aux bonnes tailles ! 

Pour lancer une simple optimisation sur vos images sans passer par les phases de redimensionnement, lancez simplement la commande gulp simple à la place de gulp default. 

Utilisation du script

Par la suite, si vous avez de nouveau besoin d’utiliser le script, refaires uniquement les étapes 6 à 8 : ouvrez votre invité de commande (ou PowerShell), déplacez vous dans le dossier avec la commande “cd’, lancez la tâche default ou simple avec  gulp default ou  gulp simple  et déposez vos images dans le dossier “src”. 

Pour aller plus loin : changez les options de redimensionnement (nécessite des compétences en développement)

Toutes les tâches sont configurées dans le fichier “gulpfile”. 

Ces tâches sont précédées de commentaires. Voici par exemple la tâche qui permet de redimensionner les images en 1920px de large max : 

// Redimensionne les images MAX 1920px de large
function resize1920(cb) {
  gulp.src('./src/*.{jpeg,jpg,png}')
  .pipe(newer('./resized'))
  .pipe(imageResize({
      imageMagick: true,
      width : 1920, // <==== CHANGER LA LARGEUR MAX ICI
      crop : false,
      upscale: false
    }))
    .pipe(rename({
      suffix: '-fullwidth' // <==== Changer le suffixe des images ICI
    }))
    .pipe(gulp.dest('./resized'));
  cb();
}

Pour changer la largeur max, modifier la valeur de width:1920 par la largeur souhaitée en px. 

Vous pouvez également changer le suffix, dans l’exemple “-fullwidth” pour renommer l’image différemment. 

Vous pouvez également changer le nom de la fonction “resize1920” mais dans ce cas n’oubliez pas de la changez également dans la déclaration des tâches : 

// Créer les tâches
task(resize1920);

Et dans la liste des tâches à exécuter : 

// Surveille le dossier SRC et exécute toutes les tâches
exports.default = function() {
  // La tâche par défaut surveille les différents dossiers
  watch('src/*.{jpeg,jpg,png}', gulp.series(resize1920, resize600, thumb)); // Ici on change les tâches de redimensionnement

Vous pouvez également ajouter une nouvelle tâche de redimensionnement, dans ce cas, copiez la fonction resize1920 et changez ses paramètres à votre convenance. N’oubliez pas de lui donner un nouveau nom ! 

Ajoutez ensuite la fonction à la liste des tâches : 

// Créer les tâches
task(resize1920);
task(resizeXXX);

Puis ajoutez la dans la tâche principale pour qu’elle s’exécute automatiquement : 

// Surveille le dossier SRC et execute toutes les tâches
exports.default = function() {
  // La tâche par défaut surveille les différents dossiers
  watch('src/*.{jpeg,jpg,png}', gulp.series(resize1920, resizeXXX, resize600, thumb)); // Ici on change les tâches de redimensionnement

Maintenant, quand vous lancerez la commande  “gulp default” vous aurez une version supplémentaire de votre image. 

Erreurs courantes

Si vous rencontrez des erreurs : 

  • vérifiez que vous avez correctement installer imagemagick avec les paramètres de la capture d’écran 
  • relancez votre invité de commande / powerShell 
  • dans votre invité de commande : arrêtez la tâche en cours avec le raccourci ctrl + Z et relancez la tâche 

Si votre erreur est toujours là, laissez moi un petit commentaire, je tenterais de vous aider.

Aller au contenu principal