5 tips til gode billeder i flexboksen

Vi har samlet fem tommelfingerregler, som kan hjælpe dig med på forhånd at vurdere, om dit billede vil egne sig til flexboksen, eller om der måske er behov for beskæring først - og i så fald hvordan du kan gøre. Så slipper du for ærgrelsen (og close-up billedet af den store næse eller det støvede gulv), og allerbedst: Du får et slutresultat, der tager kegler. 

Tip #1: Brug et bredformat-billede

Højformatsbilleder vil næsten altid fungere dårligt i flexboksen, da det er designet til horisontale billeder. Har du kun et højformatsbillede til rådighed, så prøv at gemme en kopi af billedet på din computer og beskære det til et liggende/horisontalt format.

Sådan gør du:

1. Højreklik, kopier og gem billedet.
2. Højreklik på din kopi, vælg rediger eller åbn med og vælg dit billedbehandlingsprogram.
3. Klik på Beskær eller eller Crop - ikonet ser typisk sådan ud:
   

   

4. Vælg gerne et af de prædefinerede bredformater, og placer markeringen sådan, at den midterste vandrette del af dit udsnit rummer det vigtigste på billedet. Der skal altså være ekstra plads i både top og bund, og gerne i begge sider også (se illustration herunder). Klik Gem og prøv så at lægge billedet ind i din flexboks.

 

Tip #2: Tjek, om midterste vandrette del kan stå for sig selv

Har du et billede i bredformat, kan du vurdere, om det har flexboks-potentiale, ved at se om den midterste del af billedet vil kunne stå for sig selv. Hvis ansigtet/hovedmotivet er inden for denne midterste del, vil billedet som regel se fint ud. Oftest er der plads til lidt mere end denne tredjedel i fleksboksen, som eksemplet herover illustrerer, men brug det som tommelfingerregel - så har du et godt pejlemærke. 

Tip #3: Undgå billeder med tekst

- medmindre teksten er placeret i midterste vandrette tredjedel på et horisontalt billede.

Flexboksen er ikke beregnet til billeder med tekst, da flexboksen er responsiv og derfor "bevæger sig" alt efter skærmstørrelse. Derfor vil flexboksen på små skærme blive højere og smallere, og på større skærme bredere og fladere. Derfor vil der næsten altid være noget af teksten, der forsvinder enten i højden eller bredden.

Tip #4: Brug billeder i høj kvalitet

Det kan ikke siges ofte nok: Vælg billeder i god kvalitet. Billedkvaliteten på din hjemmeside gør en verden til forskel for det førstehåndsindtryk, man får, når man besøger hjemmesiden. Bruger du et billede med lav opløsning, risikerer du et grynet og pixeleret udseende på billedet, fordi det bliver strakt større, end det er beregnet til. 

Billeder med en opløsning på 800-1000 px i bredden er passende, når de skal bruges på hjemmesiden.

Tip #5: Husk, at nogle billeder simpelthen ikke er egnede

Sidder du med et meget lille billede (med lav opløsning), et close-up af et ansigt, eller et højformatsbillede, vil du ikke opnå gode resultater, og så er det faktisk bedre at vælge et helt andet billede. Du kan evt. bruge mere generelle billeder som temabilleder af fx et par kaffekopper, nogle bøger, et stykke natur, musikinstrumenter, noder eller lignende. Se, hvad du har i arkivet, søg i et gratis billedarkiv på nettet eller kig blandt de ikoner og billeder, du finder i mappen "Materialer fra DKM" i din hjemmesides filliste.

Vi håber, at ovenstående konkrete tips kan hjælpe med at gøre dit arbejde med flexboksen både lettere og flottere. Du er altid velkommen til at kontakte os i supporten, hvis du har spørgsmål eller kommentarer til emnet.

God fornøjelse!