Så anpassar du högupplöst pixelkonst för en liten skärm utan suddighet
Undvik att förminska högupplöst pixelkonst med ett utjämnande filter och förvänta dig att varje pixeldetalj ska bevaras på en liten skärm. Bestäm först vad som måste förbli läsbart i målstorleken och skapa sedan en särskild version för den lilla skärmen: förenkla detaljerna, ändra storlek med ett genomtänkt filter och granska bilden i dess faktiska visningsstorlek. Heltalsförhållanden hjälper till att bevara jämna pixelformer, men de kan inte återskapa detaljer som den mindre bilden inte rymmer.
Varför pixelkonst kan bli suddig när den förminskas
En högupplöst originalbild innehåller fler pixlar än målet kan visa. Vid storleksändringen måste information från originalet kombineras eller tas bort. Utjämnande filter, som bilinjär interpolering, beräknar utdatafärger utifrån närliggande pixlar, vilket kan mjuka upp skarpa färggränser. Närmaste granne väljer en pixel från originalbilden och ignorerar de andra. Det undviker blandade färger, men kan hoppa över fina detaljer eller göra linjer ojämna. Godots bildreferens beskriver båda effekterna, och MDN påpekar att skalning i webbläsare beror på vilket renderingsläge som valts. Godot: Image MDN: image-rendering
Ett skarpt resultat handlar därför inte bara om att välja ”ingen oskärpa”. Det beror på målets mått, pixelernas former och avstånd i bilden samt hur den färdiga bilden visas. Se den lilla versionen som en designanpassning snarare än en mekanisk förminskning av originalet.
Välj målstorlek innan du ändrar storlek
Mät visningsytan där bilden ska visas i pixlar och behåll originalets bildförhållande. Om originalet är 1200 × 800 pixlar och målet är 300 × 200 blir skalförhållandet 1:4 i båda riktningarna. Varje fyra pixlar breda område i originalet motsvarar då exakt en pixel i målbilden. Förhållandet är praktiskt, men fina detaljer försvinner ändå i den storleken.
För ett mål på exempelvis 320 × 180 ska du först anpassa bilden inom dessa gränser utan att sträcka ut den. Om bildförhållandena skiljer sig åt får du välja om du ska beskära, lägga till kanter eller komponera om layouten. Pressa inte ihop bilden för att fylla rutan: då förändras pixelernas form och ansikten, silhuetter och mönster kan förvrängas. Olika bildförhållanden kräver ett medvetet val av beskärning. Godot och Unity beskriver båda beskärning eller fält som sätt att hantera skillnader i bildformat. Godot: Multiple resolutions Unity: Pixel Perfect Camera reference
Förenkla detaljer som inte kommer att bevaras
Gör en kopia av originalet och minska detaljnivån före storleksändringen. Ta bort enstaka högdagrar på en pixel, smala konturer, pytteliten text och texturkluster som blir till brus i målbilden. Gör silhuetten tydligare och håll viktiga färgområden åtskilda. Om en detalj förmedlar betydelse, till exempel ett öga, en symbol eller gränsen för ett föremål, ritar du om den i målstorleken i stället för att lita på att nedskalningen bevarar den.
Ett användbart test är att visa förhandsgranskningen i målstorlek med 100 % zoom och se om varje viktig detalj fortfarande går att urskilja. Inzoomning hjälper dig att granska pixlarnas kanter, men visar inte om bilden fungerar i den avsedda fysiska storleken. Behåll originalet i full upplösning så att förenklingen för en liten skärm inte skriver över andra versioner.
Välj metod för storleksändring utifrån önskat resultat
Använd närmaste granne när bilden måste behålla en strikt färgpalett och skarpa pixelblock. Granska sedan noga om detaljer har försvunnit eller linjebredderna blivit ojämna. Eftersom metoden väljer en närliggande pixel i originalet i stället för att blanda angränsande färger undviker den de mjuka övergångar som förknippas med bilinjär filtrering. Nackdelen är att mycket av originalets detaljrikedom kan försvinna. Pillow: Filters
Om den mindre bilden ska återge originalets helhet med mjukare övergångar kan du jämföra ett högkvalitativt nedskalningsfilter som Lanczos med en enklare areal- eller rutnätsbaserad förminskning. De här metoderna kombinerar information från flera pixlar i originalet. Det kan bevara större former, men också skapa mellanliggande färger kring skarpa kanter. Godot beskriver Lanczos som ett högkvalitativt alternativ, särskilt för nedskalning, och Pillow dokumenterar hur de olika filtren samplar bilden. Testa alternativen på en beskärning med diagonaler, tunna linjer och en kontrastrik kant, och välj sedan utifrån hur resultatet ser ut i faktisk storlek. Godot: Image Pillow: Filters
Använd heltalsskalning när skärmen tillåter det
Heltalsförhållanden är mest användbara när du skalar den färdiga lilla bilden för visning, eller när originalets mått går jämnt upp i målets. Då upptar varje pixel i originalet samma heltalsantal utgående pixlar. Vid bråktalsskalning kan pixlarna fördelas ojämnt. Godots exempel jämför en grundbild på 640 × 360 pixlar som skalas 2× till 1280 × 720 med en bråktalsskalning som ger ojämna pixelstorlekar. Godot: Multiple resolutions
Om en liten skärm inte passar ett jämnt heltalsförhållande ska du behålla bildförhållandet och medvetet välja en kompromiss: lämna oanvända marginaler, beskära lite eller skapa en version för den specifika layouten. Heltalsskalning kan lämna kanter eller utnyttja mindre av skärmytan. Det är ingen universallösning för att minska ett stort original, särskilt inte när originalets och målets mått inte går jämnt upp i varandra.
Kontrollera den färdiga bilden genom hela visningskedjan
Exportera bilden med målets pixelmått och visa sedan den exporterade filen i avsedd storlek i den faktiska appen, webbläsaren eller enheten. En skarp exporterad bild kan bli mjuk om den skalas igen med utjämning i ett senare steg. Utjämning är aktiverad som standard för canvas-ritningar i webbläsare. MDN beskriver hur du stänger av imageSmoothingEnabled när skalade bilder ska behålla skarpa kanter. CSS-egenskapen image-rendering: pixelated kan också påverka visade bilder, men MDN varnar för att icke-heltalsbaserade förhållanden mellan enhetspixlar ändå kan få pixlarna att se ojämna ut. MDN: imageSmoothingEnabled MDN: Crisp pixel art look
Granska tre saker i faktisk storlek: om viktiga detaljer fortfarande går att känna igen, om diagonaler och konturer ser jämna ut och om bilden sträcks eller samplas om igen efter exporten. Kontrollera även zoom- och skalningsinställningarna på målenheten. Webbläsarzoom och skalning av enheten med andra förhållanden än heltal kan påverka pixlarnas jämnhet. Om kanterna ser mjuka ut följer du hela vägen från originalet till skärmen och tar reda på var utjämningen sker innan du ändrar bilden igen.
En praktisk beslutsordning
- Ange målets bredd och höjd och bestäm hur en eventuell skillnad i bildförhållande ska hanteras.
- Skapa en arbetskopia och förenkla detaljer som inte ryms i den storleken.
- Exportera en version med närmaste granne och en med ett utjämnande filter för jämförelse. Ta med en beskärning med fina detaljer och diagonaler.
- Granska båda i den faktiska visningsstorleken och rita sedan om detaljer som försvann eller blev grumliga.
- Kontrollera att appen eller webbläsaren inte gör en oönskad storleksändring i ytterligare ett steg och spara slutversionen med avsedda mått.
Välj närmaste granne för skarpa kanter och ett lämpligt anpassat förhållande. Välj ett utjämnande nedskalningsfilter när det är viktigare att bevara större former än att bara behålla originalets palettfärger. Om ingen av versionerna blir tydlig får du ändra bilden eller beskärningen i målstorleken. Omsampling kan fördela om detaljer, men den kan inte bevara alla detaljer från en större bild när det finns färre pixlar.