Sur cette page

• Avec la fonction html
• Avec les filtres
  • Couleur dominante
  • Aperçu flouté

Afficher un aperçu des images pendant leur chargement

Les images sont souvent les ressources les plus lourdes d’une page. Pendant leur chargement, Cecil peut remplir leur emplacement avec une couleur dominante ou un aperçu basse qualité (LQIP, Low-Quality Image Placeholder), pour éviter les blocs vides et améliorer la performance perçue.

Avec la fonction html

Le plus simple est d’utiliser l’option placeholder de la fonction html, avec la valeur color ou lqip :

{{ html(asset('images/photo.jpg'), {alt: 'Description', loading: 'lazy'}, {placeholder: 'lqip'}) }}

Pour l’appliquer à toutes les images générées avec html, définissez une valeur par défaut dans cecil.yml :

layouts:
  images:
    placeholder: color # `color` ou `lqip`

Avec les filtres

Pour un balisage personnalisé, utilisez directement les filtres :

• lqip : renvoie une version minuscule et floutée de l’image sous forme de data URL
• dominant_color : renvoie la couleur dominante de l’image sous forme de valeur de couleur CSS (par exemple rgb(120 85 60))

Couleur dominante

{% set image = asset('images/photo.jpg') %}
<img src="{{ url(image) }}" width="{{ image.width }}" height="{{ image.height }}" alt="Description" loading="lazy"
  style="background-color: {{ image|dominant_color }};">

Aperçu flouté

{% set image = asset('images/photo.jpg') %}
<img src="{{ url(image) }}" width="{{ image.width }}" height="{{ image.height }}" alt="Description" loading="lazy"
  class="placeholder" style="background-image: url({{ image|lqip }});">

Étirez l’aperçu sur toute la surface de l’image en CSS :

img.placeholder {
  max-width: 100%;
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;
}

L’arrière-plan reste visible jusqu’à ce que l’image réelle soit chargée et affichée par-dessus.