Welk bestandsformaat gebruik je voor iconen?
Het bestandsformaat voor iconen is vrijwel altijd SVG. Dat is een tekening in plaats van pixels, dus op elk scherm scherp.
Bovendien is een icoon in dit formaat vaak maar een paar honderd bytes groot.
Er is één situatie waarin je iets anders kiest.
Waarom SVG wint
Scherp op elk scherm, ook bij inzoomen. Licht van gewicht. En je kunt de kleur met een opmaakregel aanpassen zonder een nieuw bestand.
Dat laatste maakt hover-effecten en een donkere weergave eenvoudig. Meer daarover lees je bij css.
Wanneer iets anders
Bij een gedetailleerd beeld met verlopen of fotografische elementen. Dan wordt een tekening zwaarder dan een afbeelding.
Maar dat is dan ook geen icoon meer. Meer daarover lees je bij pagespeed.
Wat je met een pictogramlettertype moet
Dat was jarenlang de gangbare oplossing: iconen als tekens in een lettertype. Tegenwoordig niet meer nodig.
Het laadt een compleet lettertype voor een handvol iconen, en het gaat mis bij voorleessoftware.
Mijn vuistregels
- SVG, tenzij je een goede reden hebt.
- Geen pictogramlettertype meer.
- Comprimeer je bestanden; ze zitten vol overbodige gegevens.
- Zet iconen die overal terugkomen in één bestand.
Die derde levert vaak de helft van het gewicht op, want ontwerpprogramma’s exporteren rommelig.
Direct in je pagina
Je kunt een icoon ook rechtstreeks in je HTML zetten in plaats van als apart bestand. Dan bespaar je een verzoek.
Handig voor iconen die op elke pagina staan. Meer daarover lees je bij design system.
Voor toegankelijkheid
Geef een icoon dat betekenis draagt een beschrijving mee, en verberg puur decoratieve iconen voor voorleessoftware.
Meer daarover lees je bij of er tekst bij een icoon hoort.