En komprimerad stor bild är fortfarande ett stort val
Ett litet bildutrymme gör inte nedladdningsfilen mindre. Om alla besökare får samma fullstora foto kan telefonen hämta pixlar som layouten inte använder. Komprimering och responsivt urval löser olika delar av problemet.
Vårt arbetsflöde för webbplatser beskriver förberedelsen; guiden om bildleverans kopplar den till prestandadiagnostik. Här följer vi ett foto till webbläsarens verkliga val utan att likställa resultat med ett poängtal.
Förbered varianterna och observera webbläsaren
Vi gjorde proportionella kopior i en extern bildredigerare före komprimering; Bitinz skalade dem inte. Den 2026-10-29 behandlades varje kopia lokalt med Balanserad. Registrerade mått, byte och kontrollsummor identifierar varianten i webbläsartestet.
Den lokala sidan erbjöd varianter genom srcset med en matchande sizes-regel. Observationerna registrerar visningsbredd, pixeltäthet och vald resurs. De mäter bilddata, inte en hel sidladdning eller ett simulerat mobilnät. Redaktionspolicyn beskriver underlaget.
De förberedda filerna bakom valet
Jämför storlekarna här och läs sedan webbläsarprotokollet länkat bland källorna. Webbläsaren kan bara välja filer som sidan faktiskt erbjuder.
| Bild | Pixlar | Utdata | Nivå | Före | Efter | Besparing |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Balanserad | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Balanserad | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Balanserad | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Balanserad | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB motsvarar 1000 byte.
Vad webbläsaren faktiskt laddade ned
| Visningsyta (CSS px) | Pixeltäthet | Visad bredd (CSS px) | Vald bredd (px) | Bildens datamängd |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Varje rad använde en ny webbläsarkontext med avstängd cache. Det bredaste fallet med hög pixeltäthet valde den största varianten eftersom utbudet hade ett stort glapp där. En mellanstor variant vore värd att testa; webbläsaren kan bara välja filer som finns i listan.
Granska den valda bilden i användbar skala
Detalj från källfotot
Detalj från det komprimerade fotot
Granska fotot på en liten skärm och en skärm med hög täthet. Den minsta varianten är inte bäst om bilden blir synligt mjuk. En stor variant motiveras inte heller enbart av imponerande komprimering.
Protokollet är en ögonblicksbild av den angivna miljön. Cache och webbläsarbeslut kan påverka senare besök. Upprepa med en ny webbläsarkontext och kontrollera den begärda bilden i stället för att dra slutsatser av synliga mått.
Koppla förberedelse till leverans
Använd bildkomprimeraren på de förberedda kopiorna och låt webbplatsen eller CMS:et erbjuda lämpliga varianter. Pekar sidkoden alla skärmar mot en stor fil ändrar komprimering ensam inte det valet.
Låt sizes följa CSS-layouten. Webbläsaren kombinerar ledtråden med varianterna och skärmtätheten; filnamnet avslöjar inte din avsikt. Kontrollera vald resurs efter ändringar i layouten.
I ett återkommande arbetsflöde kan utvecklar-API:et komprimera förberedda filer vid publicering. Storleksändring förblir ett separat förberedelsesteg. Vår kvalitetsguide förklarar hur du jämför detaljer innan du ersätter en bild.
Kontrollera ett bildutrymme på sidan
- Mät utrymmet och bestäm vilka proportionella bredder layouten behöver.
- Förbered och komprimera kopiorna medan du behåller det redigerbara originalet.
- Erbjud varianterna med en
sizes-regel som matchar layouten. - Granska den valda resursen och det synliga fotot på olika skärmar.
Vanliga frågor
- Minskar en mindre visningsbredd den nedladdade filen?
- En CSS-bredd ändrar layouten, inte byten i en enskild bildfil. Erbjud lämpliga varianter och kontrollera vilken webbläsaren väljer.
- Varför väljer en telefon med hög täthet en bredare bild?
- En tät skärm kan använda fler bildpixlar i samma synliga utrymme. Både variantmått och sidans storleksledtråd påverkar valet.
- Mäter experimentet sidans hastighet?
- Det registrerar komprimeringsresultat och bildval. Hela sidans laddningsupplevelse beror också på andra resurser, nätverk och rendering.