Vaarwel, JPG: Hier is Hoe Je Afbeeldingen Optimaliseert voor het Moderne Web (WebP, SVG, en Meer)

Stel je voor dat je vijf seconden moet wachten op elke afbeelding tijdens het scrollen door Instagram. Kun je je voorstellen dat iemand zo lang wil wachten tot elke afbeelding geladen is? Wij denken van niet.

Afbeeldingen, hoewel noodzakelijk, kunnen lastig zijn om mee te werken. Ze voegen veel bulk toe aan de webpagina en kunnen je website vertragen, zelfs als je al het andere correct doet.

Volgens onderzoek van Google is een bezoeker 90% meer geneigd om jouw website te verlaten wanneer de laadtijd stijgt van één seconde naar vijf seconden. Dit vermindert niet alleen de kans op conversie, maar heeft ook een negatieve invloed op zoekmachineoptimalisatie (SEO).

Het optimaliseren van afbeeldingen voor het web — hun grootte verkleinen zonder kwaliteitsverlies — kan je helpen om je paginalaadtijden te verbeteren en de bestandsgrootte te verminderen. Het klinkt als veel werk, maar met de juiste hulpmiddelen voor afbeeldingsoptimalisatie kun je het proces vereenvoudigen en de prestaties van je site vrij eenvoudig verbeteren.

In deze handleiding bespreken we het belang van afbeeldingsoptimalisatie en de impact ervan op je website. Vervolgens bekijken we een paar verschillende manieren waarop je je afbeeldingen kunt optimaliseren.

Laten we meteen beginnen!

Wat Is Afbeeldingsoptimalisatie Voor Het Web?

Afbeeldingsoptimalisatie is het proces van het zo compact mogelijk maken van je webafbeeldingen zonder kwaliteitsverlies.

Denk erover als het inpakken voor een reis – je wilt alles meenemen wat je nodig hebt, maar je wilt geen zware koffer meeslepen.

Evenzo willen we dat onze afbeeldingen er geweldig uitzien, maar tegelijkertijd onze website niet vertragen.

Hoe Werkt Afbeeldingsoptimalisatie?

Stel je hebt een foto van je hond die je op je website wilt plaatsen.

Allereerst kijken we naar de afmetingen of beeldresolutie.

Als je je mobiele website optimaliseert en het alleen afbeeldingen tot 1000 pixels breed moet tonen, heeft het geen zin om een foto van 4000 pixels breed te uploaden. Natuurlijk, het ziet er beter uit, maar het zal onopgemerkt blijven door je bezoekers en uiteindelijk je site vertragen. Het simpelweg aanpassen van de grootte van de afbeelding kan het bestand al veel kleiner maken.

Hierna gaan we over op compressie. We bespreken zo de soorten compressie. Onthoud voor nu dat er twee typen zijn: verliesgevend en verliesvrij.

Als we verliesvrije compressie gebruiken, zeggen we tegen de computer, “Maak dit kleiner, maar verander niet hoe het eruit ziet!”

Het algoritme, of de compressietool, zal een manier vinden om de bestandsgrootte te verkleinen zonder kwaliteitsverlies door simpelweg het bestand beter te organiseren.

Als we voor lossy compressie kiezen, zeggen we: “Maak dit kleiner, en het is oké als er dingen verwijderd moeten worden, zolang het er nog steeds goed uitziet.”

Het algoritme kan besluiten dat twee zeer vergelijkbare tinten blauw gewoon één tint kunnen zijn, of dat sommige kleine details op de achtergrond niet super belangrijk zijn. Of misschien heeft de donkere lucht niet zoveel pixels nodig die aan zwart zijn gewijd. We kunnen ook extra informatie die verborgen zit in het afbeeldingsbestand verwijderen. Dingen zoals wanneer en waar de foto is genomen, welke camera is gebruikt — dingen die we niet nodig hebben voor een website.

