Att göra en bild klar för publicering

Skala om till den storlek bilden faktiskt kommer att visas i, på sin höjd dubbelt så stor för skärmar med hög pixeltäthet. Beskär till den form layouten behöver i stället för att låta webbläsaren klämma ihop den. Komprimera tills artefakterna precis dyker upp, och backa sedan ett steg. Ta bort metadata sist. Ordningen spelar roll: varje steg efter det första arbetar på långt färre pixlar.

Måtten kommer först

Antalet pixlar växer med kvadraten på bredden, så en måttlig skillnad i mått är en enorm skillnad i datamängd. En bild som lagras 4000 pixlar bred och visas i en kolumn på 800 pixlar bär omkring tjugofem gånger den data den behöver, och ingen kvalitetsinställning tar igen det.

För att välja en målbredd, mät det bredaste bilden någonsin renderas i layouten, inte det bredaste skärmen blir. Ett kort i ett rutnät med tre kolumner kanske aldrig blir bredare än 380 pixlar. Om en fil används på flera ställen, dimensionera den efter det största.

Enhetspixlar, CSS-pixlar och myten om DPI

En CSS-pixel är en layoutenhet, inte en fysisk punkt. Enhetspixelkvoten är hur många enhetspixlar skärmen målar per CSS-pixel: 1 på äldre bildskärmar, 2 på de flesta moderna telefoner och bärbara datorer, 3 på vissa telefoner. En kolumn på 800 CSS-pixlar vid kvot 2 målas med 1600 enhetspixlar, vilket är varför en bild dimensionerad efter sin CSS-bredd ser mjuk ut.

Den praktiska regeln är 2x. Exportera i dubbla visningsbredden och låt webbläsaren skala ner. Att gå till 3x kostar ytterligare 125 % i datamängd för en skillnad få människor ser på normalt betraktningsavstånd.

DPI och PPI som lagras i en fil är irrelevanta för webben. De är ett enda huvudvärde som säger vilken fysisk storlek filen ska tryckas i, och webbläsare ignorerar det helt.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Att exportera i "300 DPI" tillför inga pixlar och ändrar inga bilddata.

Vad omsampling gör

Att skala ner betyder att många källpixlar blir en. Detaljer finare än det nya rutnätet kan inte representeras, och om omsamplaren tar prov ur för få källpixlar i stället för att medelvärdesbilda över hela ytan viks de detaljerna tillbaka som falska mönster: taggiga diagonaler, och moaré på fina upprepade texturer som en randig skjorta eller en tabell med enpixelramar. En bra nedskalning medelvärdesbildar varje bidragande pixel och behöver oftast lite skärpning efteråt.

Att skala upp skapar inga detaljer. Interpolation gissar bara värden mellan pixlar som redan finns, så resultatet blir mjukt eller blockigt. Uppskalare med maskininlärning hittar i stället på trovärdiga detaljer, vilket inte är detsamma som att återskapa dem.

Bildförhållande: beskära, lägga till lister eller sträcka ut

Beskärning behåller motivet i rätt skala och kastar bort kanterna, och är rätt standardval. Att lägga till lister behåller hela bildrutan men lägger till fält och tvingar fram ett val av listfärg; det gör nytta när ingenting får skäras bort, som med konstverk eller ett diagram. Att sträcka ut förvränger, och ögat fångar det ögonblickligen på ansikten, cirklar och text.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

När en fil förekommer i flera former, tänk i termer av den säkra ytan: den region som överlever varje beskärning. En banner i 16:9 skär bort topp och botten, en 1:1-bricka och ett 4:5-kort skär bort sidorna, så det alla behåller är ett band genom mitten. Håll motivet och all text innanför det, annars får ett ansikte nära kanten på ett liggande foto huvudet avklippt av den kvadratiska beskärningen.

Att hitta kvalitetsinställningen

Ett kvalitetstal är ingen procentandel av någonting, och skalorna är inte jämförbara mellan kodare. JPEG 80, WebP 80 och AVIF 80 är tre orelaterade inställningar.

Metoden är densamma för alla. Exportera med några olika inställningar, titta på resultatet i den storlek det kommer att visas, och kontrollera var artefakterna dyker upp först: mjuka övergångar som himlar, som bandas och fläckas; skarpa kanter och text, som ringar. Hitta var skadan blir synlig, backa ett steg, sluta.

Ett enda fast tal är fel för varje bild, eftersom innehållet avgör hur mycket som kan kastas bort: ett brusigt, texturerat fotografi behöver fler bitar för att överleva, medan en platt illustration faller sönder vid en inställning som ett bildrikt foto rycker på axlarna åt.

Friläggningar, mjuka kanter och glorior

Att ta bort bakgrunden är rätt när bilden måste sitta på mer än en bakgrundsfärg, eller överlappa andra element: produktbilder, logotyper, en person infogad i en layout. Det är fel där gränsen är genuint fin, som med hår, lövverk eller glas, eftersom en dålig mask ser sämre ut än en ärlig rektangel.

En hård kant är binär, varje pixel helt ogenomskinlig eller helt genomskinlig, vilket passar platt grafik men ger trappstegskanter på allt fotografiskt. En mjuk mask tillåter delvis opacitet, så att en pixel kan vara 40 % motiv, vilket är det enda sättet att få hår att se rätt ut.

Glorian kommer från gränspixlarna. Objektivets oskärpa och kantutjämningen har redan blandat motivets färg med den gamla bakgrunden, så var och en av dem håller:

observed = alpha * foreground + (1 - alpha) * background

Bakgrundsborttagning beräknar bara alfa. Färgen som blir kvar i de pixlarna är fortfarande förorenad, så ett motiv som klippts ur en vit studiobild bär en blek kantfrans: osynlig på en vit sida, uppenbar på en mörk. Riktig maskering löser även ut förgrundsfärgen, vilket exponeras som defringe eller decontaminate colours. Går inte det, dra in masken en bråkdel av en pixel och mjuka upp kanten på nytt.

Rotation och metadata

En bild som står upprätt i ett program och ligger på sidan i ett annat är nästan alltid EXIF-orientering. Kameror lagrar sensorbilden oroterad och lägger till en tagg som säger hur den ska vridas. Programvara som läser taggen visar den rätt; programvara som ignorerar den, däribland många bildbibliotek och miniatyrbildsgeneratorer, visar råpixlarna på sidan.

Åtgärden är att baka in rotationen i pixlarna och sätta taggen till 1 eller ta bort den. Att rotera i steg om 90 grader flyttar om pixlar utan att omsampla dem. Se upp för dubbelrotationen: pixlarna redan vridna, taggen fortfarande satt, så att varje regelrätt visningsprogram vrider dem igen.

Att ta bort metadata är en integritetsåtgärd, inte städning. Block med EXIF, IPTC och XMP bär rutinmässigt GPS-koordinater med några meters noggrannhet, tidpunkt för tagningen, kamerans märke, modell och serienummer, ägarens namn, och ibland en inbäddad miniatyrbild som fortfarande visar bilden före beskärningen. Ett foto taget hemma och publicerat intakt publicerar en hemadress.

Ta bort den sist, med ett undantag: ICC-färgprofilen ligger bredvid dessa metadata, och att ta bort den från en bild med brett färgomfång lämnar tal som läses som sRGB, vilket syns som platt eller övermättad färg. Konvertera till sRGB först, och ta sedan bort allt annat.