Media: afbeeldingen en alt-tekst

Module 4: Inhoud maken · Leestijd: 9 minuten

Leerdoel: Na deze les kun je afbeeldingen goed voorbereiden, uploaden en beschrijven, zodat ze snel laden, er scherp uitzien en voor iedereen bruikbaar zijn.

Kernbegrippen: mediabibliotheek, afbeeldingsformaten, big image threshold (2560 pixels), JPEG, PNG, WebP, AVIF, compressie, srcset, lazy loading, alt-tekst, bestandsnaam, auteursrecht

Wat er gebeurt als je een foto uploadt

Je uploadt een foto van je telefoon: 4.000 bij 3.000 pixels, 5 MB. WordPress doet dan meer dan je denkt:

1. Is de foto breder of hoger dan 2.560 pixels, dan maakt WordPress een verkleinde versie (met -scaled in de naam) en gebruikt die als "origineel". Het echte origineel blijft ook bewaard. Dat heet de big image threshold en bestaat sinds WordPress 5.3.
2. WordPress maakt daarnaast een reeks kleinere formaten: miniatuur (standaard 150 x 150 pixels, bijgesneden), gemiddeld (300), groot (1024), en extra formaten van 768, 1536 en 2048 pixels breed. Je thema en plugins voegen er vaak nog eigen formaten aan toe.
3. Alle versies komen in wp-content/uploads/2026/11/ (jaar en maand van het uploaden).

Eén foto wordt zo al gauw acht of meer bestanden. Daarom groeit de map uploads zo hard (les 1.3), en daarom maakt het uit wat je uploadt.

Op de pagina zet WordPress bij een afbeelding een srcset: een lijst van al die formaten. De browser kiest zelf het kleinste formaat dat scherp genoeg is voor het scherm. Een telefoon laadt dan het formaat van 768 pixels, een groot scherm dat van 1536. Dat werkt alleen goed als de formaten er zijn, dus als je via de mediabibliotheek uploadt en niet met FTP.

Vooraf verkleinen en comprimeren

Ook met die automatische formaten loont het om foto's vooraf te verkleinen:

• Afmeting: een foto die op je site nooit breder dan 1.600 pixels wordt getoond, hoeft niet 4.000 pixels breed te zijn. Verklein hem vooraf tot ongeveer 2.000 pixels aan de lange kant. Dat scheelt opslag, back-upgrootte en uploadtijd.
• Compressie: een JPEG met kwaliteit 75 tot 85 ziet er voor het oog bijna hetzelfde uit als kwaliteit 100, maar is vaak de helft kleiner.
• Metadata: foto's van een telefoon bevatten vaak de GPS-locatie waar ze zijn gemaakt. Wil je niet dat iedereen weet waar je woont, haal die eruit voordat je uploadt. WordPress haalt bij de verkleinde formaten veel metadata weg, maar het origineel kan hem nog bevatten.

Er zijn plugins die afbeeldingen bij het uploaden comprimeren of naar een moderner formaat omzetten. Handig, maar kijk of ze het op je eigen server doen of de foto's naar een externe dienst sturen (les 9.3), en of je echt een plugin nodig hebt als je het ook vooraf kunt doen.

Welk formaat

Kan je server een formaat niet verwerken, dan geeft WordPress bij het uploaden een fout of maakt het geen kleinere formaten. In Hulpmiddelen > Sitediagnose (tabblad Info, onder Media-afhandeling) zie je welke formaten je server ondersteunt.

Lazy loading

Sinds WordPress 5.5 krijgen afbeeldingen vanzelf loading="lazy": de browser laadt een afbeelding pas als je ernaartoe scrolt. Dat maakt een lange pagina met veel foto's veel sneller. WordPress laat de eerste grote afbeelding bovenaan de pagina bewust zonder lazy loading en geeft die vaak voorrang met fetchpriority="high", omdat die zo snel mogelijk zichtbaar moet zijn. Daar kom je op terug in les 6.3.

Zet ook altijd breedte en hoogte op een afbeelding (WordPress doet dat bij afbeeldingen uit de mediabibliotheek). Dan houdt de browser vooraf ruimte vrij en springt de tekst niet weg als de foto binnenkomt.

