Bildestørrelser og videostørrelser

Bildestørrelser på uio.no

Artikkelmal/arrangementsmal

Når bilde legges inn i bildefeltet bruk 16:9 format. 

• Bilde i toppen av en artikkel: 1000*562 piksler (format 16:9)
• Bildet legger seg på toppen under ingressen i artikkelen/arrangementet
• Det er dette bildet som vises i feeder

Anbefalte bildestørrelser når du legger bilder inn i hovedinnholdsfeltet:

• landskapsformat: 690*388 (16:9 format) eller 690*517 piksler (format 4:3)
• portrettformat: 517*690 piksler
• kvadratisk format: 690*690 piksler

Anbefalte bildestørrelser for publikasjoner i artikkelmal:

• portrettformat: 517*690 piksler
• kvadratisk format: 690*690 piksler

Anbefalte bildestørrelser for karriereintervju i artikkelmal:

• i hovedfeltet: 1000*562 piksler (format 16:9)
• portrettformat: 517*690 piksler
• landskapsformat: 690*388 ( format 16:9) eller 690*517 piksler (format 4:3)

Disputasmaler

• portrettformat: 517*690 piksler

Personpresentasjoner

• 300*400 piksler (oppjustert fra tidligere for å passe alle skjermtyper)

Forsidemal

• i fullbreddeboks på forsider: 1200 x 675 piksler (format 16:9)
• i halvbreddeboks på forsider:
  • portrettformat: 560x747 piksler
  • landskapsformat: 560 x 315 piksler (format 16:9)
• i infoboks: 690x517 piksler ( format 4:3)

Faktaboks/infoboks

• veiledning og bildestørrelser for faktabokser i artikler
• veiledning og bildestørrelser for infoboks på forsider

Hovedbilde på forsider til fakultet, institutt, senter og uio.no

• Bilde i toppen på fakultet, institutt og senter: 1395 x 514 (format 279:103)
  • Legges i første boks på forsiden.
  • Bruk sub-header-box-big under "spesielle innstillinger" i boksen. Sett i tillegg sub-header-white-seal hvis bildet krever hvit tekstfarge
  • Bildet vil beskjæres på sidene for å passe på ulike skjermer. Legg til motive-right eller motive-left under "spesielle innstillinger" hvis motivet ikke er i midten av bildet.
  • Eget bilde for visning på mobil: 768 x 576 (format 4:3)
    Mobilbildet legges til ved å lime inn følgende kode i brødtekstfeltet i boksen der hovedbildet ligger:
    <p class="mobile-image"><img alt="DIN ALTTEKST" height="576" src="DIN URL" width="768" /></p>
    (fyll ut med alttekst og URL-en til bildet du skal bruke)
• Bilde på forsiden uio.no: 840*473 (format 16:9)
  • Legges i første boks på forsiden.
  • Teksten som vises sammen med toppbildet legges inn i brødtekstfeltet i samme boks, på følgende format: 

    <p>Vi utdanner studenter med kunnskap, evne og vilje til å skape en bedre verden.</p>
    <p><a class="read-more" href="/studier/bli-student/index.html">Bli student hos oss</a></p>

  • Hvis bildet skal ligge til høyre for teksten: sett frontpage-uio-{orange/blue/green}-img-right på spesielle innstillinger (velg én av de tilgjengelige fargene). 
  • ​​​Hvis bildet skal ligge til venstre for teksten: sett frontpage-uio-{orange/blue/green}-img-left på spesielle innstillinger (velg én av de tilgjengelige fargene).
  • Eget bilde for visning på mobil: 768 x 576 (format 4:3)
    Mobilbildet legges inn ved å lime inn følgende kode i kildevisning av brødtekstfeltet i boksen der toppbildet ligger:
    <p class="mobile-image"><img alt="DIN ALTTEKST" height="576" src="URL-en til bildet" width="768" /></p>
    Hvis denne koden legges over teksten i redigeringsfeltet vil det vises før teksten på mobil, og omvendt. 

• For samarbeidsprosjekter og SFF
  • SFF kan ha SFF-merket på nettsiden under forsidebilde.
  • Samarbeidsprosjekter kan ha logo til UiO og andre institusjoner under forsidebildet. Opptil tre logoer kan vises på denne måten, er det flere partnere må disse synliggjøres enten som liste med lenker eller logoer nederst på forsiden.
  • Logoene/merkene må ha en høyde på 60 piksler.
  • Slik legger du inn:
    • Legg inn i kildevisning i samme boks som forsidebildet:
      <ul class="collaboration-part-of">
      <li>Samarbeidspartnere:</li>   
      <li class="collaboration-part-of-uio"><a href="lenke til institusjon"></a></li><img alt="Legg inn allternativ tekst"src="/URL til logo/merke"></li>
       <li class="collaboration-part-of-image"><a href="lenke til institusjon"></a></li><img alt="Legg inn allternativ tekst" src="/URL til logo/merke"/></li>
      <li class="collaboration-part-of-image"><a href="lenke til institusjon"></a></li><img alt="Legg inn allternativ tekst" src="/URL til logo/merke" /></li></ul>
    • Se eksempel på: Hylleraas-senteret

Bildegalleri

Bildegalleriet håndterer alle formater, men vi anbefaler å bruke 16:9- eller 4:3-formater for landskap, og 3:4 for portrett.

For å sikre god kvalitet i fullskjermvisning bør bildene være litt større enn i vanlig brødtekst, men en bredde på 1200 piksler er tilstrekkelig.

Videostørrelser 

Video i landskapsformat

Video på en nettside skal som hovedregel ha formatet 16:9, altså landskapsformat. For å finne ut hvor mange pixler videoen skal ha, kan du ta utgangspunkt i de bildestørrelsene som er i 16:9-format. Her følger noen eksempler for de vanligste malene: 

Artikkel/arrangementsmal/underside på studieprogram:

• i toppen av en artikkel: 1000x562 pixler (16:9 format)
• i innholdsfeltet: 690x388 pixler (16:9 format) 

Forsidemal/studieprogramforside:

• i fullbreddeboks: 1200x675 pixler (16:9 format)
• i halvbreddeboks: 560x315 pixler (16:9 format)

Video i portrettformat

Videoer som lages til sosiale medier er oftest i portrettformat. Generelt er det anbefalt å lage en egen versjon i landskapsformat til nettsidene.

Noen ganger er det allikevel ønskelig å bruke video i høydeformat på nett. Ved å legge til et sitat på siden av filmen, blir visningen balansert. 

Se hvordan du kan vise videoer i portrettformat med et sitat til høyre eller venstre.