Før du setter i gang med å bruke bilder på ditt nettsted er det viktig å stoppe opp og klargjøre formålet ved bruk av bilder, og huske at de skal passe til målgruppen.

Vi kan bruke bilder til å fremme ulike formål:

  • Når vi vil utdype en historie
  • Når vi vil understreke et poeng
  • Når vi vil dokumentere noe
  • Når vi vil vise relasjoner
  • Når vi vil skape en stemning


Det er viktig å tenke på at

  • Bildet må gjenspeile målgruppen
  • Bildet må være relevant i forhold til saken
  • Bildet må relateres til overskriften
  • Bruk bilder av enkeltpersoner bare der de blir omtalt
  • Unngå å illustrere roller med bilder av gjenkjennelige personer


Hvorfor skalere

Dine kunder gjør seg opp en formening om ditt nettsted på veldig kort tid, derfor er det viktig at bildene du har på nettstedet vises med en gang. For å oppnå dette skalerer vi bildene ned til en størrelse som sikrer god kvalitet og samtidig liten filstørrelse, som sikrer at opplasting av bilder går fort.

Oppløsning betyr hvor mange punkter som er i bildet pr. måleenhet. Den vanligste måleenheten er punkter pr. tomme, ppi (pixels per inch). En dataskjerm har en oppløsning på mellom 72ppi (Mac) og 96ppi (PC). Vanligvis tar man hensyn til den dårligste av disse, og lager derfor bilder som har en oppløsning på 72ppi, hvis de er ment for visning på skjerm. Jo flere piksler, jo større fil.

Vanlige skjermstørrelser er 1024 x 768 eller 1280 x 1024 piksler.

Et bilde tatt med et vanlig digitalt kamera har en størrelse fra ca. 1Mb og oppover, noe som blir alt for stort til bruk på internett. Vanligvis krever vi at bilder (avhengig av størrelse) er mindre enn 100kB store når de skal brukes på internett. Derfor må vi ta noen grep.

 

Opphavsrettigheter

