Responsieve afbeeldingen: de juiste grootte voor telefoon en computer

Begin in je website-editor

Controleer in WordPress of een websitebouwer eerst wat het bestaande afbeeldingsblok doet. Je site maakt mogelijk al kleinere versies van één upload.

1. Upload een scherp origineel met voldoende detail voor de grootste weergave die je nodig hebt.
2. Kies een geschikte beeldresolutie in het blok als die instelling beschikbaar is. Een smaller blok betekent niet automatisch een kleiner gedownload bestand.
3. Bekijk de pagina op een telefoon en computer. Controleer de uitsnede, kleine tekst en scherpte.

Je websitebeheerder kan controleren of de pagina geschikte formaten levert. Bewerk je zelf HTML, dan laten de voorbeelden hieronder zien hoe je de geëxporteerde bestanden koppelt.

Wat zijn responsieve afbeeldingen?

Responsieve layout past de pagina aan. Responsieve beeldlevering verandert het gevraagde bestand. Een CSS-verkleining vermindert niet vanzelf de download.

Een foto van 3000 pixels kan volledig laden voor een kleine kaart zonder alternatieven. Responsieve beelden bieden passende bestanden en kunnen data besparen met duidelijke beelden.

Resolutie wisselen behoudt compositie met verschillende maten. Art direction past de uitsnede aan als een breed beeld niet werkt in een smalle layout. De MDN-gids legt het verschil uit.

Schermbreedte, weergavebreedte en beeldpixels

Meet eerst de echte afbeeldingsruimte in CSS-pixels. Een telefoon van 390 met tweemaal 16 pixels marge laat 358 over. Een desktopkaart in drie kolommen kan slechts 320 CSS-pixels zijn.

Een CSS-pixel meet de zichtbare grootte in de pagina-indeling. Op een scherm met hoge pixeldichtheid kan één CSS-pixel meerdere fysieke schermpixels gebruiken. Een scherp beeld kan daarom meer afbeeldingspixels nodig hebben dan de zichtbare breedte.

Neem daarna pixeldichtheid mee. Vermenigvuldig als schatting de weergavebreedte met de device pixel ratio. Bij 358 CSS-pixels en 2× kom je op ongeveer 716 beeldpixels. Dat helpt voorbereiden maar garandeert geen bestandskeuze.

Desktop betekent niet automatisch het grootste bestand. Een heel klein beeld kan zacht lijken op een scherp telefoonscherm. Controleer ruimte en resultaat.

Nuttige formaten maken

1. Zoek de grootste weergavebreedte. Meet kolom of kaart, niet het hele scherm.
2. Kies representatieve breedtes. Voor een artikelbeeld van maximaal 800 CSS-pixels zijn 400, 800, 1200 en 1600 een eerste test, geen universele eis.
3. Exporteer uit hetzelfde origineel. Gebruik Pixilos schaaltool en behoud verhouding. Bewaar de bron.
4. Vergelijk formaat en kwaliteit. Test WebP of JPG → AVIF / PNG → AVIF / WebP → AVIF als je publicatie het ondersteunt. Bespaar niet door onleesbare tekst of ontbrekend detail.
5. Publiceer en verbind bestanden. Pixilo maakt beelden, geen HTML-, CMS- of CDN-configuratie.
6. Controleer de pagina. Bekijk gekozen bestand, maten en uiterlijk bij verschillende breedtes.

Vergroot een kleine bron niet alleen voor een doelgetal. Schalen herstelt geen detail. Toon kleiner of zoek een betere bron. Lees schalen zonder vervormen.

WordPress en andere CMS controleren

Je CMS kan al maten en responsieve HTML maken. Bekijk de pagina vóór een parallelle handmatige oplossing. Passen de maten bij het thema en ondersteunt het hele proces het formaat?

Plug-ins en CDN kunnen op aanvraag transformeren. Controleer het ontvangen bestand, niet alleen de bronnaam. Cache kan oude versies bewaren. Bevestig nieuwe levering voor je beoordeelt.

Lees WordPress-beelden optimaliseren voor stappen. Zoek voorspelbare levering met duidelijke rollen.

Optioneel: srcset en sizes gebruiken in HTML

Het voorbeeld vult het venster minus 32 pixels totale marge tot maximaal 800 CSS-pixels. Namen zijn voorbeelden: publiceer je eigen bestanden met echte paden en maten.

