Bilder gjør nettsider mer informative og interessante. Store bildefiler kan imidlertid føre til at sidene lastes langsomt, særlig på mobiltelefoner og ved bruk av mobile nettverk.
Før du laster opp bilder til UiTs WordPress-plattform, bør du derfor tilpasse bildenes størrelse og filformat til bruken på nettsiden.
1. Anbefalte bildestørrelser
Bildestørrelse kan bety to forskjellige ting:
- Bildeoppløsning: Bildets bredde og høyde målt i piksler, for eksempel 1600 × 900 piksler.
- Filstørrelse: Hvor mye lagringsplass bildefilen bruker, for eksempel 250 kB eller 2 MB.
Et bilde med mange piksler trenger ikke nødvendigvis å være en stor fil. Filformat og komprimering har stor betydning.
Anbefalinger for vanlige nettsider
| Bruksområde | Anbefalt oppløsning | Veiledende filstørrelse |
|---|---|---|
| Vanlig bilde i artikkel | 1200–1600 px bredde | 100–300 kB |
| Stort toppbilde | 1920 × 1080 px | 200–500 kB |
| Portrettbilde | 600–1000 px høyde | 50–150 kB |
| Lite bilde eller miniatyr | 400–800 px bredde | 30–100 kB |
| Logo eller enkel grafikk | Tilpasses bruken | Helst under 100 kB |
Dette er praktiske anbefalinger, ikke absolutte grenser. Bilder med mange detaljer kan kreve større filer for å beholde god kvalitet.
Hovedregel: Bruk ikke større bilder enn det som er nødvendig for visningen på nettsiden.
Et originalbilde fra et moderne kamera kan for eksempel være 6000 piksler bredt og oppta 10–20 MB. Til en vanlig nettside vil det ofte være tilstrekkelig med 1600 piksler og en filstørrelse på noen hundre kilobyte.
2. Hvilket bildeformat bør du velge?
De vanligste bildeformatene for nettsider er JPEG, PNG og WebP.
JPEG (JPG)
- Egner seg godt til fotografier.
- Gir relativt små bildefiler med god bildekvalitet.
- Støttes av praktisk talt alle nettlesere og bildeprogrammer.
JPEG er et trygt valg for vanlige fotografier.
WebP
- Moderne bildeformat utviklet for bruk på nettsider.
- Gir ofte mindre filer enn JPEG ved tilsvarende visuell kvalitet.
- Støttes av moderne nettlesere.
WebP er et godt førstevalg for fotografier når WordPress-installasjonen støtter formatet.
PNG
- Egner seg til grafikk, diagrammer og skjermbilder med skarpe detaljer.
- Støtter gjennomsiktig bakgrunn.
- Gir ofte betydelig større filer enn JPEG eller WebP når det brukes til fotografier.
Bruk PNG når det gir en tydelig fordel, ikke som standardformat for fotografier.
Kort oppsummert: Bruk WebP eller JPEG til fotografier, og PNG eller WebP til grafikk og skjermbilder.
3. Slik reduserer du bildestørrelsen
Det anbefales å tilpasse bildene før de lastes opp til WordPress.
På Windows
Du kan bruke det innebygde programmet Paint:
- Åpne bildet i Paint.
- Velg funksjonen for å endre størrelse.
- Angi ønsket bredde, for eksempel 1600 piksler.
- Behold proporsjonene slik at bildet ikke blir forvrengt.
- Lagre bildet som en ny fil, gjerne i JPEG-format.
På Mac
Du kan bruke programmet Forhåndsvisning (Preview):
- Åpne bildet i Forhåndsvisning.
- Velg Verktøy → Juster størrelse.
- Angi ønsket bredde, for eksempel 1600 piksler.
- Kontroller at proporsjonene beholdes.
- Velg Arkiv → Eksporter og lagre bildet som JPEG.
Ved eksport til JPEG kan du justere bildekvaliteten for å redusere filstørrelsen ytterligere.
På mobiltelefon
Mange mobiltelefoner lagrer bilder i svært høy oppløsning. Du kan bruke en bildeapp eller eksportfunksjon for å redusere størrelsen før opplasting.
Det er normalt ikke nødvendig å laste opp originalbildet i full oppløsning.
4. Slik legger du inn bilder i WordPress
- Logg inn på nettstedet ditt via
https://site.uit.no/dittnettsted/wp-admin. - Åpne siden eller innlegget du vil redigere.
- Klikk på + for å legge til en ny blokk.
- Velg Bilde (Image).
- Last opp et bilde fra datamaskinen, eller velg et eksisterende bilde fra mediebiblioteket.
- Velg passende bildestørrelse og plassering.
- Legg inn alternativ tekst der det er nødvendig.
- Lagre eller publiser siden.
WordPress oppretter vanligvis flere størrelsesvarianter av bildene som lastes opp. Hvilke størrelser som brukes, avhenger blant annet av nettstedets tema og innstillinger.
Merk: Hvis du bare reduserer visningsstørrelsen i WordPress, betyr ikke det nødvendigvis at den opprinnelige bildefilen blir mindre. Det er derfor god praksis å tilpasse bildene før opplasting.
5. Alternativ tekst – viktig for universell utforming
Bilder som formidler informasjon, skal ha en beskrivende alternativ tekst (alt-tekst).
Alternativ tekst brukes blant annet av skjermlesere og gjør innholdet tilgjengelig for personer med synsnedsettelser.
En god alternativ tekst beskriver den informasjonen bildet formidler i den aktuelle sammenhengen.
Eksempel:
Bilde: Studenter som arbeider sammen i et laboratorium.
God alternativ tekst: «Tre studenter undersøker prøver ved en laboratoriebenk.»
Mindre nyttig alternativ tekst: «Bilde av studenter.»
Husk at:
- Teksten bør være kort og presis.
- Den skal beskrive relevant innhold, ikke nødvendigvis alle detaljer.
- Dekorative bilder som ikke tilfører informasjon, skal normalt ha tom alternativ tekst.
- Diagrammer og figurer med viktig informasjon kan kreve en mer utfyllende forklaring i selve sideteksten.
Alt-tekst er ikke det samme som bildetekst. En bildetekst er synlig for alle og kan for eksempel oppgi fotograf, sted eller annen kontekst.
6. Opphavsrett og personvern
Før du publiserer et bilde, må du kontrollere at du har rett til å bruke det.
- Bruk egne bilder eller bilder som UiT har tillatelse til å publisere.
- Respekter lisensvilkår og eventuelle krav om kreditering av fotograf.
- Vurder personvernreglene dersom personer kan identifiseres på bildene.
- Ikke last opp bilder som inneholder taushetsbelagte eller sensitive opplysninger.
Dette gjelder også skjermbilder fra dataprogrammer, dokumenter og interne systemer.
7. Vanlige spørsmål
Hvorfor bør jeg ikke laste opp bilder i full kameraoppløsning?
Store bildefiler kan føre til langsommere nettsider, økt datatrafikk og unødvendig bruk av lagringsplass. Den ekstra oppløsningen gir ofte ingen synlig kvalitetsforbedring på skjermen.
Hvor mange piksler trenger et bilde?
Det avhenger av hvor stort bildet skal vises. Et bilde som vises med en bredde på 800 skjermpiksler, kan gjerne være 1200–1600 piksler bredt for å se skarpt ut på skjermer med høy pikseltetthet.
Hva betyr DPI?
DPI brukes særlig i forbindelse med utskrift. Ved publisering på nettsider er det først og fremst antall piksler og filstørrelsen som har betydning. Om et bilde er merket med 72 eller 300 DPI, påvirker normalt ikke visningen i nettleseren.
Hva gjør jeg dersom bildet er for stort til å lastes opp?
Kontroller først bildefilens størrelse. Reduser oppløsningen eller velg en mer effektiv komprimering, og prøv på nytt.
WordPress-serveren kan også ha egne grenser for maksimal filstørrelse og tilgjengelig lagringsplass.
8. Sjekkliste før publisering
- Bildet har en oppløsning som passer bruksområdet.
- Filstørrelsen er redusert uten vesentlig tap av synlig kvalitet.
- Bildet er lagret i et passende format, vanligvis JPEG eller WebP.
- Bildet har relevant alternativ tekst eller er markert som dekorativt.
- Opphavsrett og eventuelle krav om kreditering er ivaretatt.
- Bildet vises riktig på både datamaskin og mobiltelefon.