Image loading in het LightBolt CMS

Middels optimaliseren, kan de grootte van een afbeelding gereduceerd worden zonder merkbare kwaliteitsverlies. Naast optimaliseren, zijn er echter andere technieken om te besparen op download van afbeeldingen en hiermee zowel de bezoeker als eigen hosting kosten tegemoet te komen. Zo voorkom je niet enkel website-bloat, maar wordt de website in het beginsel ook sneller gemaakt.

Het LightBolt CMS kent verschillende in te schakelen technieken voor optimale performance. Op een rijtje:

Optimaliseren van afbeeldingen in CMS

Het LightBolt CMS zal eigenhandig geuploade afbeeldingen optimaliseren via optipng (voor PNG afbeeldingen) en jpegoptim (voor JPEG afbeeldingen). Hiermee wordt getracht de grootte van de afbeeldingen te reduceren met behoud van (gelijkende) kwaliteit.

Image lazy loading

Afbeeldingen die nog niet in beeld zijn, zouden om die reden ook nog niet gedownload hoeven worden. Mocht de bezoeker niet doorscrollen, dan bespaart dit dataverbruik. Bovendien wordt de pagina er initieel sneller van doordat andere bronnen prioriteit krijgen bij het laden van een website.

Voor websites die gebouwd worden middels het LightBolt, gebruiken we bLazy als lazy loading toepassing. LightBolt voorziet afbeelding automatisch van de juiste noemers (CSS classes) om deze functionaliteit toe te kunnen passen. Bijkomend voordeel is dat ook ook youtube of vimeo video's op deze manier geserveerd kunnen worden. Zo wordt voorkomen dat Youtube al bij eerste pagina bezoek allerlei bronmateriaal geforceerd op gaat leggen aan jouw website bezoeker. Onze Snij Noord opdracht is daar een goed voorbeeld van, met video's op onder meer de homepagina.

Met dezelfde techniek, hebben we 8MB en 108 requests bespaard, door een Facebook widget middels lazy loading toe te passen.

Coloured image placeholders

Bekend van het zoeken in Google Images of Pinterest, waarbij afbeeldingen nog niet allen tegelijk geladen zijn. Wel wordt er alvast middels kleurstelling aangeduid waar de afbeelding gaat verschijnen als ook in welke kleurtoon. Deze toepassing is op eenzelfde manier bijvoorbeeld praktisch voor productoverzichten. Deze techniek hebben we uitgerold binnen het LightBolt CMS. Wanneer een afbeelding niet kritiek is voor de weergave (wanneer het dus geen hero/header afbeelding betreft), kan ingesteld worden dat LightBolt deze techniek toepast.

Achter de schermen zijn hiervoor twee manieren, nadat de hoofdkleur achterhaald is.

1. Elke afbeelding kan zijn eigen hoofdkleur hebben. Die kleur kan via PHP automatisch worden toegevoegd aan een stylesheet, waarbij de afbeelding een referende class mee krijgt. Nadeel hierbij is dat deze stylesheet vrij groot kan worden bij veel verschillende afbeeldingen. Om deze reden hebben wij deze werkwijze in een later stadium ingeruild voor methode 2:
2. Op basis van de kleur, valt voor een gekleurde 1x1 gif een base64 encoded string te genereren. Terwijl het als voordeel heeft, dat de kleur niet in een stylesheet hoeft te staan en de hoeveelheid CSS en daarmee kilobytes gereduceerd wordt, genereert het op het eerste gezicht wel requests. De latency die hiermee gemoeid gaat, zorgt er echter voor dat enkel de achtergrondkleur als inline CSS opnemen een beter alternatief is;
3. De achtergrondkleur als inline CSS plaatsen op de het img-element, is wellicht het beste alternatief, wanneer het moeten valideren van de HTML code geen prioriteit is. Als alternatief zou een CMS de taak meegegeven kunnen worden om de styling in een style-element in de head van de website te plaatsen.

Blurred loading

Medium.com, bekend als platform voor schrijvers om een breed doelgroep te kunnen bereiken, hanteert deze oplossing. Progressive image loading, zoals ze het noemen, toont net als coloured image placeholders alvast de ruimte waar een afbeelding gaat verschijnen. Hierbij wordt echter niet de kleurstelling getoond, maar wordt de afbeelding alvast vervaagd weergegeven.

Door hiervoor een (enorm) verkleinde thumbnail te gebruiken en het resultaat een blur (via CSS) mee te geven, geeft dit een goed resultaat. Ondertussen kunnen de originele afbeeldingen geladen worden en kan de thumbnail afbeelding vervangen worden door het origineel formaat.

Optimale (image) performance

Voor het laatste deel, hebben we binnen het LightBolt CMS deze techniek samen laten werken met lazy-loading, vergelijkbaar zoals toegelicht op een learningspaces-artikel. Dusdanig, dat deze techniek voor zowel voorgrond (inline) afbeeldingen werkt, als ook voor achtergrond afbeeldingen. Deze technieken werken binnen LightBolt veelal samen als ook naast elkaar, afhankelijk van de type afbeelding.

Houd wel te allen tijde rekening met de uitvoertijd, zodat deze winst niet ten koste gaat van bijvoorbeeld de TTFB, doordat het CMS meer werk moet doen. Combineer deze techniek dus altijd met bijvoorbeeld server side caching van de thumbnails en/of uiteindelijke HTML code voor optimale snelheid.

Weten hoe wij het hebben gedaan, of vragen over deze techniek? Laat het ons weten!