ALLE bilder på internett er underlagt Åndsverkloven( http://www.lovdata.no/all/hl-19610512-002.html), som sier at det er den som eier bildet som bestemmer hva det skal brukes til. Det betyr at selv om det er enkelt å kopiere bilder på internett er det ikke uten videre lov. Det man kan gjøre da er å ta bilder selv, be om lov til å få/kjøpe bilder fra andre eller benytte seg av en av de mange gratis databasene med bilder som finnes på Internett.


Hvor finne bilder

W3Spor benytter seg blant annet av Stock.Xchng http://sxc.hu/  og http://eu.fotolia.com/ , hvor vi finner både gratis bilder og bilder vi må betale for.

På sxc.hu finner du både gratisbilder og betalingbilder. Fotalia har kun betalingsbilder men prisene er lave fra 1 Euro og oppover.


Filtyper til bruk for internett

De mest brukte filformatene for bilder på internett er jpg, gif og png. De har ulike bruksområder.

GIF er det eldste grafikkformatet for internett og har en ikke-destruktiv filkomprimering. Maksimalt antall farger er 256 og det gir mulighet for enkel animasjon. Det er best egnet til logoer, spotgrafikk, knapper, bannere etc.

JPG er utviklet for å omgå svakhetene til GIF-formatet og har en destruktiv filkomprimering (gir kvalitetstap). Maksimalt antall farger er 16 mill. Transparens (gjennomsiktighet) støttes ikke og JPG er best egnet for fotografier, fargeforløpninger og lignende

PNG er det nyeste formatet på internett og har en ikke-destruktiv komprimering. Maksimalt antall farger er 16 mill. Det støtter transparens, men ikke alle nettsteder støtter dette formatet. PNG-formatet brukes best til bilder som har store felter med helt lik farge, slik som mye av grafikken på websider har. Her vil PNG-formatet gi mindre filstørrelse enn fotoformatet JPG. Dersom du bruker PNG-formatet på fotografier eller andre bilder som likner på fotografier, vil filstørrelsen bli relativt stor.

For bilder som skal vise produkter, være illustrasjoner, være i bildegalleri eller lignende på ditt nettsted, anbefaler vi derfor  filformatet jpg.


Programvare for bildebehandling

 

Photoshop: https://www.photoshop.com/

Online bildebehandling: http://www.pixlr.com/app/

Gimp: GNU Image Manipulation Program - eller enkelt og greit GIMP - er nok ved siden av Paint.net den absolutte tungvekteren innen gratis bildebehandling og har også mange av de samme funksjonene og finessene som vi finner i Photoshop. www.gimp.org.

Paint http://www.getpaint.net/ Gratis fotoeditering for Windows

Vi bruker (blant annet) Gimp, når vi jobber med bilder - derfor en liten introduksjon til den.


Hvordan skalere i Gimp

 

Først laster du ned Gimp fra www.gimp.org.

Start Gimp og åpne det bildet, som skal skaleres.  Velg Image, Scale Image og skriv inn ønsket størrelse i piksler, eks bredde 400 piksler. Trykk på TAB-tasten og høyden på bildet kommer frem automatisk (så lenge kjedesymbolet er på plass). Kontroller at oppløsningen (resolution) er på 72 piksler/inch. Trykk på Scale.

 Lagre bildet med File, Save as.  Skriv inn et nytt navn, slik at du beholder originalfilen slik den er.  Du kan også nå velge å endre filtype ved å endre sufikssen på fila (filendingen/det som er etter punktum). 

Hvis du lagrer som jpg får du spørsmål om hvilken kvalitet du vil ha på bildet. Velg 85 ved å ta tak i håndtaket og dra det mot venstre.  Trykk på Save.

Hvis du lagrer som png får du spørsmål om blant annet kompressjonsnivå (Compression level). La den stå på 9. Trykk på Save.

 

Nå er fila betydelig mindre (i Byte).

 

 

Eksempler

 

Mål

Filstørrelse

Kvalitet

Originalbilde (jpg)

2049*2500

1.63 MB

93

 

300*366

80 kB

93

 

300*366

63 kB

85

 

500*610

117 kB

85

 

 

Mål

Filstørrelse

Kvalitet/komprimering

Filtype

Originalbilde

3443*2171

1.9 MB

96

jpg

 

400*252

41,6 kB

96

jpg

 

400*252

129 kB

9

Png

 

400*252

132 kB

6

png


Lage 'topp-bilder'

Finn ut hvilken størrelse bildet skal ha til slutt. Feks et toppbildene på www.altagolf.no 874*200 piksler. Åpne bildet som skal klippes til, velg Image, Scale Image og skriv inn bredden på bildet (feks 874 px). Trykk på 'tab'-tasten og på 'Scale. For å få bildet større nå: Velg 'View' , 'Zoom' og feks 100%. Trykk på 'Rectangle Select Tool' i den avlange verktøysmenyen for å klippe i bildet. Merk og dra (med venstre musetast) for å klippe. Det er sannsynlig at du må prøve flere ganger, før du er fornøyd. Trykk på 'Image' og 'Crop to selection'. For å sette inn logo på bildet, åpner du logoen og velger 'Edit', 'Copy'. Gå til toppbildet og velg 'Edit', 'Paste' for å lime inn bildet. Ta tak i logoen og plasser den der du vil ha den. For å sette inn kreditering på bildet, velger du 'Text Tool' i den avlange verktøysmenyen og skriver inn teksten. Plasser teksten der du vil ha den - og velg evt størrelse og farge. Lagre bildet med 'File', 'Save as'. Velg kvalitet på 80.

 

Tilgjengelige bilder

 

WAI (Web Accessibility Initiative) som jobber med standarder for internett, sier at bilder på internett også skal beskrives med tekst. Derved kan blinde som bruker PC med leselist eller syntetisk tale få den grafiske informasjonen på lik linje med seende. Manglende alt-tekst er mest alvorlig i de tilfeller der det grafiske elementet innholder helt avgjørende informasjon. Det kan være overskrifter eller ikoner som fungerer som lenker og som er laget som et grafisk element uten alt-tekst. Det betyr at overskriften ikke lar seg lese eller at ikonets funksjon ikke kan forstås. Dermed blir det vanskelig å orientere seg og å navigere på nettstedet.

I W3Spor sin CMS/publiseringsløsning setter du inn alternativ tekst (ALT-tagg) samtidlig som du setter inn bildet på siden.

Der du gjør valgene for bildet ditt finner du følgende boks: Her skriver du inn tekst som beskriver bildet ditt.


Les mer om bildebehandling