Als alleen al het lezen van de term “afbeeldingsformaat” je angst aanjaagt — blijf bij ons voor één seconde.
JPEG. Dat ken je, toch?
PNG. Hé, daar heb je ook van gehoord!
Dat zijn beide beeldformaten. En WebP en AVIF zijn gewoon twee verschillende, iets nieuwere versies.
Waarom zijn ze in godsnaam gemaakt?
Nou, net als toen de Model T werd ontwikkeld om paarden te vervangen, streven deze moderne formats ernaar om verandering te brengen en te verbeteren op het gebied van snelheid en kwaliteit.
Dus, waarom zou je in hemelsnaam verder lezen?
Als je wilt zorgen dat je kleine bedrijfswebsite zo goed mogelijk voorbereid is om bij te blijven met moderne technologie en veranderende consumentenbehoeften, dan wil je een voorbeeld nemen aan Henry Ford en inventief worden.
Gelukkig is die taak vandaag de dag iets minder vettig, maar waarschijnlijk wel wat technischer. Deze gids kan je voorzien van de redenen, de tips en de tools om te begrijpen, te kiezen — en zelfs het beeldformaat te implementeren dat jouw site een daverend succes zal maken.
Waarom Zorgen Over Afbeeldingsformaten Voor Mijn Website?
Het formaat van de bestanden op je website, vooral afbeeldingen, lijkt misschien het laatste waar je echt over na moet denken.
We raden je aan om nog eens na te denken.
Hier is precies waarom het formaat dat je gebruikt voor graphics essentieel is voor de website-ervaring en prestaties.
Afbeeldingen Zijn Overal…
Hoe dan ook, afbeeldingen vormen waarschijnlijk een belangrijk deel van jouw website.
Volgens Web Almanac nemen afbeeldingen op desktop meer dan 1.000 KB in beslag van de totale 2.315 KB van een website. Dat is bijna 50%! Voor mobiel nemen afbeeldingen bijna 900 KB in beslag van in totaal 2.020 KB. Het volgende meest gebruikte inhoudstype (JavaScript) haalt zelfs niet de helft van het gewicht van afbeeldingen!
Het is geen verrassing dat bijna 100% van de websitepagina’s een afbeelding bevat. En dat afbeeldingen de meest impactvolle component zijn op 80% van de websites die via een desktop worden bekeken (voor mobiel is dat 70%). Dit wordt duidelijk gemaakt door de Core Web Vitals Largest Contentful Paint (LCP) metriek die het grootste element identificeert dat “boven de vouw” op een website gevonden wordt.
Met andere woorden, het is bijna onmogelijk om de aanwezigheid en het belang van afbeeldingen op het web te overdrijven.
…Dus Hoe Ze Presteren Is Belangrijk!
Wanneer je bedenkt dat afbeeldingen het grootste deel van het paginagewicht van een website uitmaken, is het cruciaal om na te denken over hoe ze zijn geformatteerd — wat invloed heeft op hun prestaties.
Verschillende formaten, zoals AVIF en WebP waar we hierna in zullen duiken, beïnvloeden de grootte en het gewicht van afbeeldingen.
Daarnaast worden verschillende formaten anders aangepast en gecomprimeerd. Als je een afbeelding niet kunt bewerken naar het ideale formaat of gewicht voor je website, zit je vast aan zware en/of vervormde graphics die zowel de laadsnelheid als de gebruikerservaring verpesten.
En die slechte ervaring is niet alleen een tegenvaller voor bezoekers. Na verloop van tijd, wanneer zoekmachines langzame laadtijden en bounces door onaangename beelden registreren, kan je ranking dalen en je zichtbaarheid, conversies en uiteindelijk ook je inkomsten schaden.
Lijkt het alsof het tijd is om meer te leren over het optimaliseren van afbeeldingen voor het web?
In dit artikel behandelen we twee populaire en moderne afbeeldingsformaten die elke website-eigenaar en -beheerder zou moeten kennen.
WebP Verkennen
WebP is een afbeeldingsformaat dat oorspronkelijk door Google is gecreëerd in 2010, om de beeldkwaliteit en de comprimeerbaarheid van JPEG te verbeteren. Dit alles zonder de bestandsgroottes van afbeeldingen groter te maken.
En dat deed het!
WebP is uniek omdat het zowel verliesgevende (grote reductie in bestandsgrootte, enig beeldgegevens verloren) als verliesvrije (minder reductie in bestandsgrootte, maar geen beeldgegevens verloren) compressietechnieken gebruikt. Dit betekent dat beeldbestanden echt gecomprimeerd kunnen worden wanneer dat nodig is, terwijl de visuele kwaliteit vrijwel intact blijft. WebP ondersteunt ook functies zoals beeldtransparantie (waar PNG’s beroemd om zijn) en animaties (GIF’s waren het eerste bestandstype dat dit aankon).
WebP is een zeer populair formaat geworden voor webontwikkelaars, ontwerpers en vrijwel iedereen die met beeldmateriaal op het internet werkt.
Dit komt door de vele functies die we hebben genoemd: WebP-afbeeldingen comprimeren effectief, zien er geweldig uit, kunnen in verschillende omgevingen worden gebruikt en worden ondersteund door alle moderne webbrowsers dankzij hun lange aanwezigheid op de markt en hun ondersteuning door Google. Werken met WebP belooft meestal een geweldige ervaring voor zowel websitebezoekers als beheerders.
AVIF Leren Kennen
AVIF, wat staat voor AV1 Image File Format, is een veel nieuwer beeldformaat dan WebP.
Geïntroduceerd in 2019 door de Alliance for Open Media, is AVIF de op afbeeldingen gerichte afsplitsing van het bekende AV1-videofromaat. Het heeft als doel de bestandskwaliteit en de grootte/gewicht van afbeeldingen te verbeteren in vergelijking met oudere formaten, waaronder JPEG en WebP.
En net zoals WebP dat eerder deed, levert AVIF ook zijn doel.
Met AVIF krijg je echt afbeeldingen van hoge kwaliteit die heel weinig ruimte innemen in vergelijking met andere formaten. Dit is allemaal te danken aan de geavanceerde manier waarop het grafische bestanden comprimeert, evenals het vermogen om in veel gevallen rijkere kleuren te bieden.
Het voornaamste nadeel van AVIF is dat het simpelweg niet zo bekend of gebruikt is als WebP. Echter, we zullen zien dat zijn ster zal rijzen naarmate meer platforms, technologie, ontwerpers en ontwikkelaars zich de komende jaren aanpassen om ermee te werken.
AVIF vs. WebP: Vergelijking Over 7 Belangrijke Vectoren
Na die leuke geschiedenisles is het eindelijk tijd om te onderzoeken hoe AVIF en WebP zich verhouden op alle gebieden die belangrijk voor je zijn, inclusief laadtijden, compressiekwaliteit, bewerkingsgemak en meer.
1. Meeste Browserondersteuning: Gelijkspel
Natuurlijk is het het beste om een afbeeldingsformaat te kiezen dat compatibel is met de meeste webbrowsers. Gebroken afbeeldingen zijn mogelijk zelfs erger dan traag ladende voor de gebruikerservaring.
Als de nieuwere jongen in de buurt werd AVIF lange tijd niet zo breed ondersteund door alle browsers. Daarom zie je vaak dat het slechte cijfers krijgt als het gaat om browserondersteuning.
Echter, vanaf 2024 toont de website Can I Use dat zowel AVIF als WebP beschikbaar zijn op alle belangrijke browsers.
Aangezien AVIF bijna het gat heeft gedicht, zullen we dit een gelijkspel noemen. Het is echter belangrijk om te weten dat WebP nog steeds het meest erkende en gebruikte formaat is. Als zodanig zul je het waarschijnlijk nog een tijdje blijven zien als de meest browser-compatibele optie, wat invloed heeft op de rangschikking in verschillende andere factoren die we vandaag zullen vergelijken.
2. Snelste Laadtijd: AVIF
Zoals we hebben aangestipt, en je zeker hebt ervaren zowel als website-eigenaar als gebruiker, speelt de snelheid waarmee een website laadt een enorme rol in hoe goed deze presteert. Dit is nog belangrijker voor bezoekers die handheld apparaten gebruiken, die waarschijnlijk onderweg zijn en klaar om actie te ondernemen.
Het verkleinen van alle elementen van een webpagina, vooral afbeeldingen, kan de laadtijden aanzienlijk verbeteren.
AVIF heeft hier een duidelijk voordeel over WebP. Over het algemeen zijn AVIF-afbeeldingen 50% kleiner dan JPEG-afbeeldingen, terwijl WebP-afbeeldingen 30% kleiner zijn dan JPEG.
Dit verschil in grootte kan worden toegeschreven aan hoe elk bestandsformaat compressie hanteert. WebP werkt met de VP8-videocodec compressiemethode, terwijl AVIF-compressie gebaseerd is op de AV1-videocodec, een modernere optie.
Hoewel al dat technische jargon goed is om te weten, is hier de belangrijkste conclusie: AVIF-bestanden zijn kleiner, wat zal helpen om je website sneller te laden.
3. Superieur Voor Verliesloze Compressie: WebP
OK, dus compressie is niet alles; de kwaliteit van de gecomprimeerde afbeelding is ook belangrijk!
Hier is iets interessants: AVIF ondersteunt verliesvrije compressie (ook wel bestandsverkleining genoemd) met weinig tot geen dataverlies of kwaliteitsverlies. Echter, tijdens dit proces hebben sommige experimenten aangetoond dat het de bestandsgrootte niet zoveel reduceert als het WebP-formaat.
Dus, als je het meest gecomprimeerde beeld met de hoogste kwaliteit wilt, vooral een zonder tekst, dan is WebP de manier om te gaan.
4. Beste Als Verliesgevende Compressie Acceptabel Is: AVIF
Aan de andere kant, in situaties waar verlies toelaatbaar is (wanneer maximale compressie nodig is en enige kwaliteit opgeofferd kan worden), kan het AVIF-formaat een iets hogere kwaliteit behouden dan WebP, terwijl het nog steeds de bestandsgrootte aanzienlijk vermindert.
Heb je afbeeldingen die je moet comprimeren maar kun je geen helderheid opofferen? Denk aan foto’s, afbeeldingen met tekst, etc. Probeer het AVIF-formaat hiervoor uit.
5. Topkeuze Voor Fotografie: AVIF
Zoals we net hebben besproken, als het gaat om het tonen van digitale fotografie op je website, is AVIF de winnaar.
Dit is om een paar redenen.
Ten eerste zorgt het efficiëntere compressiealgoritme voor zeer lichte afbeeldingen, zonder kwaliteitsverlies. Bovendien ondersteunt AVIF een hogere bitdiepte (of aantal unieke kleuren) dan WebP. Dus, werk met AVIF als je je foto’s op hun scherpst, meest gedetailleerd en kleurecht wilt houden.
6. Gemakkelijkst Te Bewerken: Gelijkspel
De waarheid is dat WebP door de meeste, zo niet alle, populaire fotobewerkingstools wordt ondersteund, terwijl AVIF dat nog niet is. Dit geeft WebP een voorsprong als het gaat om bewerkingsgemak.
Echter, de functies van het AVIF-beeldformaat die we al hebben besproken, helpen het om iets meer kwaliteit te behouden wanneer het bewerkt wordt. Een tegenpunt in deze kolom.
Dus hoewel AVIF-bestanden lichtelijk gunstiger kunnen zijn voor bewerking, is dat alleen van belang als je software hebt die ermee werkt! Daarom beschouwen we het gemak van bewerken als een gelijkspel.
7. Ideaal voor delen op sociale media: WebP
Scroll eens op LinkedIn of Facebook en vertel ons dit: Vallen berichten met afbeeldingen je vaker op? Voor ons wel!
Vandaag is het plaatsen van afbeeldingen van hoge kwaliteit essentieel voor sociale media engagement wanneer je concurreert met duizenden (zoniet miljoenen) andere bedrijven om aandacht.
Het ideale bestandsformaat hier komt terug op compatibiliteit. Hoewel AVIF over het algemeen de overhand heeft wat betreft laadsnelheid, als het platform het afbeeldingstype niet ondersteunt, zal het helemaal niet laden! Bijvoorbeeld, het moederbedrijf van Facebook, Meta, ondersteunt WebP afbeeldingen in advertenties, maar geen AVIF.
WebP heeft nog steeds een bredere ondersteuning voor browsers en platforms, wat het een voordeel geeft bij het kiezen van welk bestandsformaat te gebruiken voor afbeeldingen die je gaat delen op sociale media (voorlopig althans).
Het Oordeel: Wanneer AVIF vs. WebP Te Kiezen
Met foto’s, grafische afbeeldingen en algemene afbeeldingen als enkele van de meest centrale elementen van webdesign, kan het ontmoedigend zijn om het juiste bestandstype voor je website te kiezen.
Om eerlijk te zijn, denken wij niet dat je echt een foute keuze kunt maken tussen AVIF en WebP. De keuze die je maakt hangt gewoon af van je prioriteiten — en je kunt altijd nog van gedachten veranderen in de toekomst!
Maar als je jezelf verlamd vindt door besluiteloosheid, zullen we onze basisgedachten uiteenzetten over wanneer je AVIF moet kiezen en wanneer je voor WebP moet gaan.
Wanneer Afbeelding Alles Is: Kies AVIF
Over het algemeen is het AVIF-afbeeldingsformaat ideaal voor echt hoogwaardige visuals zoals foto’s, digitale kunst en grafisch ontwerp die leesbaar moeten zijn, wat er ook gebeurt. Dat maakt het perfect geschikt voor een website waar je grote, maar nog steeds mooie, afbeeldingen snel wilt laden en een onvergetelijke eerste indruk wilt maken.
Bijvoorbeeld, een portfoliosite in een sterk visuele industrie, een marketing website voor een fotografiebedrijf, of een e-commercesite die supergedetailleerde foto’s van je aanbod vereist (Verkoop je misschien high-end maatwerk carrosseriekits? Cool!).
AVIF is de weg te gaan voor scherpe afbeeldingen die nog steeds snel laden en de gebruikerservaring niet in de weg staan.
Wanneer Veelzijdigheid Belangrijk Is: Kies WebP
Eerlijk gezegd, de meeste typen websites: van je lokale dienstenbedrijven tot je online boetieks, eenpagina freelance dossiers, eenvoudige e-commerce platforms, en verder — kunnen veilig WebP-afbeeldingen gebruiken.
Dit komt doordat dit formaat goed samenwerkt met een reeks grafische typen, waaronder de meeste afbeeldingen en illustraties, logo’s, animaties en meer. Bovendien doet het dit alles met een ideaal bestandsformaat voor snel laden.
Bovendien valt niet te ontkennen dat dit formaat nog steeds het meest erkend is van de twee, waardoor het een klein maar stevig voordeel heeft op het gebied van browsers, platforms, bewerkingstools en ontwerpers.
7 Tools Om Afbeeldingen Op Je Website Te Optimaliseren
Nu je alles weet over hoe je de juiste bestandsformaten kunt kiezen en gebruiken afhankelijk van je behoeften en wensen als beheerder van een kleine bedrijfswebsite, laten we het hebben over hoe je die informatie daadwerkelijk kunt gebruiken.
Of je nu moet converteren, comprimeren, bewerken of je website moet instellen om alles op het gebied van afbeeldingen aan te kunnen, hier zijn enkele geweldige hulpmiddelen in alle prijsklassen om je op weg te helpen met afbeeldingsoptimalisatie.
WordPress Plugins
1. Optimole is een betaalde WordPress-plugin die vrijwel alles op het gebied van afbeeldingen voor WordPress-sites afhandelt: van automatische optimalisatie tot aanpassing van grootte, cloudopslag, slim laden en meer. Pakketten beginnen vanaf $19.08/maand, jaarlijks gefactureerd.
2. Van matt plugins komt zowel de gratis Converter for Media plugin die conversies naar WebP afhandelt als de betaalde ($50/jaar) Converter for Media PRO die de functionaliteit uitbreidt om ook AVIF-conversies te kunnen afhandelen.
Compressiegereedschap
3. Kraken.io is een populaire, krachtige en snelle optie voor het comprimeren en optimaliseren van website-afbeeldingen. Als je regelmatig nieuwe afbeeldingen toevoegt, kan een abonnement een goede keuze voor je zijn (vanaf $50 per jaar).
4. Voor meer sporadische gebruikers, bekijk het gratis afbeeldingscompressieplatform van ShortPixel, of hun websitechecker die je helpt om verbeterpunten te identificeren.
Conversie Apps
5. Het platform voor afbeeldingen en video’s, Cloudinary, biedt zowel een Afbeelding naar AVIF-tool als een Afbeelding naar WEBP-tool om snel je bestandsformaat te wijzigen — gratis!
6. Picflow‘s gratis Image Converter tool zet snel om tussen de meeste moderne afbeeldingstypen, inclusief AVIF en WebP.
Formaat Wijzigen en Software Bewerken
7. AVIF Studio is een gratis Chrome-extensie (en website) die je kunt gebruiken om afbeeldingen in veel formaten, waaronder AVIF, WebP, JPG, PNG en ICO, te vergroten, bewerken en annoteren.
Kies Je Speler: AVIF of WebP
Als het gaat om moderne beeldformaten, hebben AVIF en WebP beide veel te bieden.
AVIF blinkt echt uit in kwaliteit en snelheid, waardoor het het perfecte formaat is wanneer verbluffende visuals en perfect laden het doel zijn.
Maar dat is niet om de waarde van WebP te negeren, die ligt in zijn veelzijdigheid, perfect afgestemde compressie versus kwaliteitsbalans, en wereldwijde erkenning.
Hoewel we niet graag vertrouwen op de oude uitdrukking “het hangt ervan af”… de keuze tussen AVIF en WebP hangt echt af van de behoeften van je website en je voorkeuren!
Als je nog steeds niet kunt beslissen, of een beetje hulp zoekt met alles wat met websites te maken heeft, dat is een verzoek dat we gemakkelijk kunnen beantwoorden.
Het team van professionele diensten van DreamHost dekt het hele scala aan activiteiten voor kleine bedrijfswebsites, van het opstarten met ontwerp en ontwikkeling tot het soepel laten draaien met doorlopende hosting en beheer.
Wat je ook kiest, we staan altijd klaar om te helpen.
