På webben finns idag framför allt två bildformat som "fungerar" (du kan naturligtvis lägga ut precis vad som helst, men sannorlikheten att nån annan kan se det minskar om du avviker från de vanligaste formaten). De heter GIF och JPEG.
Man kan inte säga att det ena formatet är bäst. De är båda bäst, men på olika saker. JPEG är speciellt utvecklad för att fungera bra med fotografier, GIF fungerar bättre för teckningar. En liten filstorlek är nödvändig för att filen ska gå snabbt att ladda hem över nätet. Om man väljer rätt format får man maximalt bra bild och minimalt liten filstorlek. Om man väljer fel format blir bilden ful och filstorleken växer i onödan.
Båda formaten "förstör" bilden lite, men på olika sätt (det är så de kan ge så kompakta filer). JPEG tar bort information av "hög frekvens" (som man hittar i skarpa kanter) och spar information av "låg frekvens" (långa svepande övergångar med många nyanser) som man ofta hittar i fotografier. Det kan göra att teckningar med skarpa kanter ser "skitiga" ut. GIF "avrundar" alla pixlar till 256 färger. Det kan göra att ett foto, med mjuka övergångar mellan färgnyanserna, kan se "hackigt" och "platt" ut.
Ibland träffar man på bilder där det inte går att säga otvetydigt vilken kategori de tillhör. Då gör man en av varje sort och jämför utseendet. Om den ena ser märkbart bättre ut än den andra så väljer man den som är bäst. Om de ser lika bra ut tittar man på filstorleken och väljer den som är minst.
För mer information om vilket format du ska välja kan du läsa The JPEG FAQ.
Så var det dags att stoppa in bilden i ditt HTML-dokument. Det gör man med hjälp av <IMG>-taggen. Den behöver veta vilken fil bilden finns i (anges med SRC-attributet). Dessutom är det praktiskt att säga hur stor bilden ska vara (det gör att sidan laddar snabbare eftersom webläsaren kan avsätta plats för bilden utan att behöva invänta bilden och titta på den för att veta hur stor den är. Det gör man med attributen WIDTH och HEIGHT. Måttenheten är antal pixlar, och du bör sätta det antal pixlar bilden verkligen har. En del webläsare kan göra ett tappert försök att "göra om" bilden till nån annan storlek, men resultatet är ofta uselt). Och så var det det där med "elegant sönderfall" och "blinda" läsare med text-webläsare. Man behöver alltså ange en alternativ text (det gör man med ALT-attributet).
Exempel:
<IMG SRC="kisse.jpg" WIDTH="234" HEIGHT="345" ALT="[Min katt Kisse]">
Ofta är det praktiskt att ha en liten bild (som laddar snabbt) och som när man klickar på den leder till att en större version av samma bild laddas hem. Det kallas för "tumnaglar". Var bara noga med att verkligen ha två versioner av varje bild. Det finns de som missförstår syftet med tumnaglar och sätter in den stora bilden med anvisningar i form av felaktiga WIDTH- och HEIGHT-attribut som föreslår att webläsaren ska "krympa" bilden. Det som kan hända då är dels att det finns webläsare som inte alls bryr sig om att krympa bilden, utan presenterar den i den storlek den verkligen har, dels så blir inte sidan ett dugg snabbare (tvärtom kan det ta längre tid om webläsaren måste göra om bilden på nåt sätt i stället för att bara packa upp den och visa fram den).
Exempel:
<A HREF="stor_bild1.jpg"><IMG SRC="liten_bild1.gif" WIDTH="30" HEIGHT="40" ALT="bild 1"></a> <A HREF="stor_bild2.jpg"><IMG SRC="liten_bild2.gif" WIDTH="30" HEIGHT="40" ALT="bild 2"></a> <A HREF="stor_bild3.jpg"><IMG SRC="liten_bild3.gif" WIDTH="30" HEIGHT="40" ALT="bild 3"></a> <A HREF="stor_bild4.jpg"><IMG SRC="liten_bild4.gif" WIDTH="30" HEIGHT="40" ALT="bild 4"></a>