Billedformater

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

Brug kun billeder, som Fødevarestyrelsen har ophavsrettigheder til

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.

Brug billeder med omtanke

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

Brugen af billeder på virksomhedsrettede vs. borgerrettede sider

Brugen af billeder på virksomhedsrettede sider skal gerne være begrænset. Som udgangspunkt bruger vi kun billeder  niveau to sider, som også kaldes 'navigationssider'. Ellers skal billeder og grafikker på virksomhedssider kun bruges til, hvis de skal vise noget. Billeder bruger vi i højere grad på borgersiderne.

Eksempel på brugen af billeder på en niveau to/navigationsside.

Husk også at give billeder ALT-tekster til skærmlæsere eller markere dem som dekorative:

Læs mere om, hvorfor dette er vigtigt i afsnittet om tilgængelighed

Læs om, hvordan du indsætter billeder og brug af mediebiblioteket

Guide til rigtig billedbrug

Et af de mest populære billedformater på nettet er det såkaldte 16:9 format. Dette format anbefaler vi, at du bruger i dine moduler. Det gælder både ved brug af multiboks, hero, kontaktmodul mm., uanset om de er over tre, fire eller seks spalter.

Til de store hero-bannere er det en god ide at bruge store billeder med en billedstørrelse på ca. 2000x1125 pixels.

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 som vist i ovenstående eksempel, 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 som billederne i ovenstående eksempel. En god tommelfingerregel til billeder som disse er maksimalt at holde filstørrelsen til 100 KB. 

Hvis du derimod indsætter et heromodul, er det godt givet ud at have 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:

16:9 formatet

Et af de mest populære billedformater på nettet er det såkaldte 16:9 format. Dette format anbefaler vi, at du bruger i dine moduler. Det gælder både ved brug af multiboks, hero, kontaktmodul mm., uanset om de er over tre, fire eller seks spalter.

Til de store hero-bannere er det en god ide at bruge store billeder med en billedstørrelse på ca. 2000x1125 pixels.

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:

 

Purus Sollicitudin Cursus

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

Purus Sollicitudin Cursus

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

Purus Sollicitudin Cursus

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 som vist i ovenstående eksempel, vil billederne være lige høje:

 

Purus Sollicitudin Cursus

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

Purus Sollicitudin Cursus

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

Purus Sollicitudin Cursus

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

Størrelse på billedfiler

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

Hvis du derimod indsætter et heromodul, er det godt givet ud at have 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.

Valg af kvalitet i GoBasic

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:

Hvis du stadig er i tvivl

Hvis du stadig er i tvivl om, hvordan du lægger billederne ind, så findes der en video på GoBasics E-læring, hvor du kan få hjælp til, hvordan man gør.

Gå til GoBasic E-learning