Skärmen kan se likadan ut medan filen ändras
En skärmbild är en rasterbild, inte det levande gränssnittet den avbildar. En skärm med hög täthet kan registrera fler bildpixlar för samma synliga layout. Det gör text skarpare, men mottagaren av en liten förhandsvisning behöver kanske inte hela upptagningen.
Vår PNG-förklaring tar upp skärmbilder i allmänhet. Här isoleras effekten med ett specialritat gränssnitt utan kontouppgifter eller andras varumärken. Uppladdningsguiden förklarar vad som ska kontrolleras när en tjänst avvisar filen.
Kontrollerad upptagning, riktig komprimering
Den 2026-10-29 fångades samma lokalt renderade gränssnitt vid 1× och 2×. Dubbel bredd och höjd ger 4 gånger så många pixlar, men ingen fast multiplikator för filstorleken. Bitinz behandlade sedan båda bilderna med Balanserad.
Vi sparade en PNG-utdata och en WebP-konvertering för varje skärmbild. Varje inställning kördes 3 gånger för att kontrollera att utdatafilerna var identiska. Källfiler, kontrollsummor och resultat följer med experimentet; den allmänna metoden beskrivs i vår redaktionella policy.
Täthet och format var för sig
Jämför först PNG med WebP vid samma täthet. Jämför sedan källbilderna för att se den separata kostnaden för fler registrerade pixlar.
| Bild | Pixlar | Utdata | Nivå | Före | Efter | Besparing |
|---|---|---|---|---|---|---|
interface-1x.png | 800 × 500 px | PNG | Balanserad | 42.8 KB | 13.3 KB | 68.8% |
interface-1x.png | 800 × 500 px | WebP | Balanserad | 42.8 KB | 11.1 KB | 74.1% |
interface-2x.png | 1600 × 1000 px | PNG | Balanserad | 101.5 KB | 30.6 KB | 69.9% |
interface-2x.png | 1600 × 1000 px | WebP | Balanserad | 101.5 KB | 27.6 KB | 72.8% |
Bitinz · 1 KB motsvarar 1000 byte.
Texten är det viktiga granskningsområdet
Detalj från käll-PNG
Detalj från komprimerat PNG
Liten text, tunna linjer och svagt skuggade paneler kräver mer uppmärksamhet än en stor tom bakgrund. Granska utsnittet i full storlek och skärmbilden i den bredd läsaren faktiskt möter.
En mindre WebP är användbar om mottagaren accepterar formatet och bokstäverna är tydliga. Måste bilden vara PNG är det komprimerade PNG-resultatet den direkta jämförelsen. Behåll text som riktig text på sidan när en skärmbild inte behövs.
Visa vad läsaren behöver se
Beskär bort irrelevanta omgivningar i en redigerare före uppladdning. Det är ett innehållsval skilt från komprimering och minskar både distraktioner och pixlar. Bevara nödvändigt sammanhang, som den berörda kontrollen och etiketten intill.
Dokumentation kan behöva en skarp bild med hög täthet som går att förstora. En chattförhandsvisning kan klara sig med den viktiga regionen. Testa den verkliga destinationen i stället för att ge varje skärmbild samma mått.
Använd PNG-komprimeraren om PNG krävs, eller prova PNG till WebP för din egen webbplats. Jämför båda med originalet och välj efter läsbarhet och stöd hos mottagaren.
Förbered en läsbar skärmbild
- Fånga bara det gränssnitt och sammanhang läsaren behöver.
- Behåll käll-PNG och komprimera en kopia.
- Jämför bokstäver och tunna linjer i full storlek och avsedd visningsbredd.
- Använd den lättaste godtagbara filen i ett format som mottagaren stöder.
Vanliga frågor
- Har en skärmbild vid 2× dubbelt så många pixlar?
- Om både bredd och höjd dubbleras innehåller bilden 4 gånger så många pixlar. Filstorleksförhållandet beror även på innehåll och format.
- Ska jag alltid konvertera skärmbilder till WebP?
- Använd WebP när mottagaren stöder det och texten förblir tydlig. Behåll PNG om det krävs eller ger ett mer användbart resultat.
- Beskär eller skalar Bitinz skärmbilden?
- Beskärning och skalning förbereds i en bildredigerare. Bitinz behandlar filen med de mått du laddar upp.