Tim Arendsen - Cocktailfanaat, Developer, Gamer
Een van mijn grootste en meest bezochte websites, Drankidee heeft de potentie om veel data de wereld in te slingeren. Elk cocktailrecept heeft een of meerdere afbeeldingen, dus er worden veel afbeeldingen getoond op de website. Hoe zorg je er voor dat dataverkeer wordt beperkt, terwijl de beleving hoog wordt gehouden?
Afbeeldingen zijn belangrijk op receptenwebsites, zo ook op Drankidee en StudentenRecepten.com. Omdat Drankidee op Laravel is gebouwd, is het mogelijk gebruik te maken van open-source packages die problemen makkelijk oplossen. Want waarom het wiel opnieuw uitvinden? Omdat de server VPS waar de website op draait maar zo veel capaciteit heeft, is er redelijk snel voor gekozen afbeeldingen op een andere manier op te slaan. Gelukkig is dit makkelijk te doen met Laravel, en omdat Google Cloud goed geprijsd is bij weinig data, is er voor gekozen om afbeeldingen van de cocktails op te slaan op Google Cloud Storage (GCS).
Zelf een storage-framework bouwen is natuurlijk erg veel gedoe. Daarom is er voor gekozen om gebruik te maken van Laravel Media Library, een package van het Belgische bureau Spatie dat afbeeldingen kan koppelen aan items in je database, en daar meteen manipulaties op kan uitvoeren, super handig! Een afbeelding van een cocktail is namelijk al snel een paar MB groot, en als op elke pagina 15+ afbeeldingen te zien zijn, loopt je datagebruik dus snel op.
Om dit te voorkomen is gebruik gemaakt van de mogelijk om afbeeldingen te "conversen", ofwel aan te passen. Zodra een afbeelding is geüpload, wordt er een job naar een queue gestuurd, die er voor zorgt dat de administratoren niet hoeven te wachten tot alle conversions plaats hebben gevonden. Hierdoor is het beheren van de website razendsnel, terwijl de afbeeldingen wél geoptimaliseerd worden. Helemaal handig is de functie getAvailableUrl(), die er voor zorgt dat bij afbeeldingen die nog niet geconverteerd zijn, het origineel wordt getoond. Zo is er altijd een afbeelding beschikbaar.
Afbeeldingen worden omgezet naar verschillende formaten. Een header-formaat, die extra breed is, om boven aan een receptenpagina te laten zien, en een thumbnail-formaat, dat getoond wordt als er een kleine afbeelding voldoende is. Deze conversies worden in kwaliteit en formaat omlaag gehaald, om er voor te zorgen dat er zo min mogelijk MB's worden verstuurd, zonder de kwaliteit merkbaar te verlagen. Door afbeeldingen vervolgens via Cloudflare naar eindgebruikers te sturen, worden ze ook lokaal gecached, om het internetverkeer nog meer te drukken.
Op deze manier is er geprobeerd het internetverkeer van Drankidee.nl te beperken tot een minimum. Originele afbeeldingen worden alleen nog intern gebruikt (en zelfs daar eigenlijk niet). Alleen verkleinde en gecropte afbeeldingen zijn op de front-end nog te zien, en dat is te merken in de prestaties van de server. De server zendt nu minder verkeer uit, en is dus sneller en kan meer dingen tegelijk doen.