Tilpasse bilder for nett - Kunnskapsbasen
Tilpasse bilder for nett
Veileding for tilpassing av bilder for bruk på nett.
Hvorfor tilpasse bilder
Hvorfor må man tilpasse bilder før digital bruk? Svar: Det er brukervennlig.
- For mange store bilder gjør en side treg å laste for brukere med relativt dårlig wifi og eldre datamaskiner/mobiler
- Bilder må fungere responsivt, det vil si passe for visning på alle plattformer
- Bedre brukeropplevelser og lavere fluktfrekvens gir høyere ranking i Google (SEO) og mer trafikk på sidene
Hjelp med å tilpasse
Trenger du hjelp for å tilpasse bilder? Kontakt din nettredaktør / nettkontakt.
Hvis du kan og vil tilpasse bilder selv, kan du lese videre på denne siden.
Jobb med kopier
Aller først: Ta kopi av original bildefil og jobb med kopien.
Vi gjør ingenting med original fil, bortsett fra å lagre fila trygt.
Størrelsen på bildefil
E-læring: Beskjære/croppe bilder (NTNU Hjelp på YouTube).
Tilpassing av bildefil betyr først og fremst å redusere størrelsen på fila. Det kan du gjøre på flere måter
- Før opplastning noe sted, kan du beskjære bildet, redusere pikselstørrelse og gjøre andre redigeringer i et bildebehandlingsprogram.
- Etter at du har lastet opp bildet i Liferays dokumentlager kan du erstatte for store bilder i Liferay
- Etter at bildefil er lagt i widget i Liferay kan du redusere visningsstørrelse ved å høyreklikke på bildet i widget og velge Bildeegenskaper
Photoshop har en funksjon for å tilpasse bildefila uten at kvaliteten forringes: File - Export - Save for web.
Pikselstørrelse
Piksler (eng. pixles, forkortet px) er det minste elementet i et digitalt bilde, en bildefil. Hver piksel er et farget punkt.
Vanligvis skrives størrelsen på en bildefil slik: 800x300 px, 72 ppi (oppløsning, points per inch). 800 er pixelbredde, ofte referert til og snakket om, og det tallet og størrelsen vi eventuelt skal redusere før bruk av bildefila. Pikselbredde er viktigst fordi nettsider består av spalter, der tekst og bilder helst skal fylle ut spalten i bredde.
Når man redusererer pikselbredden, følger reduksjon av pikselhøyden på automatisk. Du skal derfor kun redusere piksler i bredden når du jobber med bildet. Hvis du redigerer både bredde og høyde samtidig uten å ta hensyn til sideforhold/aspect ratio blir bildet forvrengt.
Man kan heller ikke pikselere bildet opp, det vil si gi bildefila flere piksler. Da blir bildet ødelagt.
For å sjekke størrelse og pikselbredde på en bildefil:
- PC: Høyreklikk - Egenskaper - Generelt og Detaljer
- Mac: Vis info
Piksler i spalter
Anbefalte piksler i bredde for bruk på eksterne sider. Tall i parentes er forholdstall for spalten slik dette angis i malverket.
- Full bredde hero image: 1300 piksler i bredde. Kun nettredaktør kan legge ut hero image.
- Full bredde normal: 1250 piksler i bredde. Kun nettredaktør kan legge ut full bredde normal.
- 3/4 spalte (75/25): 950 piksler i bredde
- 2-spalter m/venstremeny: 950 piksler i bredde
- 2/3 spalte (66/33): 850 piksler i bredde
- 3-spalter m/venstremeny: 650 piksler i bredde
- 2-spalter (50/50): 650 piksler i bredde
- 3-spalter (100/33): 400 piksler i bredde
- 4-spalter (100/25): 300 piksler i bredde
Særlig visning av bilder i høyden endres radikalt mellom ulike spalter, plattformer og skjermformat. Sjekk derfor responsivt design gjennom hele arbeidsprosessen. Designe for mobil først? Bytte til annen mal?
Som et utgangspunkt bør ikke en bildefil være større enn 250 kB.
Melding og bildestørrelse
Anbefalt:
- Max for melding: 840 piksler i bredde
Wiki og bildestørrelse
Anbefalt::
- Max for wiki: 630 piksler i bredde
- Max for wikibilde ved siden av innholdsfortegnelse: 580 piksler i bredde
Bildefiltyper
Anbefalte og mest brukte filtyper:
Rasterbilder, fila er bygget av punkter/piksler
- JPEG, JPG: Optimalisert filtype for alle bilder. Ikke for transparent bakgrunn. Noe kvalitetstap ved lagring. Er bildet jobbet mye med og lagret mange ganger? Vurder å ta ny kopi av originalen og begynn på nytt.
- PNG: Større filer. Mest for illustrasjoner og logoer. Støtter transparent bakgrunn. Lossless, ikke kvalitetstap ved lagring. Bilder med tekst bør lagres i dette formatet.
Vektor, kan forstørres uendelig, alltid skarpt:
- SVG: Mest for logoer, grafikk og ikoner.
Horisontale og vertikale bilder
På desktop ser vi horisontal skjerm, på mobil på vertikal skjerm. Samme bildeformat på nettsiden må passe for begge visninger.
Vi bruker stort sett horisontale bilder. De er enklere å integrere inn på nettsiden sammen med tekst i spalter, ser best ut og er lettest å «lese», oppfatte og forstå. Skal du ta bilder selv bør du derfor snu kamera/mobil horisontalt slik at du ikke får stående bilder (det samme med videoopptak).
I noen tilfeller kan det fungere med vertikale bilder, eksempelvis i melding der bildet høyrestilles og man bruker tekstbryting.
Og som sagt: Vi ser stort sett alt nettinnhold på vertikal skjerm på mobilen. Test derfor alltid nettsiden din i mobilvisning.
Portrettbilder
Portrettbilder gjør seg oftest best vertikalt, det vil si stående format. Bildeformatet nær er mest brukt for portretter, og innebærer at hode og hals fyller bildet, mens skuldre vanligvis er utelatt. Bildestørrelse 250x330px passer på nettsiden.
Hvis siden skal ha en gruppe portretter, eller andre typer bilder som viser personer, bør man eventuelt beskjære bildene slik at utsnitt på bildene gir et likt uttrykk. Særlig bør personer framstilles med like store hoder såfremt det er naturlig å se bildene i sammenheng.
Men portrettbilder må ikke være vertikale. Bilder i NTNUs ansattprofiler settes automatisk til kvadratisk format, og croppes automatisk til kvadratisk format hvis du laster ned bildet. PS: Hvis du vil bruke ansattbilder andre steder på nett eller i kommunikasjonsøyemed, bør du spørre, og kanskje også innhente samtykke.
Tilby gjerne høyoppløselige bilder av personer. Lenk til originaler i FotoWare, eventuelt Flickr.
Helst ikke tekst i bilder
Det er en god regel å unngå tekst i bilder.
Hvis du eller din leder likevel mener at det må være tekst i bildet, krever universell utforming at teksten også står ved siden av eller under bildet og kan leses som vanlig tekst. Sjekk dessuten at teksten i bildet kan leses på mobil.
Navn på bildefil
Det er god kutyme å lagre bildet (obs, kopien din!) med et navn som forklarer hva filen inneholder. Det blir enklere for deg og andre å finne bildet og se hva motivet er ved å lese et forståelig filnavn. Gode filnavn er også SEO-vennlig. Tall, bokstaver (unntatt æøå), bindestrek / tankestrek kan brukes i filnavn.
Bildebehandlingsprogram
Moderat redigering
Når du behandler bilder i et bildbehandlingsprogram:
- Vi bør ikke manipulere motivet utover rimelig beskjæring
- Bildet bør heller ikke redigeres for mye på andre måter, som å lage for stor kontrast, overdreven fargebruk, eller gjøre bildene veldig lyse eller mørke. Hvitbalanse i bildet er ofte bra å sjekke.
Forslag til programvare
Du kan bruke programmet som passer deg best. Noen forslag:
- Program som følger med din PC eller Mac
- Snagit – kontakt IT Hjelp for å få dette programmet (NTNU har lisens)
- Xara Designer Pro X11 – via progamfarm, se mappen Office
- Photoshop – for mer avanserte brukere
- Liferay – for resize
- FotoWare – for crop og resize
- Gratis løsninger på nett for enkel redigering