Alt-tekst: voor wie de afbeelding niet ziet

De alt-tekst (alternatieve tekst) beschrijft wat er op een afbeelding staat. Schermlezers lezen hem voor aan blinde en slechtziende bezoekers, en hij verschijnt als de afbeelding niet laadt. Zoekmachines gebruiken hem om de afbeelding te begrijpen.

Een goede alt-tekst beschrijft wat de afbeelding in deze context zegt:

• Slecht: IMG_4032.jpg of foto.
• Slecht: fietsenwinkel fiets e-bike kopen goedkoop fiets (trefwoorden stapelen helpt niemand).
• Goed: Monteur stelt de remmen af van een blauwe e-bike in de werkplaats.

Is een afbeelding puur versiering (een lijntje, een achtergrondpatroon), laat de alt-tekst dan leeg. Dan slaat een schermlezer haar over. Leeg is iets anders dan ontbreken: een afbeelding zonder alt laat een schermlezer vaak de bestandsnaam voorlezen. Een afbeelding die een link is (bijvoorbeeld een logo dat naar de homepage gaat), beschrijft waar de link heen gaat: Naar de homepage van Fietsenwinkel De Spaak.

In de mediabibliotheek zet je de alt-tekst bij de afbeelding zelf, en in de blokeditor bij het afbeeldingsblok. Let op: een alt-tekst die je in de mediabibliotheek invult, verandert niet vanzelf bij afbeeldingen die al op pagina's staan.

Bestandsnamen en auteursrecht

• Bestandsnaam: e-bike-remmen-afstellen.jpg zegt meer dan IMG_4032.jpg en komt in het adres van de afbeelding. Kleine letters, streepjes, geen spaties.
• Auteursrecht: een afbeelding van Google Afbeeldingen is niet vrij te gebruiken. Fotografen en beeldbanken sturen geregeld facturen voor gebruik zonder licentie. Gebruik eigen foto's, foto's met een duidelijke licentie of een beeldbank waarvan je de voorwaarden kent, en bewaar het bewijs van je licentie.

Opslag en opruimen

De mediabibliotheek ruimt zichzelf niet op. Een afbeelding die je van een pagina haalt, blijft in de bibliotheek en in uploads staan, met al zijn formaten. Bij een site met jaren inhoud loopt dat op. Ruim af en toe op, maar voorzichtig: een afbeelding kan op een plek gebruikt worden die de bibliotheek niet ziet (in een thema-instelling, een widget of een mail). Maak eerst een back-up.

Samenvatting

• WordPress maakt van elke upload meerdere formaten en verkleint grote foto's tot 2.560 pixels; de browser kiest via srcset het passende formaat.
• Verklein en comprimeer foto's vooraf en haal locatiegegevens weg.
• Gebruik JPEG of WebP voor foto's, PNG voor logo's en schermafbeeldingen; SVG alleen met een plugin die opschoont.
• Lazy loading gaat vanzelf, behalve voor de eerste grote afbeelding; breedte en hoogte voorkomen verspringen.
• Een alt-tekst beschrijft wat de afbeelding in de context zegt; puur versiering krijgt een lege alt-tekst.

Quiz

Opdracht

Opdracht A4.4: Afbeeldingen op je homepage. Vul het adres van je site in. Het programma leest de homepage en kijkt naar de eerste 20 afbeeldingen: hebben ze een alt-attribuut (leeg mag, ontbreken niet), hebben ze breedte en hoogte, en hoe groot is elk bestand (via een HEAD-verzoek)? Afbeeldingen boven 300 kB worden gemeld. Verbeter wat rood is in je mediabibliotheek of op de pagina, en kijk opnieuw na.

Verder lezen

Deze artikelen beschrijven de stappen in de panelen van WebOké; in andere panelen werken ze vergelijkbaar.

• DirectAdmin handleiding 18.5: Upload te groot (fout 413) of time-out
• Uploaden lukt niet: upload_max_filesize en max_execution_time verhogen
• Mediabibliotheek (wordpress.org, Engels): https://wordpress.org/documentation/article/media-library-screen/
• Alt-teksten schrijven (W3C, Engels): https://www.w3.org/WAI/tutorials/images/decision-tree/