Image editor & media-optimalisatie

Image editor & media-optimalisatie

Afbeeldingen zijn verantwoordelijk voor meer dan 60% van het paginagewicht op een gemiddelde webshop. Hyvä Commerce adresseert dat probleem direct vanuit de admin: een ingebouwde image editor en automatische media-optimalisatie, zonder losse plugins of build-stappen. Het resultaat is aantoonbaar zichtbaar in je Lighthouse-score.

Wat is het probleem met media in standaard Magento 2?

Magento 2 met Luma of een doorsnee thema geeft je weinig handvatten voor media-optimalisatie. Je uploadt een afbeelding, Magento genereert een paar resoluties, en daarmee houdt het op.

De praktijk ziet er vaak zo uit:

• PNG's van 3 MB in de productcatalogus
• Geen automatische WebP-conversie
• Statische -tags zonder lazy loading
• Geen cropping-workflow voor contentteams zonder Photoshop

Resultaat: trage LCP (Largest Contentful Paint), een slechte Core Web Vitals-score en een contentteam dat afhankelijk is van een developer of externe tool voor elke beeldbewerkingstaak.

Wat doet de image editor in Hyvä Commerce?

Hyvä Commerce levert een image editor direct in de admin. Geen externe plugin, geen apart abonnement. Contentteams en merchants kunnen beelden bijsnijden, roteren, en aanpassen — zonder Photoshop of een developer te hoeven bellen.

Concreet wat je kunt doen vanuit de admin:

• Croppen op vrije verhouding of vaste aspect ratios (handig voor productgrids, banners, thumbnails)
• Roteren en spiegelen van afbeeldingen
• Brightness en contrast aanpassen
• Opslaan als nieuwe variant zonder het origineel te overschrijven

Dat laatste punt is niet triviaal. Wij zien bij klanten dat contentteams regelmatig per ongeluk het origineel overschrijven in standaard tools. De image editor in Hyvä Commerce beschermt het origineel standaard.

Automatische media-optimalisatie: wat gebeurt er achter de schermen?

De image editor is één onderdeel. De automatische media-optimalisatie is het andere, en dat is waar de performance-winst écht zit.

Hyvä Commerce converteert afbeeldingen automatisch naar het meest efficiënte formaat dat de browser van de bezoeker ondersteunt. In de praktijk betekent dat:

• WebP voor moderne browsers (Chrome, Edge, Firefox, Safari 14+)
• Fallback naar JPEG/PNG voor oudere browsers
• Automatische resolutie-varianten voor verschillende schermbreedtes (responsive images via srcset)
• Lazy loading ingebakken in de theme-layer

Je doet niets. Je uploadt een afbeelding, Hyvä Commerce regelt de rest.

Wat levert dat op in de praktijk?

Dit zijn indicatieve benchmarks gebaseerd op klantprojecten. Exacte resultaten hangen af van het type afbeelding, server en CDN-configuratie.

De koppeling met Core Web Vitals

LCP is het zwaarst wegende Core Web Vitals-signaal voor Google Search ranking. In meer dan 80% van de gevallen is de LCP-element een afbeelding — een hero-banner, een productafbeelding, of een CMS-blok.

Core Web Vitals en Hyvä Commerce hebben een directe relatie. Het HTML-first principe van Hyvä (Tailwind + Alpine, ~95% minder JavaScript dan Luma) elimineert render-blocking scripts. Maar als die lichtgewicht pagina toch een 800 KB JPEG laadt, gooi je die winst weg.

De combinatie werkt als volgt:

1. Hyvä Theme levert een vrijwel JavaScript-vrije pagina — de browser hoeft niet te wachten op script-parsing
2. Automatische media-optimalisatie zorgt dat de LCP-afbeelding snel binnenkomt
3. Lazy loading voorkomt dat afbeeldingen buiten de viewport de initiële laadtijd belemmeren
4. Responsive images leveren mobiele gebruikers een afbeelding op schermformaat, niet een desktopversie op 40% zoom

Wij zien bij klanten die overstappen van Luma naar Hyvä Commerce regelmatig een Lighthouse-score van 95+ op mobile — iets wat op Luma structureel moeilijk haalbaar is zonder agressieve custom optimalisatie.

Hoe zit het met bestaande afbeeldingen?

Een veelgestelde vraag: wat gebeurt er met de duizenden productafbeeldingen die al in Magento staan?

De media-optimalisatie van Hyvä Commerce werkt op het moment van weergave, niet alleen bij upload. Bestaande afbeeldingen profiteren dus ook van WebP-conversie en responsive srcset, zonder dat je ze opnieuw hoeft te uploaden.

Voor de image editor geldt: die werkt op individuele afbeeldingen die je actief bewerkt. Een bulk-crop-workflow voor bestaande catalogus is geen one-click-oplossing — dat is werk dat planning vraagt.

Wat levert dit op voor contentteams?

