Afbeeldingsformaten voor websites: de complete tabel
Gids voor afbeeldingsformaten op websites
Afbeeldingsformaten voor websites: hero, blog, product, logo, OG | We.Inc
Eén tabel met pixelformaten, beeldverhoudingen en bestandsbudgetten voor elke afbeeldingsplek op een website, plus een calculator die uw lay-outbreedte omzet in srcset-formaten.
Maak elke afbeelding zo groot als de breedste ruimte die ze vult, en verdubbel die breedte voor schermen met hoge pixeldichtheid. Een hero over de volle breedte werkt op 2560 bij 1440, een afbeelding in een blogtekst op 1600 breed, een vierkante productfoto op Shopify op 2048 bij 2048, en een afbeelding om te delen op 1200 bij 630. Houd foto's onder ongeveer 200 KB.
Snelle formaten voor de meest voorkomende plekken
Plek
Te exporteren pixels
Beeldverhouding
Hero over de volle breedte
Afbeelding in blogtekst
Productfoto (Shopify)
Deelafbeelding (og:image)
Logo
SVG, of PNG op 2x de weergavegrootte
Volgt het logo
Er bestaat geen officiële standaard voor een hero- of blogafbeelding. Wat wel bestaat is eenvoudige rekenkunde: hoeveel CSS-pixels breed de plek is, maal de schermdichtheid waarop het scherp moet ogen. De tabel hieronder past die regel toe op elke gangbare plek, en waar een platform een eigen getal publiceert, zoals Shopify voor producten of Facebook voor deelafbeeldingen, gebruiken we het gepubliceerde getal.
Zoek de plek op in de tabel, of meet met de inspector van uw browser hoe breed die in uw lay-out wordt weergegeven.
Typ die CSS-breedte in de calculator en kies de dichtheden die u wilt dekken.
Exporteer de breedtes die worden genoemd, comprimeer elk bestand en plak de gegenereerde srcset in uw img-tag.
Controleer de bestandsgrootte met de budgetkolom voordat u uploadt.
Exporteer op 2x de weergegeven breedte; 3x voegt gewicht toe dat op een foto maar weinig mensen kunnen zien.
Snijd bij naar de beeldverhouding voordat u uploadt, zodat de lay-out de afbeelding nooit hoeft uit te rekken of zwarte balken hoeft toe te voegen.
Zet width- en height-attributen op elke img, zodat de browser de ruimte kan reserveren voordat het bestand binnen is.
Kies bij voorkeur SVG voor logo's en iconen, omdat een vectorbestand op elk formaat scherp blijft met één kleine download.
Laat de deelafbeelding op 1200 bij 630 staan, ook op smalle sites, want sociale apps halen die los van uw lay-out op.
Veelgestelde vragen
Welk formaat moet een hero-afbeelding hebben?
Exporteer voor een hero over de volle browserbreedte 2560 bij 1440 voor grote schermen en voeg versies van 1280 en 1920 breed toe in srcset, zodat telefoons en laptops minder downloaden. Staat de hero in een container van 1200 pixels, dan is 2400 breed genoeg.
Welk formaat hebben productafbeeldingen in Shopify?
Volgens het helpcentrum van Shopify worden vierkante productafbeeldingen meestal het best weergegeven op 2048 bij 2048 pixels. Uploads mogen tot 5000 bij 5000 pixels zijn en moeten kleiner zijn dan 20 MB. Houd elke productfoto in dezelfde verhouding, zodat de rasters van collecties netjes uitlijnen.
Welk formaat heeft een Open Graph-deelafbeelding?
De documentatie van Facebook over delen raadt minstens 1200 bij 630 pixels aan, een verhouding van 1.91 op 1, en een bestand kleiner dan 8 MB. Kleinere afbeeldingen werken nog tot 600 bij 315, maar worden kleiner weergegeven.
Hoe groot moet het bestand zijn, en niet alleen de pixels?
Pixelformaat en bestandsgrootte staan los van elkaar. Een foto van 1600 breed, opgeslagen als WebP of als goed gecomprimeerde JPEG, komt meestal uit tussen 80 en 200 KB. Zit een afbeelding daar ver boven, verlaag dan de kwaliteitsinstelling of kies een ander formaat voordat u de afmetingen verkleint.
Heb ik andere afbeeldingen nodig voor mobiel?
Meestal geen andere uitsneden, alleen kleinere kopieën van hetzelfde bestand in srcset. Gebruik het picture-element alleen als een telefoon een andere uitsnede nodig heeft, zoals een hoge versie van een brede banner.
De ene regel achter elk getal
Browsers zetten pagina's op in CSS-pixels. Een telefoon of retina-laptop stopt twee of drie apparaatpixels in elk daarvan, dus een afbeelding die precies op haar CSS-breedte is geëxporteerd, oogt daarop wazig. De breedte verdubbelen lost dat voor bijna iedereen op.
Verder gaan dan 2x loont zelden voor foto's. Het bestand wordt ongeveer weer twee keer zo zwaar en het extra detail valt op normale kijkafstand nauwelijks op.
Beeldverhouding telt meer dan exacte pixels
De meeste lay-outs schalen afbeeldingen naar hun kolom, dus de verhouding bepaalt hoe een afbeelding op de pagina staat. Kies één verhouding per plek, snijd elke afbeelding daarop bij, en het raster blijft netjes, wat de breedte ook is.
Gangbare keuzes zijn 16:9 voor hero's en artikelafbeeldingen, 1:1 voor producten en avatars, 4:5 voor staande kaarten en 1.91:1 voor deelafbeeldingen.
Budgetten houden pagina's snel
De grootste afbeelding boven de vouw is vaak het element dat de Largest Contentful Paint bepaalt. Een zware hero vertraagt de pagina meer dan welk ander los bestand ook, dus die verdient de meeste aandacht.
Stel per plek een budget in en houd u eraan. Past een foto bij goede kwaliteit niet binnen het budget, probeer dan WebP of AVIF voordat u de resolutie verlaagt.
Afbeeldingsformaten voor elke plek
De breedtes van de plekken komen uit gangbare desktop-lay-outs. Meet uw eigen thema en pas de 2x-regel toe als uw breedtes afwijken.
Exportformaten, verhoudingen en bestandsbudgetten per plek
Plek
CSS-breedte
Te exporteren pixels
Verhouding
Budget
Opmerking
Hero over de volle breedte
100vw (tot 1280+)
250 KB
Voeg kopieën van 1280 en 1920 breed toe in srcset
Hero in een container
200 KB
Twee keer de containerbreedte
Bannerstrook
150 KB
Houd tekst uit de buitenranden; de zijkanten worden op telefoons bijgesneden
Uitgelichte blogafbeelding
800 tot 1200
1600 x 900 tot 2400 x 1350
150 KB
Stem af op de inhoudsbreedte van uw thema
Afbeelding in blogtekst
720 tot 800
16:9 of 3:2
150 KB
Tekstkolommen zijn smaller dan hero's
Productfoto
Kaart in raster
200 KB
Het aanbevolen vierkante formaat van Shopify
Kaart voor collectie of categorie
800 x 800 of 800 x 1000
1:1 of 4:5
80 KB
Gebruik één verhouding in het hele raster
Team- of avatarfoto
40 KB
Vaak in een cirkel getoond; zet het gezicht in het midden
Logo in de header
ongeveer 160
SVG, of PNG op 320 breed
Die van het logo
20 KB
SVG blijft op elk formaat scherp
Achtergrondtextuur
150 KB
Lagere kwaliteit is prima achter tekst
Deelafbeelding (og:image)
Niet zichtbaar op de pagina
Kleiner dan 8 MB (mik veel lager)
Het aanbevolen formaat van Facebook
Favicon
16 tot 32
SVG plus 32 x 32 ICO of PNG
5 KB
Zie de favicongids voor elk formaat
Markup voor een responsive hero
Hero over de volle breedte met drie breedtes
De browser kiest het kleinste bestand dat de viewport bij de dichtheid van het scherm nog dekt. width en height bepalen de verhouding, zodat er niets verspringt tijdens het laden.
Calculator voor afbeeldingsformaten
Voer de breedte in die een afbeelding in uw lay-out vult, in CSS-pixels, en kies de schermdichtheden die u wilt dekken. De calculator noemt de pixelbreedtes om te exporteren en schrijft de bijbehorende srcset.