Arnaud Lemercier
Arnaud Lemercier

image-optimizer : générez vos images AVIF, WebP et responsive en une commande

On travaille pendant des heures sur les performances d'un site, on optimise les polices, on charge le JS en différé... et pendant ce temps, les images traînent à 800 Ko sans sourciller. Les images sont souvent le poste de poids le plus lourd d'une page web, et pourtant elles restent les grandes oubliées des workflows de développement.

Bonne nouvelle : convertir vos PNG/JPG en AVIF, WebP et générer des variantes responsive n'a rien de complexe. Il suffit d'un outil intégré à votre workflow.

Qu'est-ce que image-optimizer ?

image-optimizer est un package PHP opensource installable via Composer. Il automatise la conversion de vos images sources (PNG/JPG) vers des formats modernes optimisés, avec gestion des tailles responsive et du support retina.

Concrètement, une seule commande va :

image-optimizer qui génère plusieurs formats et tailles d'images

Installation de image-optimizer

Installer l'extension Imagick :

# Ubuntu / Debian
sudo apt install php-imagick

# macOS
brew install imagemagick && pecl install imagick

Installer image-optimizer avec composer :

composer require --dev uxcode-fr/image-optimizer

Configurer image-optimizer

Dans un projet Laravel, publiez le fichier de configuration :

php artisan vendor:publish --tag=image-optimizer-config

Voici un exemple de configuration :

<?php

return [
    'source'      => 'resources/images',      // dossier contenant les PNG/JPG sources
    'destination' => 'public/img',             // dossier de sortie
    'quality'     => [
        'avif' => 60,
        'webp' => 82,
        'jpg'  => 85,
    ],
    'formats'     => ['avif', 'webp', 'jpg'],  // formats de sortie
    'densities'   => [1, 2],                   // variantes densité écran (retina @2x)
    'folders'     => [
        'hero'    => [1920, 1280, 768],        // largeurs générées pour ce dossier
        'product' => [800, 400],
    ],
];

La clé folders définit les largeurs à générer par dossier. Si un dossier n'est pas listé, image-optimizer se contente de convertir les formats sans redimensionner.

Générer les images optimisées

Lancez la commande depuis votre terminal :

vendor/bin/image-optimizer

D'autres options utiles :

vendor/bin/image-optimizer --folder=product  # traite uniquement ce dossier
vendor/bin/image-optimizer --force           # régénère même les fichiers existants
vendor/bin/image-optimizer --clean           # supprime les fichiers sans source correspondante

Vos images optimisées sont disponibles dans public/img/.

Intégrer les images dans votre HTML

Pour exploiter les formats modernes, utilisez la balise <picture> avec des <source> par format :

<picture>
    <!-- AVIF : meilleure compression, support partiel -->
    <source
        srcset="/img/hero/photo-1920.avif 1920w, /img/hero/photo-1280.avif 1280w, /img/hero/photo-768.avif 768w"
        sizes="(max-width: 768px) 100vw, 1280px"
        type="image/avif"
    >
    <!-- WebP : excellent support, très bonne compression -->
    <source
        srcset="/img/hero/photo-1920.webp 1920w, /img/hero/photo-1280.webp 1280w, /img/hero/photo-768.webp 768w"
        sizes="(max-width: 768px) 100vw, 1280px"
        type="image/webp"
    >
    <!-- JPG : fallback universel -->
    <img
        src="/img/hero/photo-1280.jpg"
        srcset="/img/hero/photo-1920.jpg 1920w, /img/hero/photo-1280.jpg 1280w, /img/hero/photo-768.jpg 768w"
        sizes="(max-width: 768px) 100vw, 1280px"
        alt="Description de l'image"
        width="1280"
        height="720"
    >
</picture>

Le navigateur choisit automatiquement le format qu'il supporte et la taille la plus adaptée à l'écran — sans JavaScript, sans bibliothèque.

Pourquoi utiliser cette solution ?

Sources