Dus, alles samenvattend: we beginnen met een hondenfoto van 5MB. We passen het formaat aan, comprimeren het zorgvuldig, verwijderen de extra informatie en slaan het op als een WebP. Nu hebben we een afbeelding van 100KB die er nog steeds geweldig uitziet maar veel sneller laadt.

En dat is het doel van afbeeldingsoptimalisatie: afbeeldingen klein genoeg maken om snel te laden, maar nog steeds goed genoeg om je geweldige hond te laten zien.

Het is een evenwichtsoefening, maar met een beetje oefening krijg je er de slag van. Je websitebezoekers zullen je dankbaar zijn wanneer ze je schattige pup kunnen zien zonder te wachten tot de afbeelding geladen is.

Hoe Kies Je Een Afbeeldingscompressietool?

Het beste beeldcompressiealgoritme is er een die de kleinste beeldbestanden kan creëren zonder kwaliteitsverlies. Het hangt echter ook af van het type compressie dat je kan helpen om de gewenste bestandsgrootte te bereiken.

Zoals we eerder vermeldden, zijn er twee soorten compressie:

• Verliesvrije compressie: Denk aan jezelf die inpakt voor een reis met die vacuüm opbergzakken. Je drukt alle lucht eruit, waardoor je spullen kleiner worden. En wanneer je uitpakt, is alles precies zoals je het hebt ingepakt. Verliesvrije compressiealgoritmen werken precies zo. Ze proberen zoveel mogelijk van de afbeelding te behouden terwijl ze toch de bestandsgrootte verminderen. Wanneer je de afbeelding opent, ziet het er identiek uit aan het origineel. Het is geweldig voor het kristalhelder houden van afbeeldingen zonder gegevens te verwijderen.
• Verliesgevende compressie: Verliesgevende compressie lijkt meer op inpakken voor een lange reis door een paar dingen achter te laten. Misschien heb je niet alle tien t-shirts nodig, dus pak je er maar vier in. Zeker, je tas is lichter, maar je hebt ook een beetje van wat je begon verloren. Dit kan je de kleinst mogelijke bestandsgroottes geven, maar het gaat ten koste van een langzame maar permanente achteruitgang in beeldkwaliteit. JPEG, of JPG, is een gangbaar type verliesgevend beeld.

Bijvoorbeeld, als je scans van documenten verstuurt waarbij de tekst leesbaar moet zijn, wil je de verliesvrije compressie. Maar voor gewone foto’s die je tijdens je reis hebt gemaakt? Verliesgevende compressie zou goed werk leveren en je ook een veel kleiner bestand geven zonder dat het duidelijk is dat de afbeelding gecomprimeerd was.

Nu is de vraag, doet dit er echt toe?

Is Beeldoptimalisatie Belangrijk?

Bijna 80% van de webpagina’s op het internet heeft afbeeldingen als het meest impactvolle element. Dit betekent dat het optimaliseren ervan je website een aanzienlijke prestatieverbetering kan geven.

Zoekmachines zoals Google nemen ook Core Web Vitals (CWV) in overweging om te bepalen welke website hoger scoort.

Core Web Vitals is een reeks metrics die de prestaties van een site meten, waarbij een van de belangrijkste metrics de Largest Contentful Paint (LCP) is.

LCP meet de tijd die nodig is om het grootste element op de pagina te laden. Dit is over het algemeen de heldenafbeelding voor de meeste websites.

Deze grote afbeeldingsbestanden hebben vaak een negatieve invloed op de LCP-score van je website. En als de score een tijdje zo blijft, kan dit een deprimerend effect hebben op je conversies.

Daarom is het optimaliseren van afbeeldingen een van de meest effectieve manieren om de prestaties van je site te verbeteren en je SEO te versterken.

Verschillende Soorten Afbeeldingsbestanden

Het kiezen van het juiste afbeeldingsformaat gaat niet alleen over het mooi maken van je foto’s.

Het juiste beeldformaat kan een drastisch effect hebben op de prestaties van je website, gebruikerservaring, en zelfs op je zoekmachine rankings.

