le blog d'albâtre Blog d'Albâtre

Pelican-image-process - Plugin Pelican pour automatiser le traitement des images

Publié le mercredi 13 août 2025
Par Jean-charles hoarau

Dans Services

Etiquettes: Service blog ssg pelican plugin

Pelican-image-process vous permet d'automatiser le traitement des images selon leur attribut de classe. Utilisez ce plugin pour réduire le poids général de votre page . Vous éviterez aussi d'utiliser Gimp ou Photoshop chaque fois que vous incluez une image dans votre article.

Installation

Comme pour tous les plugins, j'ajoute celui-ci dans mon fichier requirements.txt et ensuite je reconstruit pelican-plugins

requirements.txt

pelican-similar-posts
pelican-touch
pelican-liquid-tags
pelican-sitemap
pelican-image-process

Commande shell

docker compose build pelican

Paramétrage

Il y a beaucoup de manière d'utiliser ce plugin. Je m'en sert pour générer des images responsive à partir de mes inages fournies.

j'ajoute donc dans pelicanconf.py les lignes suivantes

IMAGE_PROCESS = {
    "crisp": {
        "type": "responsive-image",
        "srcset": [
            ("1x", ["scale_in 800 600 True"]),
            ("2x", ["scale_in 1600 1200 True"]),
            ("4x", ["scale_in 3200 2400 True"]),
        ],
        "default": "1x",
    },
    "large-photo": {
        "type": "responsive-image",
        "sizes": (
            "(min-width: 1200px) 800px, "
            "(min-width: 992px) 650px, "
            "(min-width: 768px) 718px, "
            "100vw"
        ),
        "srcset": [
            ("600w", ["scale_in 600 450 True"]),
            ("800w", ["scale_in 800 600 True"]),
            ("1600w", ["scale_in 1600 1200 True"]),
        ],
        "default": "800w",
    },
}

Ce paramétrage va créer trois images à partir del'image d'origine et les placer dans des dossiers par taille.

Utilisation

Pour utiliser ce plugin, il faut légèrement modifier les balises images.

Par exemple :

![OliveTin conteneur]({static}/images/OliveTin2.webp "Page OliveTin de gestion des conteneurs docker du serveur")

deviens

![OliveTin conteneur]({static}/images/OliveTin2.webp "Page OliveTin de gestion des conteneurs docker du serveur"){: .image-process-large-photo}

cette modification va créer trois dossier dans le dossier images/derivatives :

  • images/derivatives/large-photo/600w,
  • images/derivatives/large-photo/800w,
  • images/derivatives/large-photo/1600w.

Une copie de l'image d'origine dans les chaque format sera mis dans chaque dossier.

Le plugin gérère aussi une balise html img avec les trois formats

<img alt="OliveTin conteneur" class="image-process-large-photo" sizes="(min-width: 1200px) 800px, (min-width: 992px) 650px, (min-width: 768px) 718px, 100vw" src="https://blog.albat.re/images/derivatives/large-photo/800w/OliveTin2.webp" srcset="https://blog.albat.re/images/derivatives/large-photo/600w/OliveTin2.webp 600w, https://blog.albat.re/images/derivatives/large-photo/800w/OliveTin2.webp 800w, https://blog.albat.re/images/derivatives/large-photo/1600w/OliveTin2.webp 1600w" title="Page OliveTin de gestion des conteneurs docker du serveur">

Ce qui rend mes images plus légères et responsive sans avoir à les travailler une à une en dehors du site.

à bientôt

Articles similaires