Chirpy LQIP

Notes

Dans Chirpy, le LQIP (Low Quality Image Placeholder) est une version minuscule de l’image, affichée floue pendant le chargement de la vraie. Le thème applique le flou tout seul, il suffit de fournir l’image réduite.

1. Générer le LQIP avec ImageMagick

        
magick ecrans.png -resize 20x -strip -quality 30 lqip.webp
echo "data:image/webp;base64,$(base64 -w0 lqip.webp)"

Avec -resize 20x, l’image fait 20 px de large et pèse quelques centaines d’octets, ce qui permet de l’intégrer directement dans l’article sous forme de data URI (sortie de la 2ᵉ commande). Sur une ancienne version d’ImageMagick, remplace magick par convert.

2. Image d’en-tête de l’article (front matter)

        
      
---
title: "Deux écrans en 2560x1440 sur KDE Plasma Wayland"
date: 2026-10-21 12:00:00 +0200
image:
  path: /images/ecrans.webp
  lqip: data:image/webp;base64,UklGRi...   # sortie de la commande
  alt: Deux écrans 2560x1440 sous KDE Plasma
---

3. Image dans le corps de l’article

        
      
![Sortie de kscreen-doctor](/images/kscreen.webp){: width="700" height="400" lqip="data:image/webp;base64,UklGRi..." }

Tu peux aussi donner un chemin vers un petit fichier plutôt qu’une data URI :

        
      
![Alt](/images/kscreen.webp){: lqip="/images/kscreen-lqip.webp" }

Conseils

Donne width et height à l’image, pour éviter le saut de mise en page au chargement.
Convertis l’image principale en WebP : magick ecrans.png -quality 80 ecrans.webp.
Si tu veux, dis-moi quelle image tu comptes mettre (capture de kscreen-doctor, photo du panneau arrière…) et je te prépare les commandes exactes avec les bons noms de fichiers.

Pour info, les images du blog, généralement au format png, sont stockées dans un dossier commun
Autre dossier pose problème ?
Format .webp est mieux que png ?

un dossier commun ne pose aucun problème. Chirpy ne demande pas de dossier par article : seul compte le chemin indiqué dans image.path (ou dans le Markdown). Utilise simplement ton dossier habituel, par exemple :

        
      
image:
  path: /assets/img/double-ecran-2560x1440.png
  lqip: data:image/webp;base64,UklGRrYAAABXRUJQ...   # inchangé
  alt: Deux écrans 2560x1440 sous KDE Plasma, HP E27q G4 et HKC 27E3Q

Dans un dossier commun, donne un nom explicite et unique (double-ecran-2560x1440.png, pas ecrans.png) pour éviter d’écraser une autre image du même nom.

WebP ou PNG ?

WebP est plus léger : ici 30 Ko contre 89 Ko pour le même visuel. Tous les navigateurs actuels l’affichent, et Jekyll/Chirpy le gèrent sans réglage.
PNG reste sans perte, et c’est le format habituel pour les captures d’écran. Pour une capture de kscreen-doctor avec du texte fin, le PNG garde chaque pixel net.
WebP peut aussi être sans perte, avec magick capture.png -define webp:lossless=true capture.webp, et reste en général plus petit que le PNG.

Mon conseil : garde le PNG si c’est ton format habituel et que tes images sont déjà dans cette convention, c’est parfaitement correct et plus cohérent. Passe au WebP si le poids des pages t’intéresse.

Le LQIP est de toute façon indépendant du format de l’image principale : il reste une miniature WebP en data URI, et le même texte fonctionne avec une image PNG.

4. Exemple

L’image fait 1200x630 (le format idéal pour l’en-tête d’un article Chirpy) et existe en trois versions : ecrans.webp (30 Ko, à utiliser sur le blog), ecrans.png et ecrans.svg (source modifiable). Elle montre tes deux écrans, avec les infos de tes commandes : le HP E27q G4 bloqué à 1920x1200 sur DP-1 (VGA, 200 MHz max), le HKC 27E3Q en 2560x1440@60 sur HDMI-A-2, et la solution RX 550 en bas.

Intégration dans l’article

Copie ecrans.webp dans assets/img/posts/double-ecran/ de ton blog.
Ajoute ceci au front matter :

        
      
image:
  path: /images/ecrans.webp
  lqip: data:image/webp;base64,UklGRrYAAABXRUJQVlA4WAoAAAAQAAAAFwAADAAAQUxQSCQAAAABH0CQbePvN5zt14iIOA5qAiBhKMlFfnLgOg0Q0f/MwYOIdABWUDggbAAAANADAJ0BKhgADQA/EXi0UawnJSKwCAGAIglqAJ0AaV9oZEtMYkfBwAD++ch4vsvbcFtZIOSUhwRjhfJdWLbELWGGiHU1VVyFbc8MtTZ3gJJQH3lK24OyuQpwCnalMi5mAXa9lEa0JBJaYoAAAA==
  alt: Deux écrans 2560x1440 sous KDE Plasma, HP E27q G4 et HKC 27E3Q

Le LQIP ci-dessus est déjà calculé à partir de cette image (190 octets), il n’y a donc rien à lancer avec ImageMagick pour celle-ci.

Si tu changes le texte de l’image, dis-moi quoi, et je régénère les fichiers et le LQIP. Quand la carte sera installée, on pourra aussi faire une version « après » avec les deux écrans en 2560x1440.

Chirpy LQIP

Tags tendance