HTML-afbeeldingen of CSS-achtergronden: wanneer gebruikt u welke | We.Inc
Kies tussen <img> en background-image, schrijf alt-tekst, voorkom layout shift, bouw srcset en sizes, laad lazy en lever WebP of AVIF met <picture>.
HTML-afbeeldingen en CSS-achtergrondafbeeldingen
Gebruik een <img> als de afbeelding content is: een productfoto, een grafiek, een portret. Geef hem alt-tekst, width en height. Gebruik een CSS background-image als de afbeelding decoratie achter tekst is. Voeg srcset en sizes toe zodat telefoons kleinere bestanden downloaden, en loading="lazy" voor afbeeldingen onder het eerste scherm, nooit voor de hero.
<img> of background-image?
Vraag
<img>
Heeft de afbeelding betekenis?
Ja, met alt-tekst
Nee, alleen decoratie
Moeten zoekmachines hem indexeren?
Ja
Wordt zelden opgepikt
Responsieve bestanden
srcset en sizes
image-set() of media queries
Lazy loading
loading="lazy"
Vereist een script
Bijsnijden om een vak te vullen
object-fit: cover
background-size: cover
Standaard afgedrukt
Ja
Meestal niet
Een beslistabel, een srcset-bouwer die laat zien welk bestand een telefoon of laptop zou downloaden, en bewerkbare voorbeelden van elk patroon: alt-tekst, vaste afmetingen, lazy loading, een snelle hero-afbeelding, bijsnijden met object-fit naast background-size, moderne formaten met <picture> en responsieve achtergronden met image-set().
Begin met de beslistabel om te kiezen tussen een <img> en een CSS-achtergrond.
Gebruikt u <img>, vul dan de breedtes van uw afbeeldingen in de srcset-bouwer in en kies de lay-out. Kopieer de gegenereerde tag.
Verschuif de schuifregelaars voor schermbreedte en pixeldichtheid om te zien welk bestand de browser voor elk apparaat zou kiezen.
Kopieer elk ander patroon dat u nodig hebt uit de voorbeelden, die allemaal live naast hun code worden weergegeven.
Stel de attributen width en height altijd in op de echte pixelgrootte van de afbeelding. CSS kan hem nog steeds schalen; de attributen laten de browser de juiste ruimte reserveren voordat het bestand binnenkomt.
Markeer de grootste afbeelding op het eerste scherm met fetchpriority="high" en laat hem eager laden. Die afbeelding lazy laden vertraagt de grootste weergave op de pagina.
Laat alt leeg (alt="") bij puur decoratieve afbeeldingen zodat schermlezers ze overslaan, in plaats van alt weg te laten, waardoor sommige schermlezers de bestandsnaam voorlezen.
Exporteer foto's in twee of drie breedtes, zoals 480, 960 en 1600 pixels. Meer formaten helpen zelden en maken builds trager.
Veelgestelde vragen
Is background-image slecht voor SEO?
Zoekmachines indexeren afbeeldingen in <img>-elementen veel betrouwbaarder dan afbeeldingen die in CSS staan. Wilt u dat een afbeelding in de zoekresultaten voor afbeeldingen verschijnt of uw content beschrijft, zet hem dan in een <img> met goede alt-tekst. Decoratieve achtergronden verliezen niets door in CSS te staan.
Wat moet er in alt-tekst staan?
Zeg in een korte zin wat de afbeelding laat zien dat in deze context belangrijk is. Bij een productfoto kan dat het product en de kleur zijn; bij een grafiek de belangrijkste conclusie. Sla zinnen als afbeelding van over. Is de afbeelding een link, beschrijf dan waar de link naartoe gaat.
Wat is het verschil tussen srcset met w en met x?
Breedtedescriptors (480w, 960w) noemen de echte breedte van elk bestand en laten de browser kiezen op basis van het attribuut sizes en de pixeldichtheid van het scherm. Dichtheidsdescriptors (1x, 2x) passen bij afbeeldingen die altijd op één vast formaat worden getoond, zoals een logo.
Moet ik nog loading="lazy" gebruiken als ik een framework gebruik?
Native lazy loading werkt in alle huidige grote browsers, dus een gewoon attribuut is voor de meeste afbeeldingen genoeg. Beeldcomponenten van frameworks voegen het vaak voor u toe; controleer dat ze niet ook de hero-afbeelding lazy laden.
Heb ik zowel WebP als AVIF nodig?
Niet altijd. Beide formaten worden ondersteund door de huidige grote browsers. AVIF is voor foto's vaak kleiner, maar codeert langzamer. Een <picture>-element met een AVIF-bron, een WebP-bron en een JPEG-fallback dekt iedereen, maar alleen WebP met een JPEG-fallback is een redelijke, eenvoudigere keuze.
Content of decoratie
De vraag die de meeste beslissingen over afbeeldingen beslecht, is of een bezoeker informatie zou missen als de afbeelding niet laadt. Een teamfoto op een over-ons-pagina, een screenshot in een tutorial en een productfoto in een webshop hebben allemaal betekenis, dus ze horen in de HTML met alt-tekst.
Een vervaagde textuur achter een kop, een patroon in een footer of een foto die alleen de sfeer bepaalt, kan in CSS staan. Dat houdt de HTML schoon en laat u de afbeelding per schermformaat wisselen zonder de markup aan te raken. Staat er tekst bovenop, zorg dan dat die leesbaar blijft als de afbeelding ontbreekt door ook een achtergrondkleur in te stellen.
Hoe de browser kiest uit srcset
Met breedtedescriptors leest de browser eerst sizes om te weten hoe breed de afbeelding wordt getekend, bijvoorbeeld 100vw op telefoons en 50vw op bredere schermen. Hij vermenigvuldigt dat met de pixelverhouding van het apparaat en kiest het kleinste bestand dat minstens zo breed is. Browsers kunnen ook een kleiner bestand kiezen bij een trage verbinding, of een groter bestand dat al in de cache staat.
Sizes goed instellen is belangrijker dan meer breedtes toevoegen. Zegt sizes 100vw, maar vult de afbeelding op desktop maar een derde van het scherm, dan downloadt de browser een bestand dat drie keer te breed is.
Layout shift en de hero-afbeelding
Als een afbeelding zonder afmetingen laadt, springt alles eronder omlaag. Met de attributen width en height kan de browser de beeldverhouding vooraf berekenen, wat die sprong wegneemt en de Cumulative Layout Shift verbetert.
De hero-afbeelding is meestal het element voor de Largest Contentful Paint. Laat hem eager laden, geef hem fetchpriority="high", lever hem vanaf uw eigen domein of een snelle beeldhost, en verstop hem niet achter een script dat hem later instelt.
Een complete <img>
alt, width, height en lazy loading
De attributen geven de echte grootte; CSS maakt hem vloeiend. Dankzij width en height wordt het vak gereserveerd voordat het bestand laadt. De demoafbeeldingen zijn kleine inline SVG's.
De hero-afbeelding: eager en met hoge prioriteit
Gebruik dit voor de ene grote afbeelding bovenaan de pagina. Alles onder het eerste scherm krijgt in plaats daarvan loading="lazy".
Regels voor alt-tekst
Alt-tekst per soort afbeelding
Afbeelding
Productfoto
Beschrijf het artikel en het detail dat ertoe doet: Eiken bijzettafel met twee laden
Grafiek of diagram
Noem de conclusie: De omzet verdubbelde tussen maart en juni
Afbeelding die een link is
Noem de bestemming: Home
Decoratief patroon of scheidingslijn
Leeg: alt=""
Foto met hetzelfde bijschrift ernaast
Leeg, of een kort label, zodat het niet twee keer wordt voorgelezen
Tekst in een afbeelding
Dezelfde tekst
object-fit: cover naast background-size: cover
Beide snijden een afbeelding bij om een vak te vullen zonder hem uit te rekken. object-position en background-position bepalen welk deel in beeld blijft.
Dezelfde uitsnede, op twee manieren
Links is een <img> met object-fit; rechts is een div met een achtergrond. Ze zien er hetzelfde uit; alleen de linker heeft alt-tekst en lazy loading.
CSS-achtergrondafbeeldingen
Een achtergrond achter tekst, met een reservekleur
De donkere overlay-gradiënt houdt de witte tekst leesbaar op elke foto, en de achtergrondkleur verschijnt als de afbeelding niet laadt.
Responsieve achtergronden met image-set()
Met image-set() kiest de browser op pixeldichtheid of bestandstype. Zet voor oudere browsers eerst een gewone url()-regel.
WebP en AVIF met <picture>
Moderne formaten met een JPEG-fallback
De browser gebruikt de eerste <source> waarvan hij het type ondersteunt. De <img> erbinnen bevat de alt-tekst, de grootte en het reservebestand, en is het element dat u stylet.
Volle breedte op elk scherm
Volle breedte op telefoons, de helft vanaf 768px
Kaartenraster: 1, 2 of 3 kolommen
Contentkolom van maximaal 720px
Bouwer voor srcset en sizes
Breedtes die u exporteert (px)
Bestandspad zonder breedte
Extensie
Hoe breed wordt de afbeelding getekend?
Voer minstens één breedte in.
Kopiëren
Welk bestand zou een apparaat downloaden?
Kleine telefoon
Grote telefoon
Tablet
Laptop
Retina-laptop
Schermbreedte: {vw}px
Pixeldichtheid: {dpr}x
De afbeelding wordt {slot}px breed getekend, dus de browser heeft ongeveer {px} apparaatpixels nodig en zou normaal gesproken downloaden:
nog niets
(het grootste bestand, dat kleiner is dan ideaal: overweeg een breder bestand te exporteren)
Browsers kunnen een kleiner bestand kiezen bij een trage verbinding, of een groter bestand dat al in de cache staat; dit toont de gebruikelijke keuze.