Bildkomprimering för webbplatser: mindre vikt utan att offra fotot
Välj upplösning, kvalitet och bildformat för att minska storleken på foton på webbsidor utan att text och kanter suddas ut.

En receptsida tar tid att öppna eftersom varje bild skickades direkt från kameran och väger flera megabyte. Läsaren behöver bara se maten tydligt i mobilens bredd. Att minska filvikten kan förändra upplevelsen, så länge som komprimeringen görs med kriterier.
Mått kommer före kvalitetsprocent
Om bilden upptar 800 pixlar på sidan finns det ingen anledning att alltid publicera versionen med 6000 pixlar. Ändring av storlek först minskar ofta kvaliteten mer än aggressiv åtdragning. AnvändaKomprimera bildenatt prova och observera både dimensionen och slutvikten.
JPEG och WebP fungerar bra på fotografier; PNG tenderar att vara mer meningsfullt i grafik eller bilder med transparens. Valet beror på innehållet och kompatibiliteten som krävs. En bild med små siffror kan se dålig ut vid acceptabla komprimeringsnivåer för landskap.
Testet ska ske där bilden visas

Jämför original och komprimerat i full storlek på sidan, på ljusa och mörka skärmar där det är relevant. Se ansikten, produktkanter, övertoningar och infogade bokstäver. De vanligaste defekterna är synliga block, dubbla konturer och fläckar i enhetliga områden.
Namn, versioner och ansvar
Anta beskrivande filnamn, som t.exkaka-choklad-skiva.webp, och alternativ text som beskriver innehållet för de som inte kan se bilden. Bevara originalversionen i ditt bibliotek. Om du publicerar många bilder, standardisera bredder och jämför laddning på en långsam anslutning. Att komprimera väl är att hitta den minsta versionen som förblir trevlig och begriplig.
Sidvikten är summan av bilderna
Ett foto reducerat från 3 MB till 280 KB innebär viktiga besparingar, men ett galleri med tjugo bilder av denna storlek kräver fortfarande flera megabyte. Titta på uppsättningen: omslagsstorlek, miniatyrer, artikelbilder och version för större skärmar. Att lägga upp samma enorma foto i varje utrymme slösar besöksdata. När plattformen stöder responsiva bilder, tillhandahåll versioner som är proportionella mot skärmstorleken.
Undvik också på varandra följande komprimeringar under hela redigeringen. Om någon sparar en redan reducerad JPEG och nästa redigerare komprimerar den igen, ackumuleras förlusten. Behåll en kvalitetskopia av originalfotot, med ett namn och en organisation som gör att du kan hitta det månader senare. På så sätt kan du generera nya storlekar när layouten ändras, utan att vara beroende av filer som redan har förlorat detaljer.
Läs också
- Ta bort produktfotobakgrund utan att radera kanter och detaljer
- Hur man tar bort bakgrunden från en bild och förbättrar beskärningskanterna
- PNG, JPG eller WebP: vilket format ska man använda i varje situation?
Teknisk referens: bildformat, komprimering och transparens (MDN).