Passende afbeeldingsgroottes voor websites

Meet de ruimte in je eigen lay-out

Bepaal de breedte van het beeldvak op je pagina, niet die van het hele browservenster. Begin met de afmetingen die je thema of afbeeldingsblok aanbeveelt. Zijn die niet beschikbaar, gebruik dan de browserinspecteur of vraag je websitebeheerder de weergegeven breedte op een telefoon en computer te controleren. Neem ook een grotere galerijweergave of zoom mee als je die nodig hebt.

Vergelijk voor een afbeelding die 720 pixels breed wordt weergegeven versies van 720 en 1440 pixels. De grotere kan scherper ogen op een scherm met hoge pixeldichtheid, maar controleer of de extra details het grotere bestand waard zijn. Gebruik een voldoende groot origineel: vergroten van 900 naar 1440 pixels herstelt geen ontbrekende details.

Beginwaarden per plaatsing

Een omslag van 2400 pixels is niet voor iedereen de beste keuze. Een telefoon kan kleiner of anders uitgesneden nodig hebben. Productzoom kan juist een apart groter bestand dan de gewone kaart vereisen.

Maak onderscheid tussen afmetingen en bestandsgrootte

Pixelafmetingen beschrijven het raster, bijvoorbeeld 1200 × 800. Bestandsgrootte beschrijft opslag en overdracht in kilobytes of megabytes. Gelijke afmetingen kunnen door detail, formaat en compressie verschillende bestandsgroottes opleveren.

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.

Begin met de lay-out. Een foto van 600 CSS-pixels breed heeft meestal een andere bron nodig dan een beeld dat een desktop vult. Dichte schermen kunnen meer beeldpixels gebruiken dan de CSS-breedte. Of dat loont, hangt van de foto en de extra bestandsgrootte af.

Houd verhoudingen bewust intact

Vergrendel in de afmetingentool de beeldverhouding en vul 1200 pixels breedte in voor een origineel van 3000 × 2000. De hoogte wordt automatisch 800. Je hoeft niet beide afmetingen te berekenen en in te vullen. Controleer dat gezichten en cirkels hun vorm behouden.

Snijd een brede foto bij voor een vierkante miniatuur in plaats van haar samen te persen. Gebruik bijsnijden en houd het onderwerp ook op kleine schermen zichtbaar. Vergroten maakt geen nooit vastgelegde details terug.

Lever de juiste varianten

Responsieve beeldcode laat de browser bestanden kiezen. Breedtegebaseerd srcset en sizes beschrijven beschikbare breedtes en de bedoelde plek; ze maken geen bestanden. Zie MDN over responsieve afbeeldingen.

Controleer of je CMS al varianten en code genereert. Exporteer voor statische pagina's de bestanden en verwijs ernaar. Drie bestanden uploaden is niet genoeg: de pagina moet de browser ook de juiste versie laten kiezen.

Stel een doel voor de bestandsgrootte vast

Test representatieve afbeeldingen en de hele pagina. Twaalf productkaarten hebben een ander budget dan één gedetailleerde portfoliofoto. Geen enkele kilobytegrens garandeert snelheid of kwaliteit.

1. Bekijk op de echte weergavegrootte.
2. Vergelijk kleinere afmetingen en een efficiënter formaat.
3. Controleer de bestandsgrootte en de zichtbare details van de download.
4. Test mobiel voordat je de instelling hergebruikt.

Onderscheid omslagen, producten en miniaturen

Verdwijnt het onderwerp van een brede omslag op mobiel, maak een aparte uitsnede in plaats van het beeld te vervormen. Productzoom kan een groot apart bestand vragen dat niet elke kleine kaart hoeft te downloaden. Een vierkante miniatuur vraagt bijsnijden, geen samengedrukte liggende foto.

Noteer per plaatsing verhouding, maximale weergavebreedte, kandidaatbreedtes en noodzakelijke details. Controleer na een themawijziging opnieuw. Downloadt de telefoon steeds het grootste bestand, onderzoek de responsieve selectie. Een nieuwe kleine export helpt niet als de pagina die niet gebruikt.