/>
Best practices voor afbeeldingen in Webanizr AMP

Werken met afbeeldingen in AMP hebben een paar extra aandachtspunten. Deze worden in deze handleiding behandeld. Zo zorg je er voor dat ook visueel je bezoekers d.m.v. AMP de ultieme gebruikerservaring krijgen.

Gebruik responsive afbeeldingen

Gebruik bij het toevoegen van een afbeelding aan jouw website het responsieve afbeeldingselement uit de Webanizr-bibliotheek. Het juiste element uit de bibliotheek wordt getoond in de schermafbeelding.

In de AMP-modus zijn alle afbeeldingen standaard responsive. Door het responsieve afbeeldingselement te gebruiken, zorgt u ervoor dat de lay-out hetzelfde is, ongeacht of u de pagina in de AMP- of niet-AMP-modus publiceert. Dit maakt het eenvoudiger om de lay-out die je hebt gemaakt opnieuw te gebruiken op pagina's die te complex zijn om te worden weergegeven in de AMP-modus.

Stel de breedte of hoogte in

In de meeste gevallen kan Webanizr berekenen hoe breed en hoog een afbeelding moet zijn, op basis van de beschikbare ruimte en de afmetingen van de originele afbeeldingen. Er zijn echter situaties waarin dit niet mogelijk is. Bijvoorbeeld bij het gebruik van svg-afbeeldingen die geen vaste breedte of hoogte hebben. In die gevallen moet je zelf de breedte en / of hoogte opgeven.

In AMP moeten de breedte en hoogte altijd beschikbaar zijn als informatie. Dit helpt de browser om de juiste hoeveelheid schermgrootte voor de afbeelding te reserveren, zelfs voordat deze is gedownload. Als deze informatie niet beschikbaar is, wordt de afbeelding niet weergegeven.

Verklein de afbeeldingen niet voor mobiel

Je zou in de verleiding kunnen komen om afbeeldingen te maken die ideaal zijn voor mobiel gebruik. Namelijk door het formaat te wijzigen naar een mobiel formaat (ongeveer 600 px) om er zeker van te zijn dat ze klein zijn en de pagina niet vertragen.

Het nadeel hiervan is dat de afbeelding wazig lijkt op desktop en tablet. Het is echter niet nodig om zelf de afbeeldingen op maat te maken. Webanizr maakt voor elke situatie optimale beelden door het berekenen van de maximale grootte die nodig is. Webanizr kan rekening houdt rekening met meer factoren en zorgt daarmee voor optimale afbeeldingen op elk apparaat. Dus upload gewoon je originele afbeeldingen en laat Webanizr de rest doen.

Zorg voor contrast

Vooral op mobiel worden afbeeldingen vaak als achtergrond op volledig scherm gebruikt. Door de afbeelding als achtergrond te gebruiken, kunt u het verhaal in de eerste seconde beginnen vertellen, zonder de schermruimte voor een headerbeeld te verspillen.

Als u ervoor kiest om afbeeldingen als achtergrond te gebruiken, zorg dan voor voldoende contrast tussen de afbeelding en de tekst erover. En dan niet alleen op de exacte positie van de tekst. Bij weergave op een telefoon met andere schermafmetingen kan de tekst verschuiven. Als dat gebeurt, moet het nog steeds op een deel van de afbeelding staan met voldoende contrast.

Gebruik geen animated gifs

Momenteel is het niet mogelijk om geanimeerde gifs te gebruiken wanneer de pagina is ingesteld op de AMP-modus. Die afbeeldingen worden mogelijk niet weergegeven of worden onjuist weergegeven. Als je animaties aan de website wilt toevoegen, gebruik je in plaats hiervan video of website-animaties.

Neem contact op

Wil je ook aan de slag met AMP? Of gewoon wat meer informatie over wat het voor jou kan betekenen? Neem dan gerust contact met ons op.

Webanizr AMP is een onderdeel van Webanizr - Bekijk ook andere websites: