Har du styr på billeder til web

Hvad ved du - ikke endnu - om billeder til web?

Denne guide er til dig, der ikke kender de tekniske krav til type, vægt, størrelse og format?

Billeder i forkerte størrelser driller besøgende, sløver dit website og gør det umuligt at lave pænt webdesign. De kan også gøre et website usynligt på Google.

Billeder til moderne websites skal passe til mange typer skærme.

16:9 formatet er godt til web

For at få det fulde udbytte af denne side - bør du se den på forskellige typer skærm - computer, tablet, smartphone. Ellers får du ikke det optimale indblik i, hvordan billeder i forskellige formater ser ud på forskelle skærme.

Billeder til dit website skal gerne være i 16:9 format siger jeg ofte til mine kunder.

Og så kigger de undrende på mig.
Hvad vil det sige?

Hvad er 16:9 format?

Billedet du ser her er i 16:9 format.
Deler vi det op i 16 lige store tern på bredden, er der 9 tern på højden.

Hvis det var 16 cm bredt, ville det være 9 cm højt.
Hvis det var 1.6 meter bredt, ville det være 90 cm højt.

Hvis billedet har formatet 1:1 betyder det, at bredde og højde er den samme. Uanset hvor bredt billedet end er.<<

Derfor skal du have styr på vægt, størrelse og format

For tunge billeder

Vægten måles i kb eller MB. Billeder på nettet bør komprimeres til mindst mulig vægt. For tunge billeder…

Gør dit website langsomt
Irriterer besøgende
Skader din placering i Googles søgeresultater

Upassende størrelser

De fleste websites har 3-4 forskellige størrelser. Du bør kende størrelserne til dit website og sørge for, at alle uploadede billeder er indenfor rammerne. Upassende og umage størrelser….

Gør det svært eller umuligt at lave pænt design

Forskellige formater

16:9 formatet er det mest brugte på websites. Fordi det er praktisk på både små og store skærme. Billeder i upassende eller for mange forskellige formater….

Gør det svært eller umuligt at lave pænt design

Herunder står billederne pænt - fordi de alle er i 16:9 format

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Billeder i samme format kan stå pænt på linje

Her står billeder skævt - fordi de har forskellige størrelser og formater

Når billeder har forskellige formater, skaber det et rodet og uroligt indtryk på en side. Det er langt nemmere at lave pænt webesign, når alle billeder er i 16:9 formatet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pas på med høje billeder

Vender vi et 16:9 billede på højkant, bliver det til 9:16 formatet. Og her kan du se, hvorfor så høje billeder ikke fungerer ret godt. Tjek på både computerskærm, tablet og smartphone, så du ser, hvor forskelligt det ser ud.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hvilke værktøjer og teknikker skal du bruge til at gøre billeder klar til web?

Du skal kende dit designs krav til billeder

Ofte er der brug for 3-4 forskellige størrelser billeder:

Store helsides billeder er ofte over 1900 px brede - når de skal fylde hele browserens areal
Helsides billeder, der fylder designets maxbredde er ofte lidt over 12800 px
Billeder til blog er ofte omkring 1000 px brede
Små billeder til eksempelvis små bokse er måske omkring 800 px brede

Du skal kende de eksakte størrelser.

WordPress kan indstilles til at gemme tre versioner af et billede. Altså tre forskellige størrelser.

Hvis de billeder du uploader er bredere end 2560 px, bliver de automatisk komprimeret af WordPress. Men det optimale er stadig manuelt at sørge for, at billeder har den rigtige størrelse før de lægges i mediebiblioteket.

Du skal have et billedbehandlingsprogram

Alle billeder skal gøres klar til web. Det kræver en tur i et billedbehandlingsprogram.

Billedbehandlingsprogrammet skal du bruge til at:

Beskære billeder til det rigtige format (16:9)
Reducere billedet til den rigtige bredde (mål i px)
Komprimere billeder til en passende vægt (målt i kb)

PS: Canva, som mange er glade for at bruge, dur ikke. Det er anvendeligt til at beskære og reducere et billede, men det kan ikke komprimere optimalt.

Du skal kunne beskære til 16:9 format

16:9 formatet er så udbredt, at det garanteret findes som standardinstilling i dit billedbehandlingsprogram.

Du skal kunne beskære til 16:9 format

16:9 formatet er så udbredt, at det garanteret findes som standardinstilling i dit billedbehandlingsprogram.

Du skal kunne resize til den rette bredde

Når et billede er beskåret i 16:9 format, skal det gemmes med den bredde, der passer til webdesignet.

Du skal kunne komprimere billedet

Ofte gøres det, når man via billedbehandlingsprogrammet gemmer billedet efter behandling. Undervejs i gemmeprocessen kan man som regel vælge, hvor meget billedet skal komprimeres.

Billeder kan og bør altid veje mindre end 250 kb
Er der flere billeder på en side, skal hver enkelt billede komprimeres mere effektivt, end hvis der kun er et enkelt billede. Fordi siden samlede vægt er afgørende.