Afbeelding
Afbeelding
Dit artikel legt uit hoe afbeeldingsinstellingen werken en geeft aanbevelingen voor het optimaliseren van je webshop
Afbeelding op verschillende apparaten
Het is mogelijk om drie verschillende afbeeldingen te uploaden voor drie verschillende apparaten:
- Standaard: De afbeelding die is geüpload onder standaard is de hoofdafbeelding. Deze wordt weergegeven op desktop.
- Tablet: De afbeelding die is geüpload onder tablet wordt alleen weergegeven wanneer de gebruikte browser een formaat heeft dat overeenkomt met een tablet.
- Mobiel: De afbeelding die is geüpload onder mobiel wordt alleen weergegeven wanneer de webwinkel wordt bezocht via een mobiel apparaat, of als je zo'n klein browservenster hebt dat de resolutie overeenkomt met een mobiel apparaat.
Dezelfde afbeelding hergebruiken
Als je ervoor kiest om dezelfde afbeelding te uploaden voor zowel desktop, tablet, als mobiel, kun je of:
- De afbeelding op elke plek te uploaden.
- De standaard afbeelding bij tablet en mobiel te verwijderen. Hierdoor wordt automatisch de afbeelding gebruikt die geüploadt bij desktop.
Afbeeldingsformaat
Voorbeeld: Je uploadt een afbeelding naar mobiel die oorspronkelijk 1200px breed is. Wanneer je de website op mobiel laadt, moet je de hele afbeelding van 1200px laden, zelfs als de resolutie op mobiel slechts 400px is.
Het wordt daarom aanbevolen om het formaat aan te passen zodat het beter bij het apparaat past, zodat je de grootte die geladen moet worden verkleint.
Hoe je het doet:
- Upload de afbeelding die je wilt gebruiken.
- Klik op Formaat wijzigen.
- Voer de gewenste grootte in, eindigend met pixel. Voorbeeld:
400px
Als je alleen de breedte wilt wijzigen, kan de hoogte bijvoorbeeld op auto worden ingesteld zodat de verhoudingen behouden blijven, hoewel het wordt aanbevolen om een vaste grootte voor zowel hoogte als breedte in te stellen.
Lazy Loading
Deze instelling zorgt ervoor dat afbeeldingen pas worden geladen wanneer de sectie aan bezoekers wordt getoond.
Als de afbeelding bijvoorbeeld een banner ver onderaan de website is, moet lazy load actief zijn zodat het eerste laden sneller is en de afbeelding pas wordt opgehaald wanneer bezoekers naar beneden scrollen.
Als de sectie en het blok met de afbeelding helemaal bovenaan staan, wordt aanbevolen deze instelling uit te schakelen zodat de afbeelding gelijk laadt wanneer de pagina wordt geopend.
Link
Voeg een link toe als je wilt dat klikken op de afbeelding naar een specifieke pagina leidt.
Alternatieve tekst
Alternatieve tekst, oftewel Alt-tekst, is een tekst beschrijving die wordt toegevoegd aan afbeeldingen op websites, in documenten en op sociale media. Er zijn verschillende belangrijke redenen om alternatieve tekst op afbeeldingen te gebruiken:
- Toegankelijkheid:
- Voor mensen met een visuele beperking of die schermlezers gebruiken, is alt-tekst cruciaal om de inhoud van de afbeeldingen te begrijpen. De schermlezer leest de alt-tekst voor, zodat de gebruiker een idee krijgt van wat de afbeelding laat zien.
- Dit helpt websites en digitale inhoud toegankelijker te maken voor iedereen.
- SEO (zoekmachineoptimalisatie):
- Zoekmachines kunnen afbeeldingen niet op dezelfde manier "zien" als mensen. Ze gebruiken de alt-tekst om te begrijpen wat de afbeeldingen bevatten.
- Door relevante zoekwoorden in de alt-tekst te gebruiken, kun je je afbeeldingen helpen gevonden te worden in zoekresultaten, vooral in het zoeken naar afbeeldingen.
- Dat wil zeggen dat je alt-tekst gebruikt om de afbeeldingen doorzoekbaar te maken.
- Fouten en ontbrekende afbeeldingen:
- Als een afbeelding niet wordt weergegeven vanwege een fout of een trage internetverbinding, wordt de alt-tekst in plaats daarvan weergegeven. Dit geeft de gebruiker een indicatie van wat de afbeelding had moeten laten zien.
Geavanceerde instellingen
Met aangepaste klassen kun je het blok een eigen CSS-klasse geven. Deze kan vervolgens met aangepaste CSS worden gebruikt om je eigen code te schrijven die het uiterlijk verandert.
Gerelateerde artikelen: