Copyright 2020 TJ Design. All Rights Reserved.

Optimisez vos images et vidéos pour le web

Optimisez vos images et vidéos pour le web
Retrouvez des techniques simples et rapides pour accélérer la vitesse de chargement de votre site.
Nous débutons ce guide par l’optimisation des vidéos et des images pour le web.

1. Optimisez vos images pour le web avec et sans plugin

Avantage : Accroît la vitesse du site en réduisant jusqu’à -97% le poids de vos images

Imaginons que vous soyez en train de composer votre page web et que vous décidiez d’ajouter des images pour accompagner votre texte.
Ces images sortant de Photoshop, elles ne sont pas encore optimisées pour le web.
Nous allons voir comment les rendre légères sans négliger leur qualité et tout ça gratuitement !

Quel format d’image choisir ?

  • Le .PNG : pour toutes les images où il est nécessaire d’avoir un fond transparent.
  • Le .JPG : pour toutes les images sans transparence
  • Le .WEBP : Ce format est à proscrire de base pour vos fichiers, car certains navigateurs ne les supportent pas. Nous verrons par la suite comment bien l’utiliser.
  • Le .GIF : Le format GIF est une catastrophe au niveau du poids. Préférez l’utilisation d’une vidéo !

Quelles dimensions d’image choisir ?

Certains sites chargent une image gigantesque, mais l’affichent en tout petit.
Pour éviter ce problème, il vous faut redimensionner vos images à la taille exacte où elles seront affichées sur votre site.
Votre logo, par exemple, n’a pas besoin de faire 4000 pixels de large s’il est affiché en tout petit dans le menu de votre site.

Pour détecter les images à redimensionner, analysez votre page déjà publiée via l’outil de Cloudinary.

test dimension image

Sur ce test, l’image chargée est de 4032px X 1612px, alors qu’elle n’est affiché qu’en 1351px X 540px.
Adapter cette image aux bonnes dimensions diviserait déjà son poids par 3, avant même d’être compressée !

Compresser vos images avec Photoshop

L’outil principal permettant d’exporter une image pour votre site se nomme « Enregistrer pour le web » (fichier -> exporter ou ctrl+alt+maj+S).

Si vous souhaitez exporter votre image en .PNG, le logiciel n’offre pas de grande possibilité de compression. Il vaut mieux exporter votre image et la passer sur TinyPNG pour une réduction supplémentaire de 50% du poids de l’image.

Pour le format .JPG, sélectionnez une qualité ‘Elevée 60″ pour un bon rapport qualité/poids. En dessous, votre image risque de perdre sa netteté.

export web photoshop

Compresser vos images avant l’upload avec TinyPNG

TinyPNG.com est l’outil le plus performant que j’utilise pour optimiser mes photos ! Une puissance inégalée ainsi qu’un service gratuit vous permettant d’uploader 20 photos à chaque compression. La seule restriction est la taille de la photo qui doit rester en dessous de 5MB.

Si vous téléversez plusieurs images d’un coup, sachez que l’option « Download All » vous permet de tout télécharger d’un coup.

TinyPNG compression image

Optimiser un grand nombre d’images sur WordPress

De nombreux plugins gratuits existent pour compresser toutes les images de votre site et automatiser la compression lors d’une nouvelle mise en ligne.
Cependant, les versions gratuites de ces plugins utilisent un algorithme de compression qui n’est pas pleinement efficace, là où TinyPNG donnera son maximum.

Plusieurs solutions s’offrent ainsi à vous…

WP-SMUSH : Compressez toutes vos images, 50 par 50, avec une compression moyenne

Avantage : pas de limite globale, gratuit

Défauts : compression moyenne, ne compresse pas les images au-dessus de 1MB, vous devez relancer manuellement le processus toutes les 50 images

  • Téléchargez WP-SMUSH ou installez-le depuis WordPress (Extensions -> ajouter) et cherchez « Smush – Compress, Optimize and Lazy Load Images ».
  • Une fois installé et activé, rendez-vous dans le back office de WordPress, survolez la case Médias et cliquez sur WP SMUSH.
  • Lancez l’outil Bulk Smush pour compresser vos images déjà publiées et déjà intégrées

TinyPNG : Compressez 500 images d’un coup, tous les mois, avec une excellente compression

Avantage : gratuit, compression parfaite, 500 images gratuites tous les mois, très rapide

Défauts : attendre plusieurs mois pour compresser les gros sites

  • Téléchargez TinyPNG ou installez-le depuis WordPress (Extensions -> ajouter) et cherchez « Compress JPEG & PNG images ».
  • Une fois installé et activé, créez votre compte Tinify sur Tinypng.com/developers et récupérez la clé API (API Key)
  • Dans le back office de WordPress, survolez la case Réglages et cliquez sur Compress JPEG & PNG images.
  • Entrez votre clé API
  • Survolez la case Médias et cliquez sur Optimisation en masse.
  • Lancez l’outil de conversion.

Si vous avez besoin de plus de 500 images par mois, l’outil vous permet d’évaluer le coût que représente la compression immédiate de toutes vos images.

2. Optimisation des vidéos pour le web

Comment réduire le poids de vos vidéos ?

Convertir votre vidéo vers un format web

Le meilleur format web, supporté par tous les navigateurs, est le .MP4.

  • Téléversez votre vidéo sur l’outil en ligne Keepvid
  • Sur la partie Convert, choisissez Output format : MP4
  • Pour la résolution, choissez le format 1080P pour la meilleur qualité, le 720P pour le meilleur ratio qualité/taille
  • Cliquez sur Start Now et convertissez votre vidéo

Compressez votre vidéo pour le web

Toujours sur le même site, importez votre vidéo récemment mise au format .MP4.

    • Cliquez sur la partie Compress
    • Choisissez la qualité désirée
    • Cliquez sur Start Now et compressez votre vidéo

Pour mon test, la compression a permis d’économiser 50% du poids de la vidéo !
Afin d’économiser un maximum de données, n’hésitez pas à couper le son de la vidéo si il n’est pas important.