Billedformater

Bliv klogere på, hvilke billedformater du skal bruge på hjemmesiden.

Sådan bruger vi billeder på hjemmesiden


Billeder kan være gode til at skabe blikfang eller være med til at understøtte dit budskab. Men det er vigtigt at tænke over, hvordan og hvorfor man bruger billeder.

Sæt dig ind i retningslinjerne for, hvordan vi bruger billeder på Fødevarestyrelsens hjemmeside:

Fødevarestyrelsen har ophavsrettigheder til alle billeder, der er lagt op på skyfish.com og billeder, der downloades fra Colourbox. Kontakt webredaktionen, hvis du skal have adgang til Skyfish eller Colourbox.

Billeder kan være gode til gøre en ellers teksttung og ensartet side visuel og mere spændende for læseren. Men pas på med at gå amok i billeder. Brug kun billeder, når det er relevant for indholdet eller en enkelt gang eller to som dekorative elementer, hvis en side har brug for et pift.

Billeder på sider til virksomheder vs. borgere

Brugen af billeder på virksomhedsrettede sider skal gerne være begrænset. Som udgangspunkt bruger vi kun billeder på 'navigationssider'. Ellers skal billeder og grafikker på virksomhedssider kun bruges, hvis de skal vise noget.

Vi bruger i højere grad billeder på borgersiderne.

Billeder på en navigationsside.

En alternativtekst (alt-tekst) er en kort tekst, der beskriver billeder på en hjemmeside eller i et dokument. Beskrivelsen bliver læst højt af skærmlæsere og andre hjælpeteknologier til personer med synshandicap eller andre handicap, der påvirker deres evne til at se billeder.

Når du bruger billeder, skal du derfor tage stilling til, om billedet er rent dekorativt eller har en indholdsmæssig betydning. Hvis det har indholdsmæssig betydning, skal du lave en alternativtekst. Du kan læse mere om, hvordan du laver en god alternativtekst og andre gode råd på vores side om webtilgængelighed.

Læs om format, størrelse og kvalitet

Et af de mest populære billedformater på nettet er det såkaldte 16:9 format. Vi bruger også formatet på Fødevarestyrelsens hjemmeside. Det gælder både til multiboks, hero, kontaktmodul mm., uanset om de er over tre, fire eller seks spalter.

Billedernes størrelse

  • Hero-bannere: Til de store hero-bannere er det en god ide at bruge store billeder med en billedstørrelse på ca. 2000x1125 pixels.
  • Spotmoduler: Til nyheder og spotmoduler på 3, 4 eller 6 spalter er det tilstrækkeligt med en størrelse på ca. 640x360 pixels.

Bemærk, at når du vælger et billede i GoBasic, kan du automatisk beskære billedet til 16:9 format som vist her:

Når vi bruger det samme format bruges på tværs af hele siden, sikrer vi, at der er et ensartet udtryk og en rød tråd gennem designet.

Vi undgår også billeder med forskellige højder som vist på disse tekstbokse:

Curabitur blandit tempus porttitor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Curabitur blandit tempus porttitor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Curabitur blandit tempus porttitor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

 Hvis du derimod beskærer billederne i 16:9 format i GoBasic, vil billederne være lige høje:

Curabitur blandit tempus porttitor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Curabitur blandit tempus porttitor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Undgå at uploade kæmpestore billedfiler som fylder flere MB, især når de bruges til mindre tekstbokse. En god tommelfingerregel er maksimalt at holde filstørrelsen til 100 KB. 

Hvis du derimod indsætter et heromodul, skal du bruge et billede i lidt bedre kvalitet, da disse moduler ofte har en stor størrelse.

Her ses et eksempel på et heromodul med et billede i lav opløsning:

Mattis Consectetur Etiam

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

 

Her er det altså godt givet ud at bruge billeder i høj kvalitet som vist her: 

Mattis Consectetur Etiam

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Du har også mulighed for at justere billedkvaliteten i GoBasic. Det ændrer ikke på billedfilens oprindelige størrelse, men derimod størrelsen på det billede, der bliver vist på siden, når brugeren åbner siden.

Det kan derfor være en god idé at vælge en lidt lavere kvalitet på større billeder, hvis du oplever, at særlige billeder loader langsomt på siden.