Bilder för webbplatser

Ändra bildstorlek utan att förvränga bilden

Ändra bildstorleken utan förvrängning: lås proportionerna, ändra ett mått och välj beskärning eller kanter när en annan form behövs.

Av Pixilo · Uppdaterad

Ändra storlek, beskära eller lägga till kanter?

Ett bredare ansikte beror ofta på fel bildförhållande. Högre exportkvalitet rättar inte till det.

Storleksändring ändrar pixelantalet och behåller innehåll och form om måtten är proportionella. Beskärning tar bort innehåll. Kanter placerar hela bilden på en större yta med färg eller genomskinlighet.

Välj utifrån det som måste finnas kvar. Lite himmel kan kanske tas bort, men inte ett produkthörn eller sista raden i en instruktion.

Samma blomvas i två storlekar med låsta proportioner.

Ändra storleken med Pixilo

  1. Kontrollera originalmåtten i filegenskaper eller en redigerare. Använd originalet i full upplösning.
  2. Välj slutmått enligt kraven och visningsytan. Förstora inte en liten källa utan anledning.
  3. Ändra bildstorlek. Behåll låsningen av proportioner och ange önskad bredd eller höjd. Verktyget beräknar det andra måttet automatiskt.
  4. Bearbeta och ladda ned. Kontrollera mått och utseende i den storlek som ska användas.

Låset är på som standard. För 2400 × 1600 beräknar bredden 1200 höjden 800. Utan lås är värdena oberoende; ett tomt fält behåller originalmåttet och kan sträcka bilden. Kontrollera båda före behandling.

JPG, PNG och WebP som stöds ritas om och exporteras i samma format. JPEG och WebP kan förlora detaljer. Behåll originalet för framtida versioner.

Exempel: att ändra bredden från 960 till 480 pixlar ger automatiskt höjden 320. Låsningen av proportioner är på.
Exempel: att ändra bredden från 960 till 480 pixlar ger automatiskt höjden 320. Låsningen av proportioner är på. Ursprunglig PNG.

Beräkna mått med samma bildförhållande

2400 × 1600 motsvarar 3:2. Vid 1200 pixlars bredd ska höjden vara 800.

Ny höjd = ursprunglig höjd × ny bredd ÷ ursprunglig bredd. Omvänt gäller ny bredd = ursprunglig bredd × ny höjd ÷ ursprunglig höjd. Avrunda till hela pixlar.

Exempel med bibehållna proportioner
OriginalNy breddPassande höjd
2400 × 16001200800
1600 × 900800450
1200 × 1800600900
2000 × 200010001000

Halverade mått ger en fjärdedel av pixlarna. Filstorleken påverkas också av format, innehåll och komprimering.

Gör ett liggande foto kvadratiskt

1600 × 900 blir proportionellt 800 × 450. För 800 × 800 saknas 350 pixlar på höjden.

Beskär för att fylla kvadraten

Välj en kvadrat i beskärningsverktyget med det viktiga motivet kvar. En beskärning på 900 × 900 kan minskas till 800 × 800. Sidorna försvinner delvis men bilden förvrängs inte. Mitten är inte alltid bästa valet.

Behåll hela fotot med kanter

Placera 800 × 450 på en yta på 800 × 800 i en lämplig redigerare. Centrering lämnar 175 pixlar ovanför och under. Välj färg eller genomskinlighet. Pixilo lägger inte till detta utrymme automatiskt.

På webben fyller object-fit: cover genom att beskära, medan object-fit: contain visar hela bilden. Se MDN:s object-fit-referens. CSS ändrar visningen, inte filstorleken.

Varför kan bilden ändå bli suddig?

Rätt proportioner garanterar inte skärpa. Förstoring uppskattar nya pixlar men återställer inte saknade detaljer.

Förminskning kan göra liten text och tunna linjer otydliga. Testa verklig visningsstorlek och prova fler pixlar, tätare beskärning eller mindre komprimering.

Skärmar med hög pixeltäthet kan behöva fler bildpixlar än CSS-pixlar. Förstora ändå inte en svag källa bara för ”2×”. Läs guiden till bildmått för webbplatser.

Håll bilden inom maximala mått

För högst 1200 × 800 använder du det mindre av maximal bredd ÷ ursprunglig bredd och maximal höjd ÷ ursprunglig höjd. Multiplicera båda måtten med faktorn.

3000 × 2000 blir 1200 × 800. Ett stående foto på 2000 × 3000 behöver cirka 533 × 800, eftersom 800 ÷ 3000 begränsar höjden. Att tvinga det till 1200 × 800 förvränger det. En bild som redan passar behöver inte förstoras.

Avrunda och kontrollera gränserna. En pixels skillnad kan bero på avrundning; 3:2 till 3:4 kräver beskärning eller kanter.

”Högst 1200 × 800” tillåter ett smalare stående foto. ”Exakt 1200 × 800” kan kräva annan komposition. Kontrollera även minimimått: en liten källa kan behöva förstoras med sämre skärpa som följd.

Granska motiv och kanter

Jämför under samma förhållanden: cirklar ska vara runda, ansikten naturliga och linjer oförvrängda. Kontrollera alla kanter så att händer, produkter, text eller logotyper inte kapas.

Tjänsten kan beskära på nytt. Använd placeringsinställningar och håll viktigt innehåll borta från kanterna.

Stora genomskinliga marginaler gör en logotyp liten. Beskär vid behov men behåll varumärkets föreskrivna fria utrymme. Granska skärmbildstext i slutstorleken.

Vanliga frågor

Kan jag ändra bildförhållandet utan beskärning?

Med kanter behålls allt. Utan dem kräver en annan form beskärning, förvrängning eller nytt innehåll.

Varför sträcks bilden bara på webbplatsen?

Sidan kan ange fel mått. Kontrollera visningsstilarna före originalet och använd proportionell höjd.

Är storleksändring samma sak som komprimering?

Nej. Den första ändrar pixelmått, den andra lagring. Båda kan minska filstorleken.

Bör jag beskära först?

Vanligen ja: välj kompositionen i originalet och ändra sedan storlek en gång.

Välj formen före export

Behåll proportionerna för hela bilden och beskär när en annan form krävs.

Ändra bildstorlekBeskär bilden →