Les images sont aux performances web ce qu’un match de foot au stade de Gerland est à la circulation : un goulot d’étranglement. Avec Javascript, les images sont en effet un tue-l’amour pour la bande passante. En attendant de servir des tailles d’images adaptées aux périphériques, on peut commencer par optimiser le poids des Jpeg, Gif et autres PNG grâce à EWWW Image Optimizer. →
Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site : →
Le quotidien de l’intégrateur HTML est parfois assombri par la survenance de bugs plus ou moins gênants. Ces derniers jours, je me suis débattu avec un décalage de couleur entre une image au format png et un fond spécifié en hexadécimal. Et comme si ça ne suffisait pas, Internet Explorer et Firefox n’ont pas aimés que je débute l’intitulé d’un identifiant avec un underscore ! Pfff… Pour finir si l’utilisation de overflow: hidden pour clearer les float est une bonne idée, cette propriété peut avoir des effets de bord indésirables. Enfin, voyons ça de plus près : →
Pour obtenir un effet d’opacité sur un élément, il existe le format d’image PNG 24 bits qui accepte jusqu’à 256 niveaux de transparence. Malheureusement Internet Explorer 6 ne prend pas en charge cette intéressante caractéristique… Je vais vous proposer une méthode full CSS et une autre permettant d’utiliser des images GIF ou PNG transparentes de manière créative avec une page d’exemples à la clé.
Cette page regroupe des trucs & astuces CSS que j’ajoute régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complets, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser 😉
Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.
