Kies het juiste patroon
Resolution switching houdt de compositie gelijk en biedt meerdere bestandsbreedtes. Het is het gebruikelijke patroon voor productfoto’s, artikelafbeeldingen en kaarten. Gebruik breedte-descriptors zoals 480w of 1200w wanneer de gerenderde breedte met de lay-out verandert. Het getal is de werkelijke pixelsbreedte van het bestand, geen telefoondoel of CSS-opdracht.
Density switching bedient een vast CSS-slot met meer bronpixels voor een scherm met hogere dichtheid. De descriptors zijn 1x, 1.5x of 2x en dit past bij een logo of pictogram dat consequent bijvoorbeeld 160 CSS-pixels breed is. Meng geen width- en density-descriptors in één srcset.
Gebruik w-descriptors met sizes wanneer een component groeit of krimpt.
Gebruik x-descriptors zonder sizes alleen wanneer de gerenderde CSS-grootte stabiel is.
Begrijp hoe sizes de selectie stuurt
Bij width-descriptors evalueert de browser sizes voordat een afbeelding wordt gedownload. Elke entry koppelt een optionele media-conditie aan een lengte. De eerste overeenkomende conditie levert de bronsize; de laatste onvoorwaardelijke lengte is de fallback. sizes is een selecteerhint, geen CSS-regel.
De browser vergelijkt die bronsize met de kandidaatbreedtes om de effectieve dichtheid te berekenen, en kan vervolgens beeldschermdichtheid, zoom en netwerkcondities in overweging nemen. Hij is niet verplicht het wiskundig dichtstbijzijnde bestandsnaam te kiezen. Lever eerlijke kandidaten en een geloofwaardige slot-schatting; de uiteindelijke keuze blijft een beslissing van de user agent.
De eerst overeenkomende media-conditie wint, schrijf de lijst dus in een volgorde waarin die eerste match correct is.
Een eenderde-desktopkaart die als viewport-breed wordt beschreven kan een onnodig grote kandidaat triggeren.
Haal kandidaten uit de werkelijke lay-out
Maak inventaris per component, niet per pagina. Een hero, redactionele afbeelding, productgalerij, zoekthumbnail en voettekstlogo hebben vaak verschillende slotbreedtes. Noteer per component de smalste en grootste gerenderde breedte, beeldverhouding, uitsnedegedrag en zichtbaarheid op het initiële scherm.
Genereer breedtes rond het betekenisvolle slotbereik van de component, met een grotere optie wanneer detail hoge-dichtheid weergave rechtvaardigt. Bijna identieke bestanden voegen build- en cachecomplexiteit toe; alleen een heel klein en een heel groot bestand dwingen tot compromissen. Test gegenereerde URL’s in plaats van te veronderstellen dat afbeeldingstransformaties werken.
Houd een geldige src-fallback en width- en height-waarden die bij de geleverde verhouding passen. Ze reserveren ruimte maar voorkomen niet dat responsieve CSS de uiteindelijke dimensies verandert.
Een kandidaat die als 800w wordt geadverteerd moet daadwerkelijk 800 pixels breed zijn.
Onderhoud het slot en het kandidatenplan naast template- en ontwerpwijzigingen.
Gebruik picture voor beeldregie
Beeldregie verandert de compositie, niet alleen de bestandsgrootte. Een brede landschapsfoto heeft op een smal scherm mogelijk een strakkere portretuitsnede nodig zodat het onderwerp zichtbaar blijft. Het picture-element kan media-specifieke bronopties aanbieden, gevolgd door een img-fallback. De browser bekijkt elke source op media, type en srcset-informatie; de img draagt alternatieve tekst, dimensies en fallback-gedrag.
Bereid elke uitsnede voor met redactionele en toegankelijkheidsreview. Een mobiele uitsnede kan een productdetail of een persoon weglaten die in de alt-tekst wordt genoemd. Zet alt op img en beschrijf de informatie of functie die de afbeelding overbrengt. Gebruik alt="" alleen voor echt decoratieve afbeeldingen; voor een gelinkte of knopafbeelding beschrijf je de actie in plaats van het uiterlijk. Introduceer picture niet wanneer de uitsnede ongewijzigd blijft: gewone op breedte gebaseerde srcset is eenvoudiger.
Een drukke desktop-hero heeft een aparte portretuitsnede voor een telefoon nodig.
Een picture-source kan een typehint bieden en tegelijk een breed inzetbare img-fallback behouden.
Voorkom kostbare laad- en markupfouten
De gebruikelijke verspilling is het kopiëren van sizes="100vw" naar elke afbeelding. Dat kan geschikt zijn voor een smal full-width beeld maar niet voor een begrensde container of desktopkaart. De tegenovergestelde fout is verouderde sizes na een redesign. Verander CSS en sizes samen.
Laad een afbeelding die belangrijk is voor initiële zichtbare inhoud niet lazy. Richtlijn adviseert lazy-loaden voor below-the-fold-afbeeldingen en een zichtbare hero eager te houden. Fetch-prioriteit kan een echt vitale afbeelding verheffen, maar brede high-priority- of preload-regels kunnen de prestaties schaden. Vertrouw niet op bestandsnamen of gecachte resultaten als bewijs.
Een CMS, proxy of cache kan een verkeerde descriptor of een onbedoelde afbeeldingsrequest verbergen.
Laat essentiële paginatekst niet uitsluitend afhangen van een art-directed uitsnede.
Test het verzoek, de uitsnede en de herstelling
Test representatieve pagina’s bij lay-outveranderingsbreedtes, inclusief net boven en onder een grid-breakpoint. Neem een hoge-dichtheid instelling, brede desktop en toestanden mee die het slot veranderen. Bevestig gerenderde dimensies, uitsnede, alternatieve tekst en visuele scherpte.
In Chrome DevTools: open Network, herlaad met cache uitgeschakeld of gebruik Empty Cache And Hard Reload, filter op afbeeldingsverzoeken en inspecteer URL, overdrachtsgrootte, headers, initiator en timing. Schakel throttling in om laat of verspild werk zichtbaar te maken. Leg viewport, device scale factor, slot, kandidaat, overgedragen bytes en verwacht resultaat vast.
Maak van dit een releasepoort wanneer een template, breakpoint, CDN of asset-pijplijn verandert. Herstel nauwkeurig: corrigeer sizes, repareer een descriptor, regenereer een uitsnede, herstel een fallback of verwijder een onnodige preload. Test opnieuw met een lege-cache herlaadbeurt.
Het Network-paneel registreert de kandidaat die werkelijk is opgevraagd.
Dit verifieert afbeeldingsleveringsgedrag, niet origin-capaciteit, CDN-beschikbaarheid of algemene uptime.
Pas het toe als een SIU-resiliencecontrole
Responsieve afbeeldingen verminderen onnodige overdracht maar kunnen geen succesvolle request garanderen. Origin-fouten, onbeschikbare transformaties, hosts van derden en CDN-falingen vereisen aparte continuïteits- en herstelplanning.
Voor SIU: gebruik testregistraties om leveringsregressies vroeg te vangen, identificeer de verantwoordelijke template of transformatieregel en voer vóór lancering de kleinste veilige correctie uit. Koppel dit aan beschikbaarheidspreflight en rollback-planning.
Wijs voor elke mislukte selectiecheck een component- en image-pijplijn-eigenaar aan.