Sunfox


Ajoutez la couleur dominante derrière vos images

Si vous pouvez extraire la couleur dominante d’une photo, vous pouvez améliorer la perception du chargement de votre site en vous servant de celle-ci tant que votre image n’est pas chargée.

Voici un exemple sur cults3d.com :

Chargement progressif d'une page Web où les couleurs de fond des images se chargent avant les images elle-même

HTML

En HTML, le plus simple est d’appliquer la couleur dominante sur son style inline. C’est cette couleur qui apparaîtra durant le chargement

<img style="background: #f3de56" src="…" width="120" height="120" />

Avec Rails

Si vous utilisez la librairie CarrierWave dans votre application Rails, vous pouvez extraire facilement la couleur dominante à chaque upload grâce à ma gemme ruby carrierwave-color.

Avec WordPress

Si vous utilisez WordPress, ajoutez l’extension dominant-color et ça sauvegardera la couleur dominante à chaque upload de medias. Vous pourrez même éditer la couleur choisie, directement dans l’administration.

3 Commentaires

  1. 1 Ook? Ook! :

    Peut aussi être intéressant pour habiller d’un shadow une image et ainsi la mettre en valeur

  2. 2 Powerball :

    Merci pour l’article: Je utilise la version 3.9 et wordpress ne sais pas quelle est la raison que le code ne fonctionne pas je peux le faire à cause d’une configuration de PHP? Je utilise cPanel sur Host

    Merci beaucoup.

  3. 3 Sunny :

    Powerball : merci de créer un ticket sur https://github.com/theamnesic/dominant-color/issues en explicant l’erreur qui remonte, on va trouver une solution.

👨🏻‍🦰 Sunny Ripert

est un développeur web vivant à ParisContactArchives

Textes et contenus sous licence Creative Commons.