Convertir ses fichiers médias pour le web

Images

C’est bien d’avoir des images en format .webp sur Internet, parce que c’est bien compressé, donc ça pèse pas lourd, et donc c’est plus rapide, moins couteux, etc. Avec des dimensions adaptées à l’affichage.

Vidéos

Pour les vidéos, privilégiez le .mp4 avec un codec H.264+AAC, en 480p ou 720p selon la taille affichée.

”Gifs”

Pour les images animées, il vaut mieux éviter le format .gif, pas optimisé pour le web. Préférer un .webp animé voire une vidéo.

Conversion côté serveur

Le plus simple, c’est lorsque le site recevant les fichiers les optimise lui-même, dans ce cas : rien à faire. C’est par exemple le cas avec certains CMS (Wordpress, Sanity…) ou réseaux sociaux (Instagram, Youtube…).

Conversion manuelle

Vous pouvez aussi convertir vos fichiers un par un en allant sur des sites comme Ezgif ↗ ou Squooch ↗, en utilisant Affinity ↗, ou avec le plugin Webp pour Photoshop ↗.

Conversion groupée

Si vous avez plusieurs fichiers dans plusieurs dossiers, alors le mieux est d’utiliser votre terminal pour tout convertir d’un coup. Je vais partager ici ma méthode. Ces commandes parcourent automatiquement le dossier courant et tous ses sous-dossiers, en conservant la structure originale.

Prérequis

• MacOS/Linux
• Homebrew
• webp/ffmpeg pour Homebrew

Installations (si nécessaires)

1. Installer Homebrew ↗ (gestionnaire de paquets) :

   • Ouvrir le terminal
   • Coller ceci :

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

   • Attendre que ça soit fini

2. Installer les outils nécessaires

   • Pour les images brew install webp
   • Pour les vidéos brew install ffmpeg

3. Se rendre dans le dossier où se trouvent les médias

   • Soit en faisant clic-droit sur le dossier puis Services › Nouvel onglet de terminal
   • Soit via le terminal en tapant cd ~/Desktop/projet/medias avec l’adresse correspondante, et toujours relative à l’emplacement où votre terminal est. Vous pouvez avancer dossier par dossier, et vérifier votre avancée en tapant ls après chaque mouvement. Pour remonter à un dossier parent, c’est cd ../

Commandes

Une fois que tous ceci est fait, convertir tous les médias du dossier dans lequel votre terminal est placé et de ses sous dossiers.

Attention à bien vérifier les options sous la commande, et gardez des copies de vos fichiers originaux ailleurs.

find . -type f \
  \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) \
  ! -name "._*" -print0 \
  -exec sh -c '
    for img; do
      echo "Conversion image : $img"
      out="${img%.*}.webp"
      cwebp -q 80 -resize 1200 0 \
      "$img" -o "$out" && \
      rm "$img" && \
      echo "✅ $out"
      echo "---------------------------------------"
    done
  ' _ {} +

find . -type f \
  \( -iname "*.mp4" -o -iname "*.mov" -o -iname "*.mkv" -o -iname "*.avi" \) \
  ! -name "._*" -print0 | \
  while IFS= read -r -d '' file; do
    tmp="${file}.tmp.mp4"

    ffmpeg -nostdin -y -v 10 -i "$file" \
      -vf "scale=-2:720:flags=lanczos" \
      -c:v libx264 -preset medium -crf 23 -profile:v high -pix_fmt yuv420p \
      -c:a aac -b:a 128k \
      -movflags +faststart \
      "$tmp"

    if [ $? -eq 0 ]; then
      mv "$tmp" "$file"
      echo "✅ $file"
    else
      echo "❌ $file"
      rm "$tmp"
    fi
  done