Liferay - bilder

Tilpasse bilder for nett

IT-info: web Målgruppe: Medarbeidere Tema: Web

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 skal passe inn.

Når man redusererer pikselbredden, følger reduksjon av pikselhøyden på automatisk. Du skal derfor kun redusere piksler i bredden. 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

Pikselbredde i spalter #

Anbefalte pixelbredder for bruk på eksterne sider. Bilder med disse pikselbreddene fyller ut spaltene, og det er derfor ikke noe poeng i større bilder, men du kan eventuelt runde litt opp for å gjøre det enklere å huske og tilpasse. Tall i parentes er forholdstall for spalte og sidebredde slik dette angis i malverket.

  • Full bredde hero image: 1661px. Kun nettredaktør kan legge ut hero image.
  • Full bredde normal: 1204px. Kun nettredaktør kan legge ut full bredde normal.
  • 3/4 spalte (75/25): 888px
  • 2-spalter m/venstremeny: 888px
  • 2/3 spalte (66/33): 788px
  • 3-spalter m/venstremeny: 580px
  • 2-spalter (50/50): 544px
  • 3-spalter (100/33): 385px
  • 4-spalter (100/25): 264px

Bilder ikke fylle ut hele spalten, og hvis du skal ha venstre- eller høyrestilt bilde må også nødvendigvis bildet være mindre. I widget kan du gjøre visning mindre ved å velge 50% eller sette lavere pixelbredde.

En bildefil bør ikke være større enn 250 kB. De fleste bildefiler er under 100kB.

Må også vurdere #

Hvis du skal ha flere bilder på en side er det ikke tilstrekkelig å forholde seg slavisk til anbefalte pikselbredder for hvert enkelt bildefil. Man må bruke skjønn, vurdere totalen av siden, se på «tyngden» av bildefilene til sammen. Med flere store/middels store bilder på siden bør man gå ned i størrelse på hver bildefil.

Melding og bildestørrelse #

Max pikselbredde for bilde i melding: 840px. 

Mer om bilder i melding.

Wiki og bildestørrelse #

Max pikselbredde for bilde i wiki: 630px. Pikselbredde for bilde ved siden av boksen med innholdsfortegnelse: 580px.

Mer om bilder i wiki.

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.  

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  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.

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

Kontakt #

Nettkontakter ved NTNU.

0 Vedlegg
2927 Visninger
Gjennomsnitt (0 Stemmer)