Heroafbeeldingen in reviews en Thumbor - Development-iteratie #115 - IT Pro - .Plans

Onze developers hebben iteratie #115 opgeleverd. De focus lag in deze sprint op het finetunen van de heroafbeelding in reviews en het implementeren van een nieuwe tool om thumbnails te genereren.

Heroafbeelding in reviews

Om artikelen meer visuele impact te geven, hebben we het mogelijk gemaakt om reviews te voorzien van een zogeheten heroafbeelding. Dit is een grote afbeelding die boven aan de review over de hele breedte van het scherm wordt weergeven. Een voorproefje hiervan heb je al kunnen zien in deze .plan over de Tweakers Express. De hero in dat artikel was toen nog hardcoded. Inmiddels kan de redactie vanuit het cms heroafbeeldingen in reviews beheren, zodat je vaker reviews met een hero mag verwachten.

Naar aanleiding van eerdere feedback hebben we de weergave van de hero vereenvoudigd door het parallaxeffect weg te laten.

Hero-afbeelding in reviews

Thumbor

We liepen er steeds vaker tegenaan dat we voor vernieuwing van de lay-out ook een verandering in de grootte van thumbnails wilden. Dat klinkt eenvoudig, gewoon wat cijfertjes aanpassen, maar zodra dat voor een miljoen bestanden moet, zitten daar toch wat meer haken en ogen aan dan je wellicht zou denken. Bovendien wilden we de afbeeldingen en thumbnails daarvan automatisch laten optimaliseren, zodat er geen onnodige bytes over onze en ook jullie datalijn gaan. Om te voorkomen dat we de daarvoor benodigde wielen zelf moesten uitvinden, zijn we op zoek gegaan naar kant-en-klare mogelijkheden om dat te realiseren.

We zijn daarbij op Thumbor uitgekomen. Dat is een zelf te hosten service die automatisch afbeeldingen verkleint en/of uitsnijdt aan de hand van parameters in de url. Het resultaat daarvan wordt in een cache bewaard op onze Ceph-storage. Onze loadbalancers zorgen voor https- en http/2-verbindingen en gebruiken ook nog eens hun 'reverse proxy cache' voor de meestgebruikte afbeeldingen om het nog sneller te maken.

De nieuwe heroafbeeldingen waren tegelijk een mooie gelegenheid om te testen of we dit goed en schaalbaar hebben ingericht. We hebben ze bovendien zo ingesteld dat ze niet alleen geoptimaliseerd worden, maar dat ook de kwaliteit automatisch wordt aangepast als de afbeelding boven een bepaalde grootte uitkomt. Die grens staat op het moment van schrijven op 200kB, maar kunnen we uiteraard eenvoudig aanpassen aan de hand van feedback. We zijn in deze sprint ook bezig geweest om de site geschikt te maken om de meeste andere thumbnails eveneens via Thumbor te kunnen uitserveren.

Nieuw welkomstgeschenk

We hebben weer een nieuw welkomstgeschenk voor nieuwe Hero- of Elite-abonnees, namelijk een cadeaubon van respectievelijk twintig of vijftig euro van Alternate, Bol.com of Coolblue. Ben je nog geen abonnee, bekijk dan onze aboshop voor de perks die een abonnement je allemaal biedt.

Project Aidan

Baby Aidan Onze developers hebben de mogelijkheid om af en toe tijd te besteden aan eigen projecten. Voor Crisp stond dit eigen project in het teken van een refactor van de rml-parser die ubb-code in bijvoorbeeld reacties of forumberichten omzet naar html. Xav en zijn vriendin hebben in de afgelopen negen maanden gewerkt aan de ontwikkeling van project Aidan, waarvan de release vrijdag succesvol heeft plaatsgevonden. Gefeliciteerd Tim!

Verder hebben we nog:

de lettergrootte voor de artikeltitels op desktop teruggebracht naar het originele formaat;
het formaat van de heroafbeelding op mobiel minder hoog gemaakt;
een aantal kleine bugs gefikst.

Community-pick

In deze iteratie mogen jullie weer stemmen op de voor jullie meest gewilde feature.

IT-banen

Reacties (30)

arnoudwokke Redacteur Tweakers 19 september 2017 14:20

