Banneroptimering del 2: De kære, kære kilobytes

I del 1 fik vi skaffet det rigtige materiale, så nu skal selve produktionen igang, og her kommer den største udfordring for langt de fleste bannere: At få klemt så meget budskab og indhold ned på så få kilobytes som muligt.

For at kunne se hvilke elementer i dit banner som det er der fylder, så skal du under File –> Publish Settings –> Flash sætte et flueben udfor “Generate size report”. Så vil der fremover, hver gang du publisher, blive genereret en lille rapport i Output-vinduet, som detaljeret viser hvad det er der fylder.

Med det slået til, så er det første, vigtigste og relativt indlysende råd til at spare på pladsen:
Hav kun det højest nødvendige med i Flash-filen

Konkrete eksempler på det er:

Skalér i Photoshop
Når man har importeret et stykke grafik ind i Flash, så findes der flere muligheder for at skalere det.
Man kan bruge Free Transform-værktøjet, selv rette procenterne i Transform-panelet eller bare ændre højde/bredde i properties.

Det man i den forbindelse skal huske på er, at uanset hvordan du skalerer grafikken, så vil det altid veje det samme. Hiver du et 200 kb billede ind og skalerer det ned til en størrelse på 10%, så vil det stadig veje 200 kb.

Den eneste måde at få gavn af at grafikken ikke skal bruges i så stor størrelse er derfor at skalere det i Photoshop.

Selv arbejder vi som oftest på den måde, at vi laver et designoplæg på banneret i Photoshop, som vi får godkendt inden vi begynder at lave det i Flash. Om man hellere vil lave det i Flash til at starte med er i høj grad et spørgsmål om smag og behag, men i relation til at spare på de kære kilobytes, så giver det den fordel at størrelsen på billeder og andre elementer er fastlagt inden vi begynder arbejdet i Flash.

Husk i øvrigt, at hvis billedet bruges i en animation, hvor det bliver skaleret op og ned, så behøver man ikke altid at have det med i den størrelse i animationen hvor det er størst.

Eksempel: Du har et billede der animerer ind fra en størrelse på 0×0 pixel til 100×100 pixel, og efter at have været på skærmen et par sekunder, så animerer det ud med en fade hvor det samtidig bliver 200×200 pixel stort.
I det tilfælde vil du ofte kunne nøjes med at have billedet med i størrelsen på 100×100 pixel, da brugeren ikke vil kunne se forskel, fordi den kun er i den store størrelse i kort tid og hele tiden er i bevægelse,

Klip ikke-synlige dele af billeder væk
Det lyder måske som en indlysende ting, men det er noget som jeg selv glemmer engang imellem.
Typisk hiver man et stykke grafik ind, eksempelvis et billede af en bil, og så ender man med for eksempel at placere den i et hjørne, hvor noget af bilen rent faktisk er “uden for billedet”.

Her er der igen mulighed for at spare nogle ekstra kilobytes ved at bruge Photoshop til at skære det væk som alligevel ikke kan ses.

Indstil komprimering individuelt for hvert billede
Som udgangspunkt er komprimeringen for alle billeder der hives ind i Flash sat til 80.
Det kan ses under: File –> Publish Settings –> Flash –> Jpeg quality.

Ved at ændre på det tale, kan du gøre alle billeder billeder større eller mindre på én gang, men husk på at intet er gratis, jo mindre de fylder, jo grimmere ser de ud.

Da forskellige billeder komprimeres forskelligt, kan det altid betale sig at indstille kvaliteten individuelt billede for billede.
Det gøres ved at højre-klikke på billedet i dit library og vælge Properties.

Her kan hvert stykke grafik komprimeres på to måder:
Lossless (PNG/GIF): Gælder kun for grafik der rent faktisk er importeret som png eller gif, og betyder at Flash ikke selv ændrer på komprimeringen. Hvis du vil ændre på komprimeringen skal den derfor ændres til Photo (JPEG)
Photo (JPEG): Standard indstillingen for al grafik som ikke er importeret som png eller gif.

Når Photo (JPEG) er valgt, skal fluebenet i “Use document default quality” fjernes, så kommer der et feltet frem hvor kvaliteten manuelt kan indstilles. Hvis man retter på tallet og trykket “Test” kan man med det samme se hvad det pågældende stykke grafik vil fylde, og i vinduet til venstre kan man se hvordan grafikken vil se ud med den valgte komprimering.

Så er det blot et spørgsmål om at prøve sig frem indtil man finder den rette balance mellem vægt og kvalitet.

Minimér antallet af skrifttyper
Flash er heldigvis på mange områder temmelig intelligent, hvis du eksempelvis bruger bogstavet “b” to gange i en tekst, så bliver formen af bogstavet “b” kun inkluderet én gang.

Men, hver gang man ændrer skrifttype eller gør teksten bold eller kursiv, så skal bogstavet inkluderes igen.
(Alt efter hvilken skrifttype der benyttes)
Til gengæld fylder det ikke mere, hvis du bruger det samme bogstav i flere størrelser.

Så, overvej om der virkelig er brug for en masse forskellige skrifte for at få budskabet til at gå klart igennem.

Embed kun det højst nødvendige antal tegn i dynamiske tekstfelter
Har du et dynamisk tekstfelt hvor du selv skifter teksten, eller et felt hvor brugeren kan indtaste et telefonnummer, e-mail, postnummer eller lignende, så skal de nødvendige tegn også embeddes.
Her kan man også spare plads ved kun at vælge de højest nødvendige.

Skal brugerne indtaste et postnummer, så er det fint kun at embedde tal.
Er der tale om en e-mailadresse, så har man kun brug for alle små bogstaver og tegnene @._-

Og sådan kan man blive ved, har man brug for at spare endnu mere plads, kan man også sætte feltet til “Use device fonts”, da man så bruger de skrifttyper brugeren i forvejen har installeret på sin maskine. Det betyder dog så samtidig også, at man kun bør vælge skirfttyper som man ved at alle har installeret, de såkaldt websikre fonte, men selv her skal man være opmærksom på, at de godt kan rendere en anelse forskelligt.

Du kan se en liste med nogle af fontene her:
Websafe fonts

Mavefornemmelse
En af de sværeste ting er fra start af i processen at have en fornemmelse for hvor meget af det materiale man har fået, som man kan få plads til i banneret.
Desværre kan man ikke stille nogen formel eller lignende op for det, der er kun en ting at gøre, og det er at prøve sig frem og med tiden få opbygget noget erfaring.

Det var slut på del 2, del 3 kommer til at handle om den tekniske optimering af banneret, for at undgå at det laver ulykker.



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

Skriv en kommentar