Dus, als je afbeeldingen gebruikt op je website, is het belangrijk om vertrouwd te raken met de verschillende bestandstypen en wanneer ze te gebruiken.

JPEG (Joint Photographic Experts Group)

JPEG is een van de oudste afbeeldingsbestandsformaten, samen met BMP en GIF.

Voordelen:

• Uitstekend voor foto’s en complexe afbeeldingen met veel kleuren.
• Biedt een goede balans tussen bestandsgrootte en beeldkwaliteit.
• Breed ondersteund op alle browsers en apparaten.

Nadelen:

• Het gebruikt verliesgevende compressie, wat betekent dat er gegevens verloren gaan wanneer de afbeelding wordt gecomprimeerd.
• Ondersteunt geen transparantie.
• Niet ideaal voor afbeeldingen met tekst of scherpe randen, aangezien deze wazig kunnen ogen.

Best voor: Foto’s, complexe illustraties en elke afbeelding waar een klein kwaliteitsverlies niet merkbaar is.

PNG (Portable Network Graphics)

PNG is een veelzijdig formaat dat afbeeldingen van hoge kwaliteit levert en ook transparantie ondersteunt.

Voordelen:

• Ondersteunt transparantie.
• Gebruikt verliesvrije compressie, dus er is geen kwaliteitsverlies bij het opslaan.
• Geweldig voor afbeeldingen met tekst of scherpe randen.

Nadelen:

• Grotere bestandsgroottes vergeleken met JPEG voor foto’s.
• Niet zo efficiënt voor complexe foto’s.

Best voor: Logo’s, screenshots, afbeeldingen met tekst, of elke afbeelding die transparantie nodig heeft.

GIF (Graphics Interchange Format)

GIFs namen het internet over met hun herhalende animaties, en je kunt ze zien als geanimeerde stickers of memes.

Voordelen:

• Ondersteunt eenvoudige animaties.
• Kleine bestandsgrootte voor eenvoudige afbeeldingen.
• Breed ondersteund op browsers en apparaten

Nadelen:

• Beperkt tot 256 kleuren.
• Niet geschikt voor foto’s of complexe afbeeldingen.
• Kan resulteren in grote bestandsgroottes voor lange animaties.

Beste voor: Eenvoudige animaties, iconen en zeer eenvoudige grafische afbeeldingen.

WebP

Aangezien de hierboven genoemde afbeeldingsformaten vrij oud zijn en het internet ver boven hun mogelijkheden is uitgegroeid, heeft Google WebP ontwikkeld voor een efficiënter afbeeldingsformaat.

Voordelen:

• Biedt zowel verliesgevende als verliesvrije compressie.
• Ondersteunt animatie en transparantie.
• Aanzienlijk kleinere bestandsgroottes vergeleken met JPEG en PNG (ongeveer 25-35% kleiner).
• Betere kwaliteit-tot-grootte verhouding dan JPEG.

Nadelen:

• Niet ondersteund door oudere browsers (we hebben het over jou, Internet Explorer).

Beste voor: Vrijwel alles, als je publiek moderne browsers gebruikt. Het is vooral belangrijk voor websites die kwaliteit en prestaties moeten balanceren.

SVG (Scalable Vector Graphics)

SVG is een beetje anders dan de rest van de afbeeldingsformaten. In plaats van te bestaan uit pixels, zijn SVG’s gebaseerd op wiskundige formules.

Voordelen:

• Schaalt naar elke grootte zonder kwaliteitsverlies.
• Zeer kleine bestandsgroottes voor eenvoudige grafieken.
• Kan worden gestileerd met CSS en gemanipuleerd met JavaScript.
• Geweldig voor responsief ontwerp.

Nadelen:

• Ongepast voor complexe foto’s.
• Kan traag zijn om te renderen als het erg ingewikkeld is.
• Vereist meer verwerkingskracht dan afbeeldingen.

Best voor: Logo’s, iconen, eenvoudige illustraties en alle graphics die er scherp uit moeten zien op elke grootte.