Hmmz, Project Aidan is duidelijk gereleased als mimimal viable product @Xav. Het is natuurlijk een schitterend resultaat voor een eerste iteratie en het is duidelijk dat je Project Aidan met een goede lossless compressie hebt kunnen opleveren, maar ik denk dat je daar nog wel rond 450 sprints aan kwijt bent voordat je alle bugs eruit hebt en alle features hebt kunnen toevoegen

Gefeliciteerd!

Xav Senior Developer @arnoudwokke • 19 september 2017 14:35

Wij gaan er zeker ons best voor doen en zullen proberen om er heel agile mee om te gaan!
Verder kan ik niet anders zeggen dan $_/-\o_$

Bedankt allemaal!

Kecin

@Xav • 19 september 2017 15:15

Gefeliciteerd :-)

Antrax @arnoudwokke • 19 september 2017 14:34

Geweldige reactie $_/-\o_$

@Xav: Gefeliciteerd met kleine Aidan! Hopen dat je sprints productief zijn en een mooi eindresultaat opleveren!

Jogai @arnoudwokke • 19 september 2017 15:56

Volgens mij heb je het concept van een zelflerend systeem nog niet begrepen. Oplevering is gedaan, nu is het een kwestie van veel voordoen, experimenteren, leren en afleren, en dan hopen dat daarna de keuzes gemaakt worden waar je zelf ook blij mee kan zijn...

Maar gefeliciteerd Xav & familie!

Iva Wonderbush 19 september 2017 13:57

Gaan jullie ook met source sets werken zodat we op desktop wel lekker kunnen genieten van kwaliteit? Op mobiel natuurlijk zo klein mogelijk houden.

ACM Software Architect

Webdevelopment

@Iva Wonderbush • 19 september 2017 21:38