<img
  src="/images/coast-800.webp"
  srcset="/images/coast-400.webp 400w,
          /images/coast-800.webp 800w,
          /images/coast-1200.webp 1200w,
          /images/coast-1600.webp 1600w"
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600" height="1067"
  alt="Rotsachtige kust aan een kalme blauwe zee">

w-waarden moeten de echte breedtes zijn. sizes beschrijft verwachte weergave voor de keuze, maar stelt niet de zichtbare breedte in. CSS moet bij de beschrijving passen.

Hier passen een container van maximaal 800 pixels en display: block; width: 100%; height: auto;. Kopieer deze sizes niet naar een ander raster. Een kleine kaart als 100vw beschrijven kan te grote downloads geven.

De browser kan dichtheid en andere omstandigheden meewegen. Verwacht een geschikte variant, niet één gegarandeerde naam. Meng breedtes niet met dichtheidswaarden zoals 2x in één lijst. Zie MDNs srcset-referentie.

Wanneer de telefoon een andere uitsnede nodig heeft

Een brede banner kan laag worden op telefoon en het onderwerp klein. Meer pixels lossen de compositie niet op. Maak een strakkere uitsnede en selecteer met een mediavoorwaarde in picture.

Gebruik Bijsnijden bewust en behoud context. Controleer tekstoverlays: een fraaie uitsnede kan het onderwerp onder titel of knop zetten.

Verschillende composities vragen onderhoud. Gebruik ze waar de smalle layout het nodig heeft. Bij andere verhoudingen moet iedere breakpoint passende ruimte reserveren. De picture-referentie verklaart selectie.

Afmetingen, uitgesteld laden en hoofdbeeld

Geef juiste width en height om de verhouding vooraf aan te geven. Met proportionele CSS kan ruimte worden gereserveerd. Controleer die bij vaste CSS-maten of andere uitsneden.

Beelden ruim onder de eerste weergave kunnen loading="lazy" gebruiken. Een belangrijk meteen zichtbaar beeld moet meestal direct laden. Het hoofdbeeld vertragen schaadt ook met kleine bestanden. Zie web.dev over laden.

Als metingen een beeld aanwijzen als Largest Contentful Paint, overweeg daarvoor fetchpriority="high". Prioriteer niet alles. Responsieve maten verhelpen geen trage server of laat ontdekt hoofdbeeld.

Responsieve afbeeldingen testen

1. Open de publicatie bij telefoon-, tablet- en desktopbreedtes.
2. Bekijk weergavebreedte en gekozen URL. currentSrc toont de geselecteerde bron.
3. Controleer overgedragen grootte in het netwerkverzoek. Schakel cache eventueel uit.
4. Bekijk tekst, randen en uitsnede op normale grootte.
5. Laad opnieuw bij elke breedte. Een geladen pagina schalen simuleert niet betrouwbaar een nieuw bezoek.
6. Meet vóór en na onder vergelijkbare omstandigheden.

Vraagt de telefoon nog grote bestanden, controleer srcset, echte breedtes en sizes. Bij zachtheid, controleer bronmaten vóór hogere kwaliteit. Bij vervorming, herstel verhouding in plaats van een groter bestand.

Responsieve afbeeldingen en SEO

Responsieve levering vermijdt onnodige data zonder rankinggarantie. Gebruik relevant beeld en nuttige alt-tekst. Behoud img met geldig src in picture. Google bespreekt ontdekking en responsieve HTML.

Voor laden, layoutverschuiving en ervaring lees beelden en Core Web Vitals. Meet de pagina: kleinere export bewijst niet dat alle cijfers verbeteren.

Veelgestelde vragen

Is width: 100% voldoende?

Het kan de weergave passend maken, niet kleinere downloads. Daarvoor zijn bestanden en responsieve HTML nodig.

Moet elke telefoon een eigen beeld hebben?

Nee. Bied een beheersbaar aantal maten. De browser kiest zonder herkenning van elk model.

Moet elk beeld tweemaal de weergavebreedte hebben?

Nee. Een 2×-versie helpt bepaalde schermen, niet allemaal. Weeg scherpte en grootte af en bied kleinere versies.

Kan Pixilo srcset aan mijn site toevoegen?

Pixilo maakt beeldbestanden. Site, template, CMS of dienst moet publiceren en responsief leveren.

Samenvatten metChatGPT (opent in een nieuw tabblad)Grok (opent in een nieuw tabblad)Google (opent in een nieuw tabblad)Perplexity (opent in een nieuw tabblad)Claude (opent in een nieuw tabblad)