3 Eenvoudige Manieren Om Afbeeldingen Voor Het Web Te Optimaliseren

Nu je begrijpt wat optimalisatie is, en wat de verschillende bestandstypes zijn, laten we eens kijken hoe we een afbeelding in actie kunnen optimaliseren.

Gelukkig vereist afbeeldingsoptimalisatie geen geavanceerde technische kennis. Er zijn verschillende hulpmiddelen die je kunnen helpen om afbeeldingen gemakkelijk te verkleinen, comprimeren en om te zetten naar verschillende formaten.

Laten we eens goed kijken naar een paar verschillende methoden.

1. Afbeeldingen Formaat Wijzigen en Bijsnijden

Een van de eenvoudigste stappen die je kunt nemen om je afbeeldingen te optimaliseren, is ze te verkleinen of bij te snijden. Je kunt een foto bewerkingstool zoals Adobe Photoshop gebruiken voor gevorderde gebruikers of Canva als je iets eenvoudigs en kant-en-klaar wilt. Beide tools kunnen je helpen bij het bijsnijden en verkleinen van afbeeldingen en ook opslaan in lagere resoluties om de bestandsgroottes te verminderen.

Je kunt ook de standaard fotoviewer op je computer gebruiken voor het aanpassen van het formaat en bijsnijden.

Als je Windows gebruikt, kun je gemakkelijk afbeeldingen bijsnijden en formaat wijzigen in Microsoft Photos. Op Mac heet de app “Preview”.

We laten zien hoe dit werkt op een Windows-computer.

Om te beginnen, open je afbeelding in de “Photos” app door dubbel te klikken op de afbeelding.

Klik dan op het eerste icoon voor Afbeelding bewerken in het bovenste menu:

Klik nu op het Crop-icoon bovenaan de bewerkingsmenubalk en beslis welk deel van de afbeelding je wilt gebruiken.

Je kunt ook afbeeldingen formaat wijzigen met de Windows Photo Editor door op de drie puntjes te klikken en vervolgens Formaat wijzigen te selecteren.

Nu kun je verschillende afbeeldingsgroottes kiezen of je eigen afmetingen voor de afbeelding invoeren.

Als je klikt op Definieer aangepaste afmetingen, kun je de breedte en hoogte van de afbeelding wijzigen en ook de kwaliteit ervan regelen met de schuifregelaar.

Bijvoorbeeld, als je de afbeelding wilt comprimeren zonder de afmetingen te wijzigen, kun je de beeldkwaliteit verlagen om kleinere afbeeldingsbestanden te krijgen.

Aan het einde, klik op Opslaan als verkleinde kopie. We raden je aan een andere naam te kiezen voor de verkleinde afbeelding om te voorkomen dat je het origineel overschrijft.

2. Gebruik een Online Tool Om Afbeeldingen Te Comprimeren en Optimaliseren

Je kunt ook hetzelfde en zelfs meer doen met online beeldoptimalisatietools. Sommige optimalisatietools helpen je ook om afbeeldingen in bulk te verwerken. Dit kan je veel tijd besparen.

Squoosh

Bij DreamHost houden we om een ​​aantal redenen van het gebruik van Squoosh:

• Het is gratis en webgebaseerd: Je hoeft niets te downloaden of te installeren.
• Toont real-time vergelijking: Je kunt direct zien hoe je optimalisaties de beeldkwaliteit beïnvloeden.
• Ondersteunt meerdere bestandsformaten: Je hebt de mogelijkheid om het uitvoerbestandstype te kiezen. 
• Biedt keuze in compressiemethode: Je kunt kiezen tussen de verschillende compressiemethoden/algoritmes en ook zien hoe je keuze de uiteindelijke bestandsgrootte en beeldkwaliteit in real-time beïnvloedt.

Hier is hoe je een afbeelding kunt schalen met Squoosh.

Ga naar https://squoosh.app en voeg een afbeelding van je apparaat toe. Als je het platform alleen maar test, kun je een van de demo-afbeeldingen gebruiken die ze hebben verstrekt in de “Of probeer een van deze” sectie.

