Billedformater forklaret: 1:1, 4:5, 9:16, 16:9 og flere

Et billedformat er et billedes form: dets bredde i forhold til dets højde, skrevet som to tal som 16:9. En video på 1920×1080 og et miniaturebillede på 1280×720 har forskellige størrelser, men samme 16:9-format, så det ene kan skaleres til det andet uden beskæring. De fleste designproblemer med »den forkerte størrelse« er i virkeligheden problemer med den forkerte form.

De almindelige billedformater og hvor de bruges

De præcise pixelmål for hver platform står i billedstørrelser til sociale medier. Læg mærke til, hvor få former der er: kan du designe godt i 1:1, 4:5, 9:16 og 16:9, dækker du det meste af et brands tilstedeværelse på sociale medier.

Sådan regner du et billedformat ud

Tag bredden og højden og divider begge med det største tal, der går op i dem begge, den største fælles divisor. Det, der er tilbage, er formatet i sin enkleste form.

1. 1

   Start med størrelsen

   Lad os sige 1080×1350, et Instagram-opslag i højformat.

2. 2

   Find den største fælles divisor

   Det største tal, der går op i både 1080 og 1350, er 270.

3. 3

   Divider begge sider

   1080 ÷ 270 = 4 og 1350 ÷ 270 = 5. Billedformatet er 4:5.

4. 4

   Eller brug et decimaltal

   Divider bredde med højde: 1080 ÷ 1350 = 0,8. Decimaltal er praktiske til akavede former som 1200×630, der er omkring 1,91, deraf 1,91:1.

Hvis du hellere vil slippe for at regne i hånden, gør disse få linjer JavaScript det samme i en browserkonsol.

const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720

Omregn størrelser uden at ændre formen

For at skalere et billede og beholde formatet bruger du én formel: ny højde = ny bredde × formatets højde ÷ formatets bredde. For en 16:9-ramme, der er 1280 pixel bred, bliver det 1280 × 9 ÷ 16 = 720. For en 4:5-ramme, der er 1600 pixel bred, bliver det 1600 × 5 ÷ 4 = 2000.

Den modsatte vej er lige så enkel: ny bredde = ny højde × formatets bredde ÷ formatets højde. En 9:16-video, der skal være 1280 høj, er 1280 × 9 ÷ 16 = 720 bred. Får du et decimaltal, runder du af til nærmeste hele pixel; forskellen er usynlig.

Hvad der sker, når du ændrer billedformat

Skalering bevarer formen. Ændrer du formatet, gør den ikke, og du har kun tre ærlige muligheder: skær en del af billedet væk, tilføj plads omkring det eller omarranger designet til den nye form. Den fjerde mulighed, at strække, forvrænger hvert bogstav og hver cirkel, og folk ser det med det samme.

Det er det, ændring af størrelse i Gradiently gør med Pro: vælg de størrelser, du skal bruge, og hver kopi får lavet layoutet om til sin form, mens Marken bagved gengives på ny i hvert format frem for at blive beskåret fra ét billede. Ét udtryk, alle størrelser gennemgår det.

Hvilket billedformat skal du vælge til et opslag

Når en platform tager imod flere former, så vælg den, der fylder mest på en telefonskærm. På Instagram er det 4:5, som er højere end et kvadrat og klarer profilgitterets beskæring bedst; størrelse på Instagram-opslag forklarer hvorfor. På Pinterest er en 2:3-pin standarden; længere pins findes, men kan blive skåret af i feedet, som beskrevet i størrelse på Pinterest-pins.

Til alt, der ses på et fjernsyn eller en bærbar, er 16:9 det sikre valg, og derfor bruger YouTube-miniaturer og slides det. Til alt, der ses i fuld skærm på en telefon, er 9:16 den eneste form, der fylder den. Er du i tvivl, så design den lodrette og den brede udgave først: kvadratet og højformatet passer fint imellem dem.

Billedformat i CSS

På nettet holder CSS-egenskaben aspect-ratio en boks i form ved enhver bredde, så layouts ikke hopper, mens billeder og videoer indlæses. Den understøttes i alle nuværende browsere; se MDN's reference for aspect-ratio.

.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}

Formater betyder også noget til tryk og video, med deres egne konventioner. Til videoformater, se videostørrelser til sociale medier, og til hvordan pixelantal hænger sammen med fysisk størrelse, se DPI mod PPI.