Een gecomprimeerd groot beeld blijft een grote keuze
Een klein beeldvak maakt het downloadbestand niet kleiner. Krijgt iedereen dezelfde volledige foto, dan kan een telefoon onnodige pixels ophalen. Compressie en responsieve selectie lossen verschillende delen van dit probleem op.
De werkwijze voor websites behandelt voorbereiding; de gids voor afbeeldingslevering koppelt dit aan prestatiediagnose. Hier volgen we één foto tot de echte browserkeuze, zonder een score als resultaat te nemen.
Bereid varianten voor en observeer de browser
We maakten proportionele kopieën in een externe beeldeditor vóór compressie; Bitinz schaalde ze niet. Op 2026-10-29 werd iedere kopie lokaal met Gebalanceerd verwerkt. Afmetingen, bytes en controlesom identificeren de variant in de browserproef.
De lokale pagina bood varianten met srcset en een passende sizes-regel. We registreerden vensterbreedte, pixeldichtheid en gekozen bron. Dit meet afbeeldingsgegevens, geen volledige paginalading of gesimuleerd mobiel netwerk. Het redactionele beleid beschrijft de bewijzen.
De voorbereide bestanden achter de keuze
Vergelijk hier de groottes en bekijk daarna het browserverslag bij de bronnen. De browser kan alleen kiezen uit bestanden die de pagina aanbiedt.
| Afbeelding | Pixels | Uitvoer | Niveau | Voor | Na | Besparing |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Gebalanceerd | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Gebalanceerd | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Gebalanceerd | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Gebalanceerd | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB bevat 1000 bytes.
Wat de browser werkelijk downloadde
| Venster (CSS px) | Pixeldichtheid | Weergavebreedte (CSS px) | Gekozen breedte (px) | Afbeeldingsgegevens |
|---|---|---|---|---|
| 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 |
Elke rij gebruikte een nieuwe browsercontext met uitgeschakelde cache. De breedste situatie met hoge pixeldichtheid koos de grootste variant, omdat het aanbod daar een groot gat had. Een tussenmaat is het testen waard; de browser kan alleen bestanden uit de aangeboden lijst kiezen.
Bekijk het gekozen beeld op bruikbare schaal
Detail van de bronfoto
Detail van de gecomprimeerde foto
Bekijk de foto op een klein scherm en een scherm met hoge dichtheid. De kleinste variant is niet de beste als het beeld zichtbaar zacht wordt. Een grote variant is evenmin gerechtvaardigd alleen omdat de compressie indrukwekkend is.
Het selectieverslag is een momentopname van de opgegeven omgeving. Cache en browserkeuzes kunnen latere bezoeken beïnvloeden. Gebruik voor herhaling een nieuwe browsercontext en inspecteer het gevraagde beeld in plaats van het uit zichtbare maten af te leiden.
Verbind voorbereiding met levering
Gebruik de afbeeldingscompressor op de voorbereide kopieën en laat je website of CMS passende varianten aanbieden. Verwijst de gegenereerde code elk scherm naar één groot bestand, dan verandert compressie die keuze niet.
Houd sizes gelijk aan de CSS-lay-out. De browser combineert die aanwijzing met varianten en schermdichtheid; een bestandsnaam verraadt je bedoeling niet. Controleer de gekozen bron nadat de lay-out verandert.
Bij herhaald werk kan de ontwikkelaars-API voorbereide bestanden tijdens het publiceren comprimeren. Schalen blijft een afzonderlijke voorbereidende stap. Onze kwaliteitsgids legt uit hoe je details vergelijkt voordat je een afbeelding vervangt.
Controleer een afbeeldingsvak op je pagina
- Meet het vak en bepaal de benodigde proportionele breedtes.
- Bereid de kopieën voor, comprimeer ze en bewaar het bewerkbare origineel.
- Bied varianten aan met een
sizes-regel die bij de lay-out past. - Bekijk de gekozen bron en zichtbare foto op verschillende schermen.
Veelgestelde vragen
- Verkleint een kleinere weergavebreedte de download?
- Een CSS-breedte verandert de lay-out, niet de bytes van één bestand. Bied geschikte varianten aan en controleer de browserkeuze.
- Waarom kiest een telefoon met hoge dichtheid een breder beeld?
- Een dicht scherm kan meer pixels binnen hetzelfde zichtbare vak gebruiken. Afmetingen van varianten en de grootteaanwijzing van de pagina beïnvloeden beide de keuze.
- Meet dit experiment de paginasnelheid?
- Het registreert compressieresultaten en beeldselectie. De totale laadervaring hangt ook af van andere bronnen, netwerk en rendering.