Hvorfor ser billeder på hjemmesider ofte dårlige ud?

Det er faktisk mere kompliceret end man lige tror. Problemet er sjældent det billede, der bliver uploadet – problemet ligger i, at hjemmesider skal fungere på alverdens forskellige skærmstørrelser, fra små telefoner til kæmpe 4K-skærme. Og det samme billede kan simpelthen ikke se godt ud i alle de formater på samme tid.

Designet virker kun med det rigtige billede

Når en hjemmeside designes, laves billedboksene typisk med et helt specifikt billede for øje. Måske er der et ansigt placeret i højre side af billedet med blank plads til venstre, hvor tekst eller en knap kan placeres. Designet ser fantastisk ud – så længe man bruger præcis det billede, det er lavet til.

Men så sker det næsten altid: Indholdsredaktøren skal skifte billedet ud. Det nye billede har balancen et helt andet sted – måske er ansigtet til venstre i stedet for højre. Pludselig virker designet ikke længere, og man ender med mærkelige beskæringer og dårlige kompromiser.

Problemet er, at designet kun fungerer med én bestemt type billede, men systemet skal kunne håndtere alle mulige forskellige billeder.

Den tekniske udfordring: Samme billede på mange skærmstørrelser

Her bliver det først rigtig kompliceret. Dit billede skal nemlig ikke bare se godt ud på én skærmstørrelse – det skal fungere på alverdens forskellige enheder:

• På en iPhone skal billedet måske vises som et lille kvadrat på 500 pixels
• På en tablet skal det være i bredformat
• På en stor 4K-skærm skal det fylde flere tusinde pixels i bredden

Det samme billede kan simpelthen ikke fungere godt i alle de her vidt forskellige formater. Det, der ser godt ud som et bredt billede på desktop, bliver til en ubrugelig strimmel på mobil. Og det, der fungerer som et kvadrat på telefonen, får alt for meget tomrum på en stor skærm.

Derfor er ét billede ikke nok

For at løse det her problem kan du ikke nøjes med én billedfil. Du skal faktisk bruge flere forskellige versioner af det samme billede – beskåret og tilpasset til forskellige skærmstørrelser.

På en lille skærm skal systemet fokusere på det vigtigste element i billedet – måske ansigtet – og beskære tæt omkring det. På en bred skærm kan det samme billede vises i fuld bredde for at udnytte pladsen.

Det betyder, at det ikke længere er nok bare at uploade ét billede og håbe, at det virker overalt. Der skal være flere forskellige versioner, hver optimeret til sin skærmstørrelse.

Hvorfor det ikke fungerer i praksis

De fleste hjemmesider arbejder kun med én billedfil til visning. Systemet kan ikke automatisk vælge den rigtige beskæring til hver skærmstørrelse, så det samme billede bliver brugt overalt – med dårlige resultater til følge.

Indholdsredaktører kan heller ikke forventes at beskære fem forskellige versioner af hvert billede manuelt og teste, at det virker på alle skærmstørrelser. Det er simpelthen for tidskrævende og besværligt. Selvom intentionerne er gode, bliver det i praksis ikke gjort.

Derfor ender man med kompromiser: Samme beskæring til alle skærmstørrelser, hvilket næsten altid ser dårligt ud et eller flere steder. Særlig slemt bliver det, hvis man bruger et lille billede som vises i en stor boks, så bliver det grynet og pixelleret og grimme artefakter fra komprimering står pludseligt tydeligt frem.

Løsningen: Automatisk generering af flere versioner

Den bedste måde at løse det her problem på er gennem teknisk automatisering. Systemet skal automatisk generere forskellige størrelser og beskæringer fra den ene uploadede fil.

Som Umbraco udvikler kan jeg programmere intelligent beskæring til forskellige skærmstørrelser. I Umbraco har vi en særlig smart funktion: Du kan sætte et fokuspunkt på billedet, der fortæller systemet, hvor det vigtigste element er – for eksempel ansigtet på et portræt eller logoet på et produktbillede.

Når systemet så automatisk beskærer billedet til forskellige størrelser, sørger det altid for at holde fokuspunktet synligt. Det betyder, at ansigtet på et portræt aldrig bliver skåret væk, uanset om billedet vises på en lille mobilskærm eller en bred desktop.

Brugeren uploader stadig kun én fil og sætter ét fokuspunkt, men systemet skaber automatisk mange versioner til visning – hver optimeret til sin kontekst og altid med det vigtigste element i centrum.

Når det er programmeret én gang, behøver det faktisk ikke være så svært. Men det skal gøres som udvikler, fordi det teknisk ikke kan løses af indholdsredaktøren.

Det handler om teknisk løsning, ikke bedre billeder

Derfor er dårlige billeder på hjemmesider sjældent et spørgsmål om dårlig billedkvalitet eller dovne indholdsredaktører. Det er et teknisk problem, der kræver en teknisk løsning.

Hvis din hjemmeside har problemer med billeder, der ser grimme ud på forskellige enheder, så er løsningen ikke at finde bedre billeder. Løsningen er at få systemet til automatisk at håndtere de mange forskellige skærmstørrelser på en intelligent måde.

Ellers bliver du ved med at kæmpe mod det umulige: At få det samme billede til at se godt ud overalt på samme tid.