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 d'une page sur Cults 3D

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.

Articles probablement reliés

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.


:D Sunny Ripert

est un développeur web vivant à Paris. Contact


Textes et contenus sous licence Creative Commons. Site propulsé par WordPres