Vil du have 2, 3 eller flere billeder til at stå ved siden af hinanden på dit website, skal du sørge for, at billederne har præcis samme størrelse, før de lægges online. Hvordan dét gøres, når billederne som udgangspunkt har vidt forskellige størrelser, får du en lille guide i her.
Herunder kan du se, hvordan det ser ud, hvis billederne har forskellig størrelse, før de lægges ind på siden. De tre billeder har ikke kun forskellig højde. De er også beskåret, så det er svært at se, at de tre hunde er nogenlunde samme størrelse. Hanhunden Kali til venstre ser ud til at være meget mindre end Poma i midten og Brace til højre.
Det første jeg gør er at tjekke de tre billeders størrelse - om de er store nok. Brug aldrig billeder, der er mindre end de skal vises - strækkes de større, bliver de grovkornede og dårlige.
Det vil passe fint til den designskabelon, der er anvendt i dette tilfælde, hvis alle billeder er 795 px brede.
Forskellig bredde, forskellig højde, forskellig beskæring
De tre billeder er betydeligt større, end de skal være. Og de har meget forskellige størrelser.
Først vil jeg beskære billedet af Kali, så han ser ud til at have nogenlunde samme størrelse som de to andre.
Når man nævner størrelser på billeder, nævner man i øvrigt bredden før højden.
Hvis du beder en fotograf om at levere et billede, der er 1500 gange 200 pixel, kan det være et billede af Storebæltsbroen.
Bestiller du billedet 200 gange 1500 pixel, er det snarere en skorsten.
Får du at vide af din webproducent, at du skal levere billeder, der måler 795 pixel, bør du gå ud fra, at det er bredden, der nævnes.
Billedet af Brace til venstre er 1.024 pixel bredt og 1.625 pixel højt.
1 - Ret op på forskellig beskæring
De tre billeder er nu beskåret nogenlunde ens - så hundene (ikke billederne) ser ud til at have samme størrelse.
Men billederne har forskellig bredde og forskellig højde.
2 - Giv billederne samme bredde
Først sørger jeg for, at de alle får samme bredde: 795 px brede. Så kan jeg bagefter skære lidt af de to største i højden.
At ændre størrelse (uden at beskære!) kan alle billedbehandlingsprogrammer klare. Det kaldes ofte rezise
Åbn billedet i dit foretrukne billedbehandlingsprogram og find den funktion, der kan ændre billedets størrelse.
Nu er alle billeder lige brede, men de er henholdsvis 1.262, 1.441 og 1.407 pixel høje.
Jeg kan gøre et billede mindre ved at beskære det. Men jeg kan ikke gøre det større uden at det bliver forvrænget. Derfor bliver det mindste højde, der kommer til at bestemme højden på billederne.
Det er derfor billedet af Brace, der kommer til at bestemme højden.
De to andre skal beskæres, så alle bileder får samme højde - 1.262 px i dette tilfælde.
3 - Giv billederne samme højde
Jeg åbner nu de to andre billeder og beskærer dem, så de får samme højde.
Og jeg bestræber mig på at beskære dem, så toppen at hundenes hoveder er på samme linje.
Nu kan de tre hunde sættes ind ved siden af hinanden på hjemmesiden. Den ældste får førstepladsen.
Og sådan er rækkefølgen altid, når man tilpasser billeder:
- Beskær billeder (om nødvendigt)
- Lav samme bredde
- Beskær højde
4 - Sæt billederne ind på websitet
Og så kommer forsiden til at se således ud:
Flere fif om billeder og designskabelonen DIVI
Billedbehandling er tidkrævende
Det tager tid at gøre billeder klar til brug online. Hvis de billeder du leverer til din webproducent ikke har de rette størrelser, men måske først skal beskæres, lysnes og reduceres i størrelse, vil tidsforbruget nemt løbe op.
PS: De tre flotte hunde bor på akali.dk