Je eerste vraag impliceert dat we nu lage kwaliteit afbeeldingen hebben voor niet-desktop. Dat is niet waar, ook niet voor hero-image. Wel hebben we af en toe via css dat een hogere resolutie-afbeelding kan worden geladen (maar die krijg ik ook op mijn 4k 27"-scherm).
Echter voor de hero-image geldt dat exact dezelfde file voor mobiel en desktop wordt ingeladen. Op mobiel werd ie al slechts gedeeltelijk weergegeven, maar dat is nu aangepast naar een logischere/correctere verhouding.

Door Thumbor te gebruiken is het overigens voor ons wel veel simpeler om meerdere versies van afbeeldingen te gebruiken, maar we moeten alsnog wel oppassen dat we het niet te complex voor onszelf maken. Voor srcset specifiek zitten we met het probleem dat veel van de gebruikte afbeeldingen in artikelen zelf worden embed.
Op dit moment wordt daarvoor letterlijk een img-tag in een html blob opgeslagen en ook zo (via een editor) door de redacteuren wordt ingevoerd. We willen niet dat die opslag allerlei complexe constructies gaat bevatten. Het zou dan heel wat html extra worden in de opslag voor de picture-tag met diverse sources en voor de zekerheid nog een img-fallback. Bovendien is dat een rotklus om achteraf aan te passen als we de schermgrenzen willen veranderen.

Kortom, als (zodra?) we picture+sources of img+srcset gaan gebruiken, zullen we dat op zo'n manier willen doen dat het (meer) forward- en backward-compatible wordt dan de huidige verwerking van afbeeldingen. Anders gezegd; er zal dan iets van een markering 'hier staat plaatje X' in de html staan (maar wel zo dat in de wysiwyg-editor de afbeelding goed wordt getoond), maar niet de hele lap html die nodig is om daar aan toe te voegen dat voor schermgrootte X1*Y1 een andere afbeelding mag worden geladen dan voor X2*Y2. Die lap html kan dan achteraf worden toegevoegd.

En met die wens/eis in het achterhoofd is het ineens een stuk meer dan domweg srcset/sources gaan gebruiken

Iva Wonderbush @ACM • 19 september 2017 22:19

Oh, zo bedoelde ik het niet! Ik zie dat mijn reactie totaal anders verwoord had moeten zijn.

Ik had het over de echte thumbnails bijvoorbeeld op de home pagina bovenaan, de 3 tussen het nieuws en de thumbnails voor reviews door Tweakers. Ook thumbnails en de afbeeldingen van de lightbox slider kunnen juist perfect gebruik maken van source sets voor mobiel.

De echte thumbnails zijn nu altijd precies of bijna precies de juiste formaat voor "normaal" desktop, terwijl je met source sets prima een andere afbeelding kan tonen voor bijvoorbeeld 4K of juist kleinere voor op mobiel.

Afbeeldingen binnen content, nja, dan is dat nou eenmaal zo. Maar alle andere afbeeldingen wat het systeem kan afhandelen kunnen omgezet worden neem ik aan?

ACM Software Architect

Webdevelopment

@Iva Wonderbush • 19 september 2017 22:54

Die lenen zich er inderdaad eenvoudiger voor. Zoals gezegd zorgt Thumbor ervoor dat we vrij eenvoudig alternatieve maten kunnen genereren (mits de bron groot genoeg is), zonder dat we daar weer aanvullende handelingen voor moeten doen.

Onze code die thumbnails genereert zou daardoor relatief eenvoudig omgezet kunnen worden tot picture+sources, hoewel ik bang ben dat het alsnog niet triviaal zal zijn. En we zijn er mede daardoor domweg nog niet aan toe gekomen.

Timo002 @Iva Wonderbush • 19 september 2017 14:16

ff offtopic, hoe gaat dat in zijn werk met source sets? Want ik neem aan dat je bedoeld dat je wezenlijk kleinere afbeeldingen inlaad op mobiel.

Iva Wonderbush @Timo002 • 19 september 2017 14:31

Je kan met source sets bepalen welke afbeelding ingeladen wordt op een bepaalde formaat:
https://www.w3schools.com...filename=tryhtml5_picture

Maar je kan er nog veel meer mee, bijvoorbeeld op een retina (of een ander hoge resolutie) scherm dat je een andere source inlaad van een afbeelding dat x keer zo groot is.

https://www.smashingmagaz...ght-guide-picture-srcset/

Persoonlijk vind ik dat de manier van opbouw met een picture en source tag wat makkelijker werkt en sneller te begrijpen is dan alleen een img tag met srcset attributes.

[Reactie gewijzigd door Iva Wonderbush op 24 juli 2024 20:18]

Timo002 @Iva Wonderbush • 19 september 2017 15:16

Ik heb er weer twee bookmarks bij, binnenkort eens induiken om eventueel toe te passen.

Zoop @Timo002 • 19 september 2017 15:06

Met css media rules heb je doorgaans een afbeelding die je dan overruled met een kleinere versie voor mobiel, of juist grotere versie voor retina. Dit beperkt zich natuurlijk tot css (dus enkel backgrounds en dergelijke) en werkt niet op inline image tags.

Met een sourceset geef je een reeks afbeeldingen op voor een enkele image tag, elke image bedoelt voor een bepaalde afmeting en de browser bepaalt geheel zelf welke hij kan inladen die betrekking heeft op de huidige situatie. Zonder dit heb je al snel dat je veel ste grote foto's inlaadt en dus onnodige pageload (met name interessant voor mobiel gebruik).

Brummetje

19 september 2017 14:17

Gefeliciteerd!

De Hero afbeelding is hier niet helemaal zoals in het voorbeeld. Hij start nu onder de zoekbalk i.p.v. erachter.

crisp Senior Developer

Webdevelopment

@Brummetje • 19 september 2017 15:51

Thanks, bugje is inmiddels geplet

Brummetje

@crisp • 19 september 2017 16:10

Ziet er beter uit ja!

Kliko 19 september 2017 16:18

Gefeliciteerd met de kleine @Xav !

Wat ik mij afvroeg, wat is het parallaxeffect? Probeerde wat te googelen, maar kreeg niet echt een helder resultaat...

Onoffon @Kliko • 19 september 2017 16:36

Parallax voorbeelden:

https://www.awwwards.com/...h-parallax-scrolling.html

Vaak heeft je achtergrond een andere scroll snelheid en/of richting dan de voorgrond, al zijn er ontelbare voorbeelden die onder 'parallax' worden geschaard

Kliko @Onoffon • 19 september 2017 16:51

Ooooooh zo. Thanks!

-The_Mask- 19 september 2017 14:24

Het vakje voor beoordelen van een userreview mist nu zijn achtergrondkleur. Het is nu een lichtgrijze achtergrond met iets donkere maar nog steeds lichtgrijze tekst. Niet de bedoeling denk ik.
Om mijn eigen maar te spammen: productreview: BitFenix Whisper BWG450M review door -The_Mask- *klik*

crisp Senior Developer