Spar plads - embed kun de højst nødvendige tegn!

Der er nogen gange hvor hver enkelt kilobyte tæller ekstra meget. Det kan være når man udvikler til mobiltelefoner, eller når man kæmper for at overholde strenge bannerspecifikationer.
Kun at embedde lige præcis de karakterer du har brug for kan i den forbindelse være din redning, men selv på almindelige sites er det optimalt ikke at tvinge brugerne til at downloade ligegyldige bytes.

Hvad dælen er det der embedde for nåwet?
Ikke alle maskiner har de samme skrifttyper installeret, hvilket betyder at man er nød til at embedde (på dansk inkludere) de tegn fra en specialfont som man ønsker at bruge.
Har man et almindeligt, statisk tekstfelt gør Flash det automatisk, men har man et inputfelt hvor brugeren kan indtaste noget, eller et dynamisk tekstfelt hvor man selv via scripting ændrer teksten, så skal man selv sørge for at angive hvilket tegn der skal med.

For pokker, det er bare nogle små tegn, hvorfor tager Flash ikke bare dem allesammen med?
Meget simpelt, en komplet skrifttype kan indeholde op til omkring 40.000 tegn, så selv hvis hvert enkelt tegn kun fylder 50 byte, så bliver det til flere megabyte i alt.
Og hvorfor for øvrigt spilde plads på kantokinesiske tegn når nu målgruppen for sitet kun er folk der bor i Holstebro? ;-)

Hvordan embedder man så kun de nødvendige tegn?
Hvis du klikker en enkelt gang på dit inputfelt eller dynamiske tekstfelt, så vil der i dit “Properties” vindue være en knap som hedder “Embed”.
Klikker du på den dukker der et lille vindue frem, med forskellige grupper af tegn hvor du kan vælge hvilke som du ønsker at inkludere.

Har man et inputfelt hvor en bruger skal kunne indtaste sit navn, så er Uppercase, Lowercase, Numerals, Punctuation, Basic Latin og Latin I umiddelbart oplagte at inkludere.
Men, hvis man tænker lidt efter, er der så nogen som har behov for at kunne bruge !#%/() m.fl. i deres navn?
Hvis nej, så er det jo spild at plads at inkludere hele Punctuation gruppen, i stedet kan du i feltet “Include these characters” vælge at skrive .,-’ som alle kan fremtræde i et navn. I dette tilfælde går du fra at inkludere 52 tegn, som udgør hele Punctuation gruppen, til kun at inkludere 4, besparelse = 48 tegn.


Tip: Hvis du ikke kan gennemskue præcis hvad en tegngruppe dækker over, så lav et tomt tekstfelt og inkluder en enkelt gruppe. Herefter sikrer du dig at “Generate size report” er slå til under “Publish settings”, hvorefter du eksporterer. Du kan nu i dit outputvindue se en liste med lige præcis de tegn som den inkluderede gruppe indeholder.

Output vindue der viser inkluderede tegn

Den ekstra mil
På et almindeligt site, som måske fylder 200kb eller mere, er ovenstående simple teknik fint, her behøver man ikke vende og dreje hver enkelt byte.
Men skal man producere indhold til en mobiltelefon via Flash Lite, eller lave et banner med strenge specifikationer, så kan det være nødvendigt at skære helt ind til benet.

I den forbindelse er første skridt at overveje, om det nu også er nødvendigt med en speciel font?
Hvis man vælger at bruge Arial, Verdana eller en af de andre websikre fonte som er installeret på stort set alle verdens computere, så kan du i stedet vælge “Use device fonts” (Dropdown lige til højre for “Embed” knappen).
På den måde inkluderer Flash ikke fontene, men bruger dem i stedet direkte fra brugerens egen computer.


Tip: Bruger du den samme skrifttype flere gange, men i normal, bold og kursiv, så fylder det 3 gange så meget, da et givent tegn så inkluderes 3 gange i hver af de forskellige udgaver.

Okay, kunden stiller krav om at du bruger deres customiserede specialfont, så det er ikke en mulighed, hvad gør du så?
Angrib problemet kreativt!
Har du et felt hvor brugeren for eksempel skal indtaste en e-mail, så er det for eksempel ikke nødvendigt både at inkludere store og små bogstaver, da de i sidste ende tolkes ens. Og tilsvarende må der jo heller ikke bruges danske tegn eller andre specialtegn, så for et e-mailfelt kan man sagtens reducere det inkluderede til Lowercase samt tegnene .-_@

Et tredje tilfælde
Eksempel på Embed these characters - klik for at se en stor versionUdgangspunktet for denne lille artikel er rent faktisk, at jeg for nyligt har lavet et banner med en typewriter effekt, hvor bogstaverne skrives et af gangen så det simulerer en person der sidder og taster dem ind, og det skulle jo scriptes.
Det var en blandet tekst, og jeg inkluderede derfor hvad jeg umiddelbart mente dækkede, men det endte med at fonten alene fyldte 7kb, og da den samlede vægt på banneret skulle under 25kb og det samtidig indholdt en række billeder, så var det alt, alt for meget.

Men, i dette tilfælde ved jeg jo på forhånd lige præcis hvilke tegn som jeg har brug for, og ved kun at inkludere disse, så blev vægten af fonten reduceret til 2kb!
Jeg gjorde i første omgang det, at jeg satte mig ned og manuelt gennemgik teksten for at notere alle de forskellige tegn der blev brugt, men, det blev jeg træt af, så derfor lavede jeg nedenstående lille script :-)

Find tegn
Funktionen er meget simpelt, i det øverste tekstfelt copy-paster du bare hele den fritekst ind som kommer til at indgå, trykker på knappen, og voila, indeholder det andet tekstfelt de nødvendige tegn, som du herefter kan kopiere ind i “Embed these characters” feltet i Flash.

Din komplette tekst:


Forskellige tegn:



Del:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg

2 kommentarer

  1. Asger siger: (27. september 2006 kl. 14:14 )

    Ikke dårligt… sådan et script havde jeg faktisk brug for så sent som igår :)

  2. majsen siger: (22. januar 2010 kl. 22:03 )

    hvordan laver man saadan en her kontakt box?

Skriv en kommentar