Zodra je de afbeelding ziet, zie je aan de rechterkant van de pagina een paneel met verschillende opties voor afbeeldingscompressie. Schakel over naar de Verkleinen knop.

Dit geeft je een paar extra opties om de wijze van schalen te veranderen, een vooraf ingestelde grootte te selecteren, en meer. Voor dit voorbeeld hebben we de voorinstelling geselecteerd als 33,33%. 

Wat dit betekent is dat de afmetingen van de afbeelding worden verkleind tot 33,33% van de oorspronkelijke grootte. Dus, als je oorspronkelijke afbeelding 3000 pixels breed was, zal het selecteren van de voorinstelling van 33,33% je een afbeelding geven die 1000 pixels breed is.

Je zult ook merken dat het aanpassen van de grootte van de afbeelding de bestandsgrootte aanzienlijk vermindert — in ons voorbeeld met 60%.

Zodra je klaar bent, klik op de blauwe Download knop rechtsonder op je scherm, en voilà! Je hebt nu een gecomprimeerde afbeelding.

TinyPNG

TinyPNG is een gebruiksvriendelijke webapplicatie waarmee je tot 20 afbeeldingen tegelijk kunt comprimeren, elk tot 5MB. Het is gratis te gebruiken en ondersteunt WebP, PNG en JPEG afbeeldingen.

Helaas kun je SVG-afbeeldingen hiermee nog niet optimaliseren. Deze tool is alleen het beste voor je als je afbeeldingen al kleiner zijn dan 5 MB.

Om een afbeelding te optimaliseren met TinyPNG, upload je gewoon je afbeeldingsbestanden in het vak bovenaan de pagina en wacht je tot het compressieproces is voltooid.

Daar heb je het! Je kunt dan de resultaten bekijken en je geoptimaliseerde afbeeldingen downloaden. Voor ruwe afbeeldingen hebben we gemerkt dat de afbeeldingsgrootte met 40%-70% vermindert.

Kraken.io

Kraken.io is een andere online afbeeldingsoptimalisator die je kunt gebruiken. Net als TinyPNG kun je hiermee afbeeldingen in bulk comprimeren.

Kraken biedt een verscheidenheid aan opties voor het kiezen van het type compressie, hoe je de bestanden wilt exporteren, en meer.

Bijvoorbeeld, je kunt kiezen uit drie optimalisatiemodi, waaronder “Lossy”, “Lossless” en “Expert”.

Kraken.io geeft je meer controle over hoe jouw afbeeldingen worden gecomprimeerd. Je kunt ervoor kiezen om de beeldkwaliteit boven bestandsgrootte te prioriteren, of andersom.

Om een afbeelding te optimaliseren met Kraken.io, upload je gewoon de afbeeldingen die je wilt comprimeren, selecteer een optimalisatiemethode en kies een downloadoptie.

Bijvoorbeeld, je kunt elk bestand afzonderlijk downloaden, meerdere bestanden samen in een zip-bestand downloaden, ze rechtstreeks uploaden naar Dropbox, of ze direct delen op Facebook en Twitter.

Echter, het grote nadeel van deze tool is dat de gratis versie behoorlijk beperkt is. Ze bieden een testquotum van 100MB en een maximum van 1MB, wat, als je afbeeldingen in bulk comprimeert, mogelijk in één keer opgebruikt wordt. 

3. Installeer een WordPress Plugin

Als je een WordPress-website hebt, hoef je afbeeldingen niet te comprimeren voordat je ze uploadt. Er zijn verschillende Plugins die op de achtergrond werken, WordPress-afbeeldingen optimaliseren terwijl je ze uploadt — en daardoor je site sneller laten laden.

Laten we eens kijken naar enkele van de meest populaire afbeeldingsoptimalisatie-plugins.

Smush

