Scherp op ieder scherm

Dat de layout van een website zich aanpast aan de grootte van het scherm met behoud van de beoogde user experience is natuurlijk al een stap in de goede richting. In een zogenaamd responsive grid worden de beelden, product- en sfeerfoto’s, afhankelijk van het scherm waarop de bezoeker de website bezocht klein of groot weergegeven, waarbij vaak hetzelfde bronbestand wordt gebruikt. Dit kan potentieel zorgen voor een slechte gebruikerservaring door een ogenschijnlijk slechte beeldkwaliteit en een onnodig lange laadtijd.

Als beelden die voorbereid zijn voor weergave op een groot desktop scherm verkleind worden getoond op een smartphone scherm dan worden er meer pixels ingeladen dan dat er op het kleine scherm passen. Kortom: de bezoeker op een smartphone zal op elke pagina grotere beelden, dus meer bytes, moeten inladen dan nodig en het teveel aan pixels worden ertussenuit gehaald door de browser waardoor er vertekening van het beeld zichtbaar is. Vooral het eerste effect van de langere laadtijd kan een grote negatieve impact hebben. Het geduld van de bezoeker wordt op de proef gesteld en dit heeft direct invloed op de conversie. Het is daarom raadzaam de beelden te optimaliseren per apparaat dat je wilt ondersteunen.

Ondertussen zijn er de laatste jaren technologisch grote sprongen gemaakt in het verbeteren van de pixeldichtheid van schermen. Dit wil zeggen dat er steeds meer punten (ofwel pixels) op het scherm getoond kunnen worden zonder dat we die punten nog met het blote oog kunnen waarnemen met als resultaat dat beelden er op het scherm steeds scherper uitzien. Deze schermen worden door Apple aangeduid als Retina display en in de markt ook wel bekend onder de generieke naam Highres display.
Pas bij een zoomfactor van meer dan 300% worden de pixels van een beeld weer zichtbaar. Daarnaast willen we in onze webshop de klant wel graag de mogelijkheid geven in te zoomen op een productfoto; een extra risico op kwaliteitsverlies als het beeld wordt opgeblazen zonder dat deze daarvoor is voorbereid.

Voor bovenstaand scenario is een simpele en voor de hand liggende oplossing; de beelden vooraf op verschillende resoluties opslaan en vervolgens afhankelijk van de schermgrootte van de bezoeker in de front-end code de juiste versie tonen. Dit kan door een designer of front-end developer worden voorbereid tijdens  de realisatie van een website of bij een grote hoeveelheid aan beelden geautomatiseerd door software op de webserver worden verzorgt. Uiteindelijk moet elke afzonderlijke pagina wordt gecontroleerd op laadsnelheid, bijvoorbeeld door middel van Google Pagespeed Insights om te voorkomen dat er niet alsnog te veel bytes aan beeldmateriaal wordt ingeladen.

Voor de beelden waarbij de bron bestaat uit vectoren (lees lijntekening) is er inmiddels een goede oplossing die door alle laatste browserversies wordt ondersteund, namelijk SVG (Scalable Vector Graphics). Dit formaat is uitermate geschikt voor logo’s, iconen en illustraties. Omdat het bestand wordt opgebouwd door middel van lijnen en verbindingspunten kan er oneindig op worden ingezoomd zonder kwaliteitsverlies. Deze elementen hebben daarom geen extra voorbereiding nodig.

Kies voor een optimale gebruikerservaring daarom niet alleen voor kwaliteit of alleen voor performance maar ga precies in het midden zitten voor “the best of both worlds”.