Utilisation du plugin image-process dans Pelican

Une analyse d'une page créée avec Pelican à l'aide de LightHouse a permis de voir qu'un des points majeurs à corriger pour la performance de l'affichage était de correctement redimmensionner les images.

En effet, l'envoi d'image trop grande par rapport à l'affichage de l'écran de l'utilisateur ne sert à rien et consomme plus de traffic réseau que nécessaire.

État initial

Installation du plugin

La subtilité se situe dans le fait que le plugin s'appelle image-process sur son repo github, tandis que le lien qui est fait depuis le repo des plugins de Pelican, est appelé image_process. Il faut donc inclure le plugin ainsi :

PLUGIN_PATHS = ['/home/yaap/tools/pelican-plugins']
PLUGINS = ['image_process']

Utilisation

Puisque j'utilise le thème "Flex", la largeur maximal du viewport est de 760 pixels. Cela veut dire qu'il ne sert à rien d'envoyer des images avec une largeur supérieure à 760 pixels.

J'ai donc installé la configuration suivante dans pelicanconf.py :

IMAGE_PROCESS = {
    'article-image': {'type': 'responsive-image',
                      'sizes': '(min-width: 800px) 760px, (min-width: 650px) 600px, (min-width: 350px) 300px, 100vw',
                      'srcset': [('300w', ["scale_in 300 300 True"]),
                                 ('600w', ["scale_in 600 600 True"]),
                                 ('760w', ["scale_in 760 760 True"]),
                                 ],
                      'default': '760w',
                      },
    }

Je ne suis pas sûr de tous les paramètres, mais j'ai voulu proposer des images inférieure à 760 pixels, et qui se redimmensionne à peu près correctement pour prendre presque tout le viewport sur les écrans plus étroits.

Résultats

Et maintenant, la prochaine étape pourrait être de convertir les images en WebP…