Wil jij je geplaatste afbeeldingen op mobiel responsief mee laten schalen, een betere Google Pagespeed score behalen mét een goede gebruikerservaring? Dan is dit de oplossing die je nodig hebt.
Standaard hoogte en breedte
Als je in de Homepage Builder een afbeelding plaatst, heb je de mogelijkheid een 'Breedte' en 'Hoogte' in te voeren in het venster 'Eigenschappen afbeelding'.
Dit is goed voor je Pagespeed score, maar als je in het geval van onderstaande afbeelding op mobiel zou kijken, zou de afbeelding uitgerekt zijn omdat je mobiel minder breed is dan 600px.
Het venster 'Eigenschappen afbeelding'
De 'Breedte' en 'Hoogte' instellingen.
De oplossing
1. Open in je editor de broncode weergaven door op 'Broncode' te klikken, of op 'Tools > Source Code'.
De Broncode knop linksboven in de teksteditor.
Standaard wordt de hoogte en breedte als volgt in een 'style' attribute geplaatst: (Deze notatie zorgt dus voor uitgerekte afbeelding)
<img src="..." style="width: 600px; height: 600px;"/>
Broncode van de afbeelding met hoogte en breedte in het 'style' attribute.
2. Verander de notatie:
Vervang de 'width' en 'height' styling in de 'style' attribute met het volgende (voeg geen 'px' toe in de waarde):
<img src="..." width="600" height="600"/>
De breedte en hoogte zijn nu aangeven in de 'width' en 'height' attributes i.p.v. in de 'style' attribute.
Let op! Als je nadat je de notatie hebt gewijzigd de afbeelding gaat bewerken via het editor menu met de 'Afbeelding' knop, dan wordt de notatie hersteld.
Hoe het werkt
Moderne browsers maken gebruik van deze notatie met aparte 'width' en 'height' attributes om de verhouding van je afbeeldingen te berekenen. Zo kan deze al vóór het downloaden van de afbeeldingen rekening houden met hoeveel ruimte het vrij moet maken voor de afbeelding. De Shoptrader stylesheets zorgen er voor dat je afbeeldingen ondertussen altijd responsief getoond worden. Zo kan je dus responsieve afbeeldingen op mobiel tonen zonder layout-shift met betere Pagespeed score!