Smush is een populaire WordPress afbeeldingsoptimalisator met meer dan een miljoen actieve installaties en een vijfsterrenbeoordeling. Het helpt je om de laadtijden van je pagina te verbeteren door je afbeeldingen te comprimeren en te herschalen.

Bijvoorbeeld, de functie “Bulk Smush” detecteert afbeeldingen op je site die geoptimaliseerd kunnen worden en stelt je in staat om ze in bulk te comprimeren.

Je kunt ook de maximale afmetingen van afbeeldingen instellen, en Smush zal automatisch afbeeldingen die de limieten overschrijden herschalen terwijl de beeldverhoudingen behouden blijven.

Er zijn veel aanpassingsfuncties in de gratis versie van Smush, inclusief lazy loading en bulk smush frequentie die je helpen je WordPress-website te optimaliseren met minimale extra inspanning.

Als je een upgrade uitvoert naar Smush Pro, krijg je toegang tot meer functies, inclusief de optie om afbeeldingen automatisch te comprimeren en ze in WebP-formaat te leveren. Plannen beginnen vanaf $15 per maand.

ShortPixel Afbeeldingsoptimalisatie

ShortPixel is een lichte afbeeldingscompressie-plugin voor WordPress-websites. Een van de belangrijkste voordelen van ShortPixel is dat het HEIC (Apple-formaat), WebP en AV1-afbeeldingsbestandsformaat (AVIF) ondersteunt.

Naast dat heeft ShortPixel ook slim bijsnijden. Met deze functie worden alle miniaturen van je afbeeldingen niet alleen geoptimaliseerd maar ook bijgesneden om automatisch het onderwerp van de afbeelding weer te geven. Deze functie is speciaal ontworpen voor e-commerce websites.

ShortPixel ondersteunt drie verschillende compressiemethoden: lossy, glossy en lossless.

We hebben het gehad over lossy en lossless. Maar glossy is hier nieuw.

Glossy is een hoogwaardig, ShortPixel-specifiek lossy compressiealgoritme dat is ontworpen voor fotografen. Dus, als je een fotografieportfolio-website hebt, kan ShortPixel perfect zijn voor jouw behoeften aan beeldcompressie.

Je kunt ook je miniaturen comprimeren en een back-up van je originele afbeeldingen maken. Voor meer opties, kun je upgraden naar de premiumversie, die begint bij $9.99 per maand. Je kunt ook credits in bulk kopen en deze gebruiken wanneer nodig.

Jetpack

Hoewel Jetpack geen afbeeldingsoptimalisatieplugin is, bevat de Site Accelerator-functie een optie voor het optimaliseren van afbeeldingen en het hosten ervan op een Content Delivery Network (CDN).

Je kunt deze opties voor beeldoptimalisatie vinden onder de Performance & speed instellingen van de plugin:

Deze functies zijn gratis beschikbaar bij Jetpack Boost. De plugin bevat andere tools die je helpen de prestaties van je website te verbeteren.

Versnel Je Site Met Geoptimaliseerde Afbeeldingen

Slecht geoptimaliseerde afbeeldingen kunnen een negatieve invloed hebben op de prestaties van je site. Gelukkig kun je je site versnellen en SEO-rankings verbeteren door simpelweg je afbeeldingen te verkleinen en te comprimeren.

Om samen te vatten, hier zijn drie eenvoudige manieren om je afbeeldingen te optimaliseren:

1. Formaat wijzigen en afbeeldingen uitsnijden met een programma zoals Adobe Photoshop, Microsoft Photos of Preview op Mac.
2. Gebruik een online compressietool zoals Squoosh.app, TinyPNG, of Kraken.io.
3. Installeer een WordPress optimalisatieplugin zoals Smush Pro, Short Pixel, of Jetpack Boost.

Je kunt ook de prestaties van je site verbeteren door te kiezen voor een krachtig hostingplan. Onze DreamPress beheerde WordPress-hosting biedt snelle en betrouwbare service met 24/7 ondersteuning en een uptime-garantie van 100%!

Bekijk vandaag nog onze plannen.