geplaatst door: Eelco
Ik gebruik al een tijdje webfonts in websites. Dankzij http://www.fontsquirrel.com/ is dat een koud kunstje. Nu is er in de expert settings de mogelijkheid om een webfont als text in css op te nemen: dit gaat via de 'veilige' base64 encoding: de bestanden worden vaak zwaarder dan als ik de fonts 'los' in een mapje op de server zet.

De methode wordt ook wel gebruikt voor kleine plaatjes in css die op vrijwel elke pagina gebruikt worden (waar ik nog heel erg ouderwets sprites voor gebruik): ook daar is een plaatje vaak minder zwaar dan de base64 code.

De reden waarom dan toch soms base64 code wordt toegepast is dat dit de hoeveelheid http requests zou verminderen (hoewel de data toch vaak weer in een extra stylesheet wordt gestopt omdat anders je main stylesheet te zwaar wordt).

Kortom: wie heeft er ervaring met deze techniek en wil daar wat meer over vertellen?
Wat ik kan vinden spreekt elkaar tegen of buikspreekt elkaar na...

Ik ben vooral geïnteresseerd omdat deze techniek het wat makkelijker kan maken om een overzichtelijker bestandsboom te houden bij het maken van een website.

Hoe en waarom base64 encoding (b.v. in @fontface)
16 februari 2011 - 11:24    reactie #1
geplaatst door: melgior
Base64 kun je inderdaad overal gebruiken waar je binaire data (zoals een plaatje, of een uitvoerbaar programma) in een tekstbestand wilt opnemen. Alle bijlagen die je bij een e-mail bericht stuurt worden bijvoorbeeld ook omgezet met Base64 en dan gewoon onder de tekst geplakt die je schrijft.

Je kunt het ook opnemen in stylesheets, maar ik zou het alleen gebruiken voor hele kleine plaatjes die je vaak nodig hebt. Het is onhandig bij het bijwerken van plaatjes (omdat je dan dus telkens met de hand weer je stylesheet moet aanpassen) en het maakt dingen minder overzichtelijk aangezien je niet goed kunt zien hoe het plaatje eruitziet tijdens het lezen van CSS code.

Het voordeel van minder requests maken aan de server hef je inderdaad weer op als je het in een aparte stylesheet gaat stoppen. Daarom werken de meeste sites gewoon met losse lettertypen en plaatjes. Organiseren doe je door een goede naamgeving en/of mapjes. Je kunt ze indelen op basis van onderdelen van je site of de functie van de plaatjes (achtergronden, knoppen, banners, etc.).

Een andere techniek is om meerdere plaatjes in één groot plaatje te plaatsen (sprites) en met behulp van CSS maar een gedeelte van de afbeelding laten zien. Zo kun je de gewone versie van de knop en de versie die je laat zien als de muis er op staat in één afbeelding stoppen, of zelfs je hele knoppenbalk. Dit artikel vertelt er meer over.

Hoe en waarom base64 encoding (b.v. in @fontface)
16 februari 2011 - 11:29    reactie #2
geplaatst door: melgior
PS: hier nog een recentere en uitgebreidere tutorial.

En deze TinyMCE editor stelt een knoppenbalk samen op basis van deze sprite.

Hoe en waarom base64 encoding (b.v. in @fontface)
16 februari 2011 - 16:25    reactie #3
geplaatst door: Eelco
Duidelijk: heel erg bedankt!