Even een korte tutorial met een handigheidje waar ik achter ben gekomen tijdens het ontwerpen van een set buttons voor een back-office interface.

Wat ontwerpers vaak doen ik vaak doe is een background image maken voor een button. Deze image werd dan ingesteld als achtergrond van de <input> button met een repeat-x parameter (CSS) waardoor de image wordt meegerekt over de breedte van de button.

Mijn ervaring met buttons is dat ze vaak moeten wisselen van kleur, waardoor je dus meerdere images voor meerdere buttons in zal moeten laden, wat weer ten koste gaat van de performance van je site. Hier komt nog bij dat kleurinformatie vaak de bepalende factor is bij de grootte (in bytes) van images. Hoe meer verschillende kleuren, hoe meer kleurinformatie er opgeslagen moet worden, hoe groter de image zal worden, dit geldt in het bijzonder voor gradients bijvoorbeeld. Bij dit artikel gaat het vooral om recyclability van je HTML/CSS en images. Voor performance tips verwijs ik je naar dit artikel. (more…)