Contentteams werken in de admin, niet in terminals. De waarde van de image editor zit niet in technische prestaties, maar in autonomie.

Wat verandert er voor een contentteam:

• Geen afhankelijkheid van een developer voor basis beeldbewerking
• Geen extern abonnement op tools als Canva of Photoshop voor kleine aanpassingen
• Directe preview via de liveview-functionaliteit van het CMS — je ziet meteen hoe een bijgesneden afbeelding eruitziet in de pagina
• Consistente beeldverhouding door vaste aspect ratios in te stellen per contentype

Dat laatste punt is iets wat wij bij klanten sterk aanraden te configureren bij implementatie. Stel vaste verhoudingen in voor productafbeeldingen (bijv. 1:1 voor productgrid, 16:9 voor banners) zodat het grid nooit kapot gaat door een afwijkend formaat.

Hyvä Commerce als geheel: media is één puzzelstuk

De image editor en media-optimalisatie zijn onderdeel van de bredere Hyvä Commerce merchant-toolset. Die bundelt:

• Hyvä Theme — HTML-first frontend, Tailwind + Alpine
• Hyvä UI — componentenbibliotheek voor consistente UI
• Hyvä Checkout — geoptimaliseerde checkout-flow
• Modern CMS met liveview — live preview van contentwijzigingen
• Vernieuwd admin-theme — modern Magento-admin
• Image editor — beeldbewerking vanuit admin
• Automatische media-optimalisatie — WebP, srcset, lazy loading
• Dashboard — inzicht in performance en metrics

De licentie kost circa 3.000 euro per jaar, of eenmalig rond de 12.000 euro voor permanent eigenaarschap. Prijzen kunnen variëren; PPP- en trade-in-regelingen bestaan. De implementatie komt daar bovenop.

Het alternatief — Hyvä Theme los kopen en losse tools voor media-optimalisatie, beeldbewerking en checkout samenvoegen — is technisch mogelijk, maar levert technische schuld op. Elke tool heeft zijn eigen updatecyclus, zijn eigen compatibiliteitsproblemen en zijn eigen beheerkosten.

Wanneer Hyvä Commerce niet de juiste keuze is

Hyvä Commerce is niet voor elke situatie de juiste ingreep.

Overweeg Hyvä Commerce niet als:

• Je shop draait op een zwaar gecustomiseerd Luma-thema met tientallen maatwerk modules. De migratie-investering overstijgt dan snel de licentiekosten.
• Je al actief werkt met een volwassen media-CDN (Cloudinary, Imgix) die WebP, resizing en smart cropping al verzorgt. De media-optimalisatie van Hyvä Commerce biedt dan minder toegevoegde waarde.
• Je shop heeft minder dan ~500 producten en een statisch assortiment. De performance-winst is er, maar de businesscase voor de licentiekosten is dunner.
• Je team heeft geen Hyvä-kennis en je hebt geen budget voor een degelijke implementatie. Een slecht geïmplementeerd Hyvä-project presteert slechter dan een goed onderhouden Luma-shop.

Wél interessant als:

• Je Core Web Vitals structureel onder de 75-score zitten en je weet dat media het knelpunt is
• Je contentteam nu afhankelijk is van developers voor basis beeldbewerkingstaken
• Je Magento-shop groeit in catalogusomvang en je wilt geen aparte media-tool hoeven beheren
• Je checkout-conversie tegenvalt en je wilt frontend én checkout in één technologielaag aanpakken

Hoe wij implementeren

Bij coding.nl zijn we Hyvä Certified. We implementeren Hyvä Commerce-projecten end-to-end: van licentie-advies en migratieplanning tot technische implementatie en configuratie van de media-pipeline.

Bij elk project stellen we bij implementatie de volgende zaken in voor media:

• Vaste aspect ratios per contentype (productgrid, categorie-banner, CMS-blok)
• WebP-kwaliteitsinstellingen afgestemd op de catalogus (productfoto's verdragen lagere kwaliteitswaarden dan lifestyle-beelden)
• Lazy loading-drempels afgestemd op paginalayout
• CDN-integratie waar relevant

Dat is geen standaard configuratie — dat is keuzes maken op basis van je specifieke shop en doelgroep.

De kern

Media-optimalisatie is geen leuke extra. Het is een randvoorwaarde voor een LCP onder de 2,5 seconden.

Hyvä Commerce bakt die optimalisatie in — in de image editor voor contentteams, in de automatische WebP-conversie en responsive srcset voor bezoekers. Gecombineerd met het HTML-first principe van Hyvä Theme haal je performance-niveaus die op Luma structureel moeilijk bereikbaar zijn.

Wil je weten of Hyvä Commerce de juiste stap is voor jouw shop, en wat de media-pipeline concreet oplevert? Neem contact op via /contact voor een gratis Tech Check — geen verkoopgesprek, gewoon een eerlijk technisch oordeel.