Inzoomen tot op de draad, zonder trage productpagina

Deze case komt uit de jaren vóór Dexor. Jasper, nu onze e-commerce architect, werkte destijds jarenlang als hoofdontwikkelaar voor een internationale lingerie-retailer, vanuit het bureau waar hij toen zat. Een winkel met honderden filialen en een webshop in meerdere landen, en een product waarbij de details het verschil maken: stof, kant, afwerking.

Precies dat is online lastig. In de winkel pak je een kledingstuk vast; op een productpagina krijg je een foto. Meer detail betekent grotere bestanden, en grotere bestanden betekenen tragere pagina's. Die spanning wilde de retailer doorbreken.

De oplossing kwam uit een heel andere hoek: kaartendiensten zoals Google Maps. Die laden nooit de hele wereldkaart, maar knippen hem op in tegels per zoomniveau en laden alleen de tegels die op dat moment in beeld zijn. Zo voelt onbeperkt inzoomen licht, terwijl er gigantisch veel beeldmateriaal achter zit.

Datzelfde principe is toegepast op de productfotografie: één enorme bronfoto, opgeknipt in tegels op meerdere zoomniveaus.

De fotostudio leverde per product de grootste beschikbare afbeelding aan. Die werd automatisch opgesplitst: een piramide van zoomniveaus, elk niveau opgeknipt in tegels van een vast formaat. Geen handwerk per foto, dezelfde pijplijn voor het hele assortiment.

Op de productpagina voelde het vanzelfsprekend: ga met je muis over de foto of raak hem aan op je telefoon, en het beeld zoomt ter plekke in. Geen aparte viewer die openklapt, geen popup; de foto zelf wordt het vergrootglas.

Voor de zoom is een bestaande JavaScript-library aangepast aan de shop, met bediening die op desktop en mobiel hetzelfde aanvoelt. En omdat de tegels tot diep doorlopen, kon de klant tot bijna op draadniveau inzoomen op de stof. Voor een product dat je normaal wilt voelen voordat je het koopt, was dat echte meerwaarde.

Het venijn van productfoto's in hoge resolutie zit in de klant die er niet om vraagt: die betaalt anders mee in laadtijd. Met tegels gebeurt dat niet. De pagina laadt gewoon een normale foto; pas wie inzoomt haalt tegels op, en alleen van het stukje beeld dat op dat moment in beeld is.

Zo kregen de productpagina's een detailniveau dat destijds ver boven de markt lag, zonder dat de performance eronder leed. Bewezen techniek uit een ander domein, op de juiste plek opnieuw gebruikt.

De reflex bij rijkere productpagina's is vaak: mooier mag, maar dan wordt het trager. Meestal is dat een valse keuze. Met de juiste techniek, soms geleend uit een heel ander domein, kan een shop detail bieden zonder gewicht.

Dit soort ervaring van grote internationale retail nemen we mee naar elke shop die we onder technisch beheer hebben. Meer over wie we zijn lees je op de over-pagina.