Utilisation du plugin image-process dans Pelican
Posté le sam. 18 septembre 2021 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…