Globale linker

HTML

<images>

Det er to billedformater som er vanlig å bruke i en HTML-side; GIF og JPG, eller JPEG.

Gif

gif eksempel
En typisk Gif
2K

Et billedformat hvor vi kan kan ha maximum 256 farger, som kan animeres og som kan ha gjennomsiktighet. Gif-formatet er best å bruke til bilder med klare, ublandede fargekombinasjoner som f.eks en logo eller en tegning.

Interlacing:
Når et bilde er interlaced lastes det bit for bit. Først kommer en dårlig utgave av bildet, så lastes det mer og mer informasjon til bildet er fullstendig synlig og klart

gjennomsiktig gif
En gjennomsiktig gif
2K

Transparency
Gif-formatet kan være gjennomsiktig, d.v.s. der det ikke er noe farge i bildet vil det være gjennomsiktig. Bildet ved siden av er lagt oppå en mintgrønn bakgrunn.

Animert gif
En animert gif
11K

Animerte giffer
Gif'er kan også animeres; d.v.s. en serie av bilder spilles av, eller vises i en gitt rekkefølge.

Jpg, jpeg


Et typisk jpg-bilde
7K

Er et format som egner seg glimrende til bilder med mye fargeinformasjon, som for eksempel et fotografi. Jpg er et «lossy» filformat, d.v.s. kompresjonen går ut over kvaliteten på bildet. Kan ikke være gjennomsiktig og kan ikke animeres, men kan inneholde opptil 16,7 millioner farger.

Png

Et nytt filformat som er ment å skulle ta over for gif. Delvis støttet av de siste browserene, så vær forsiktig med å bruke dette.


PNG-24 format
54K
Gradert gjennomsiktighet

PNG-24 format med
gradert gjennomsiktighet

PNG-8 format
2K

Det ser ut som om IE5.5+ støtter PNG8-formatet fullt ut, men at det er et problem med gradert gjennomsiktighet (PNG24). Det kan imidlertid fixes med et spesial CSS-filter, som funker kun i IE:

<img src="blank.gif" style="width: 100px; height: 100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ¬
(src='image.png', sizingMethod='scale')" />

Legg merke til at den reelle kilden til bildet ligger inne i filteret, «src» for <img>-taggen er en blank gif. Pass også på å sette den faktiske størrelsen på bildet i inline-CSS'en.

Svg

Et helt nytt filformat utviklet av Adobe. SVG er basert på XML og er foreløpig støttet kun ved hjelp av et plug-in. For å laste ned plug-in, gå til:
http://www.adobe.com/svg/viewer/install/ (åpnes i nytt vindu)

For å se SVG i action, gå til Battlebots (åpnes i nytt vindu)

Neste side Gå til neste side for å se hvordan vi setter inn et bilde i et HTML-dokument.