Brug attributter på dine billeder

Af Allan Vebel

Opdateret: 20-10-2011

Få optimal udnyttelse af dine billeder

Når du vil lægge billeder på din hjemmeside, er der nogle bestemte ting der skal være opfyldt for at det er optimalt.

Her er nogle ting der bør være opfyldt

1. Billedet skal have præcis den størrelse der skal bruges på siden.
2. Der skal angives højde og bredde på billedet.
3. Der skal angives alt og title på billedet.
4. Billedet skal have det rigtige billedformat.
5. Billedet skal have en pakkegrad der passer.

Billedstørrelse

Billedet af Flicka er 640x480, men reduceret med html-kode. Klik på billedet for at se den originale størrelse!

Billedet af Flicka er 185x139, og er reduceret i størrelse med et grafikprogram. Man kan tydeligt se forskellen.

Vi kender det allesammen - vi kommer ind på en hjemmeside hvor der ligger et billede i plakatstørrelse - og det bliver vist i frimærkestørrelse - og det tager en krig at hente det hjem. Derfor er det vigtigt at du laver dine billeder i præsis den størrelse de skal vises i. Det fyldre mindre - og browsere er altså ikke ret gode til at skalere billeder. Jo større billedet er, jo ringere bliver kvaliteten. Det samme gælder hvis man forsøger at gøre et lille billede større.

Derfor skal du bruge et grafikprogram til at skalere dine billeder inden du lægger dem på din hjemmeside.

Højde og bredde

Det er ikke obligatorisk at sætte højde og bredde på billeder, men det er en rigtig god ide. Har du en side med tekst og billeder, vil

afsætte plads til billedet allerede inden det er hentet hjem på brugerens computer. Det betyder at teksten omkring billederne ikke hopper og danser efterhånden som billederne hentes ind på siden.

Har du mange billeder, er det nemmere at styre det hvis du giver hvert billede en unik identifikation - og så styre størrelse og andre parametre med css.

Så kan du i css-koden skrive:

Alternativ tekst - og title

Standarden foreskriver også at du skal have en alternativ tekst på dit billede:

gerne med en kortfattet beskrivelse af hvad billedet forstiller. Det er for at tekstbaserede browsere (og folk med billedvisning slået fra) også har en chance for at finde ud af hvad billedet forestiller - men nok mest for synshandikappede, der nu også har mulighed for at få læst teksten op.

I Internet Explorer kommer en lille gul popup-tekst når man fører musen hen over et billede med alt="Tekst", og det har mange været irriteret over - det ødelægger designet når denne tekst popper op ved den mindste grafik der kun er til dekoration, har mange udtalt - derfor bliver den ofte udeladt. Er billedet kun til dekoration, for eksempel et hjørne eller en pil, er det tilladt at bruge alt="", så sker der intet.

Vil man bevare sin alt="Tekst", kan man bruge title, og helt komme ud over den gule popup-tekst i Internet Explorer.

På den måde har man sin alt-tekst intakt, og der er ikke noget der popper op. Her kan man også vælge at lave en kort alt-tekst, og en længere beskrivelse i title-tekst.

Her er et billede af et stort b med både alt- og title-tekst.

Er billedet blot til dekoration, kan du med fordel lægge det ind som baggrundsbillede i en boks, så slipper du helt for at skulle tænke på alt eller title:

Billedformat

Det er også vigtigt at du vælger det rigtige format til dine billeder. Normalt skal billeder med få farver gemmes som gif eller png. Eksemplet med det store b er lavet i gif, fordi der kun er få farver i billedet. Jeg kan ikke se forskel på om det er gemt med 256 eller 4 farver. Filstørrelsen med 4 farver er 673 bytes, mens den bliver 1.211 bytes med 256 farver.

Et skærmklip gemt i gif med 16 farver. Billedet fylder 944 bytes og ser fint ud.
 

Et skærmklip gemt i jpg med pakkegrad 80. Billedet fylder 5.533 bytes, og man kan allerede se forskel.

Et skærmklip gemt i jpg med pakkegrad 50. Billedet fylder 4.047 bytes, og ser værre ud.
 

Et skærmklip gemt i jpg med pakkegrad 20. Billedet fylder 2.739 bytes, og er stort set ubrugeligt.

Ovenstående er et godt eksempel på hvorfor billeder med få farver og store ensartede flader bør gemmes i gif eller png.

Pakkegrad

Er der mange farver, for eksempel et fotografi, bør det gemmes i jpg. Her kan man reducere filstørrelsen væsenligt ved at ændre på pakkegraden for billedet. Se nedenstående eksempel, hvor man virkelig skal tæt på for at se forskellen.

Billedet af Flicka er ikke pakket. Det fylder 37.376 bytes, og skulle være uden kvalitetstab.

Billedet af Flicka er med pakkegrad 80, og fylder 8.681 bytes.

Billedet af Flicka er med pakkegrad 60, og fylder 5.773 bytes.

Billedet af Flicka er med pakkegrad 40, og fylder 4.401 bytes.

Prøv selv med dit grafikprogram at lave forskellige billeder i gif, png og jpg med forskellig farvedybde og pakkegrad! Vurder kvalitet og filstørrelse, og vej disse parametre op mod hinanden inden du lægger billeder på din hjemmeside. Se også højere oppe med hensyn til billedstørrelse!

Meget små fotografier kan dog med fordel gemmes som gif eller png i 256 farver, her er det meget svært at se forskel.

Ja, det er min finger der er i klemme mellem de sylespidse hvalpetænder.