Afbeeldingen optimaliseren voor webprestaties zonder kwaliteitsverlies

Wist je dat het optimaliseren van je afbeeldingen voor het uploaden naar WordPress een enorme impact kan hebben op de snelheid van je website?


Bij het starten van een nieuwe blog uploaden veel beginners eenvoudig afbeeldingen zonder ze voor internet te optimaliseren. Deze grote afbeeldingsbestanden maken uw website trager.

Je kunt dit oplossen door best practices voor beeldoptimalisatie te gebruiken als onderdeel van je normale blogroutine.

In dit artikel laten we u zien hoe u uw afbeeldingen kunt optimaliseren voor snellere webprestaties zonder kwaliteitsverlies. We zullen ook plug-ins voor automatische beeldoptimalisatie voor WordPress delen die uw leven gemakkelijk kunnen maken.

Hoe u uw afbeeldingen in WordPress kunt optimaliseren (stap voor stap)

Aangezien dit een uitgebreide gids is voor beeldoptimalisatie voor internet, hebben we een eenvoudig te volgen inhoudsopgave gemaakt:

    Wat is beeldoptimalisatie? (Geoptimaliseerde versus niet-geoptimaliseerde afbeeldingen)

    Beeldoptimalisatie is een proces waarbij afbeeldingen worden opgeslagen en afgeleverd in de kleinst mogelijke bestandsgrootte zonder de algehele beeldkwaliteit te verminderen.

    Hoewel het proces ingewikkeld klinkt, is het tegenwoordig vrij eenvoudig. U kunt een van de vele plug-ins en tools voor beeldoptimalisatie gebruiken om afbeeldingen automatisch tot 80% te comprimeren zonder enig zichtbaar verlies in beeldkwaliteit.

    Hier is een voorbeeld van geoptimaliseerde versus niet-geoptimaliseerde afbeelding:

    Geoptimaliseerde versus niet-geoptimaliseerde afbeeldingen in WordPress

    Zoals u kunt zien, kan dezelfde afbeelding, mits correct geoptimaliseerd, 75% kleiner zijn dan het origineel zonder enig kwaliteitsverlies.

    Hoe werkt beeldoptimalisatie?

    Simpel gezegd werkt beeldoptimalisatie door compressietechnologie zoals “Lossy” en “Lossless” te gebruiken, die de algehele bestandsgrootte helpt verminderen zonder merkbaar kwaliteitsverlies.

    Wat betekent het om afbeeldingen te optimaliseren??

    Als u ooit een aanbeveling hebt ontvangen om afbeeldingen te optimaliseren door uw WordPress-hostingondersteuning of door een snelheidstesttool, betekent dit alleen dat u de bestandsgrootte van uw afbeeldingen moet verkleinen door ze voor web te optimaliseren.

    Waarom is beeldoptimalisatie belangrijk? Wat zijn de voordelen van beeldoptimalisatie?

    Hoewel het optimaliseren van uw afbeeldingen veel voordelen biedt, vindt u hieronder de belangrijkste die u moet kennen:

    • Snellere websitesnelheid
    • Verbeterde SEO-ranglijst
    • Hogere algehele conversieratio voor verkopen en leads
    • Minder opslag en bandbreedte (wat de hosting- en CDN-kosten kan verlagen)
    • Snellere back-ups van websites (verlaagt ook de kosten van back-upopslag)

    Buiten video zijn afbeeldingen het volgende zwaarste item op een webpagina. Volgens HTTP-archief, afbeeldingen vormen gemiddeld 21% van het totale gewicht van een webpagina.

    Omdat we weten dat snelle websites hoger scoren in zoekmachines (SEO) en betere conversies hebben, is beeldoptimalisatie iets dat elke zakelijke website moet doen als ze online willen slagen.

    Nu vraagt ​​u zich misschien af ​​hoe groot het verschil kan zijn met beeldoptimalisatie?

    Volgens een Strangeloop-studie kan een vertraging van één seconde in de laadtijd van een website u 7% van de omzet, 11% minder paginaweergaven en 16% afname van klanttevredenheid kosten..

    Hoe snelheid uw website beïnvloedt

    Als dit niet genoeg redenen zijn om uw website te versnellen, moet u weten dat zoekmachines zoals Google ook een voorkeursbehandeling geven aan SEO voor het sneller laden van websites.

    Dit betekent dat door uw afbeeldingen voor internet te optimaliseren, u zowel de snelheid van de website kunt verbeteren als de SEO-ranglijst van WordPress kunt verbeteren.

    Video-instructies

    Abonneer u op WPBeginner

    Als je liever schriftelijke instructies verkiest, blijf gewoon lezen.

    Afbeeldingen opslaan en optimaliseren voor webprestaties?

    De sleutel tot succesvolle beeldoptimalisatie voor webprestaties is het vinden van de perfecte balans tussen de laagste bestandsgrootte en een acceptabele beeldkwaliteit.

    De drie dingen die een grote rol spelen bij beeldoptimalisatie zijn:

    • Afbeeldingsbestandsindeling (JPEG versus PNG versus GIF)
    • Compressie (hogere compressie = kleinere bestandsgrootte)
    • Beeldafmetingen (hoogte en breedte)

    Door de juiste combinatie van de drie te kiezen, kunt u uw beeldformaat tot 80% verkleinen.

    Laten we elk van deze in meer detail bekijken.

    1. Afbeeldingsbestandsindeling

    Voor de meeste website-eigenaren zijn de enige drie afbeeldingsbestandsindelingen die er echt toe doen JPEG, PNG en GIF. Het kiezen van het juiste bestandstype speelt een belangrijke rol bij het optimaliseren van afbeeldingen.

    Om het simpel te houden, wil je JPEG’s gebruiken voor foto’s of afbeeldingen met veel kleuren, PNG’s voor eenvoudige afbeeldingen of wanneer je transparante afbeeldingen nodig hebt, en GIF voor alleen geanimeerde afbeeldingen.

    Voor degenen die het verschil tussen elk bestandstype niet kennen, is het PNG-afbeeldingsformaat niet gecomprimeerd, wat betekent dat het een afbeelding van hogere kwaliteit is. Het nadeel is dat de bestandsgroottes veel groter zijn.

    Aan de andere kant is JPEG een gecomprimeerd bestandsformaat dat de beeldkwaliteit enigszins vermindert om een ​​aanzienlijk kleinere bestandsgrootte te bieden.

    Terwijl GIF slechts 256 kleuren gebruikt, samen met compressie zonder verlies, waardoor het de beste keuze is voor geanimeerde afbeeldingen.

    Op WPBeginner gebruiken we alle drie de afbeeldingsindelingen op basis van het type afbeelding.

    2. Compressie

    Het volgende is beeldcompressie die een grote rol speelt bij beeldoptimalisatie.

    Er zijn verschillende soorten en niveaus van beeldcompressie beschikbaar. De instellingen voor elk zijn afhankelijk van het hulpmiddel voor beeldcompressie dat u gebruikt.

    De meeste beeldbewerkingstools zoals Adobe Photoshop, On1 Photo, GIMP, Affinity Photo en andere worden geleverd met ingebouwde beeldcompressiefuncties.

    U kunt afbeeldingen ook normaal opslaan en vervolgens een webtool zoals TinyPNG of JPEG Mini gebruiken voor eenvoudiger beeldcompressie.

    Hoewel het een beetje handmatig is, kunt u met deze twee methoden afbeeldingen comprimeren voordat u ze uploadt naar WordPress, en dit is wat we doen op WPBeginner.

    Er zijn ook verschillende populaire WordPress-plug-ins zoals Optimole, EWWW Image Optimizer en andere die afbeeldingen automatisch kunnen comprimeren wanneer u ze voor het eerst uploadt. Veel beginners en zelfs grote bedrijven gebruiken deze plug-ins voor beeldoptimalisatie liever omdat het gemakkelijk en handig is.

    We zullen later in het artikel meer over deze WordPress-plug-ins delen.

    3. Beeldafmetingen

    Wanneer u een foto van uw telefoon of een digitale camera importeert, heeft deze normaal gesproken een zeer hoge resolutie en grote bestandsafmetingen (hoogte en breedte).

    Deze foto’s hebben doorgaans een resolutie van 300 DPI en afmetingen vanaf 2000 pixels en meer. Deze foto’s van hoge kwaliteit zijn zeer geschikt voor afdrukken of desktop publishing. Ze zijn niet geschikt voor websites.

    Het verkleinen van bestandsafmetingen tot iets redelijkers kan de bestandsgrootte van afbeeldingen aanzienlijk verkleinen. U kunt afbeeldingen eenvoudig verkleinen met behulp van beeldbewerkingssoftware op uw computer.

    We hebben bijvoorbeeld een foto geoptimaliseerd met een oorspronkelijke bestandsgrootte van 1,8 MB, een resolutie van 300 DPI en afbeeldingsafmetingen van 4900 × 3200 pixels.

    We kozen voor het jpeg-formaat voor hogere compressie en veranderden de afmetingen in 1200 × 795 pixels, en het verkleinde de afbeeldingsbestandsgrootte tot 103 KB. Dat is 94% minder dan de oorspronkelijke bestandsgrootte.

    Nu u de drie belangrijke factoren voor beeldoptimalisatie kent, gaan we eens kijken naar verschillende hulpmiddelen voor beeldoptimalisatie voor website-eigenaren.

    Beste tools en programma’s voor beeldoptimalisatie

    Zoals we eerder vermeldden, worden de meeste beeldbewerkingssoftware geleverd met instellingen voor beeldoptimalisatie en compressie.

    Buiten de beeldbewerkingssoftware zijn er ook verschillende krachtige gratis beeldoptimalisatietools die u kunt gebruiken om afbeeldingen voor internet te optimaliseren (met slechts een paar klikken).

    We raden aan deze tools te gebruiken om afbeeldingen te optimaliseren voordat je ze uploadt naar WordPress, vooral als je een perfectionist bent.

    Deze methode helpt u schijfruimte te besparen op uw WordPress-hostingaccount en garandeert de snelste afbeelding met de beste kwaliteit omdat u elke afbeelding handmatig controleert.

    Adobe Photoshop

    Adobe Photoshop is premium software die wordt geleverd met een functie om afbeeldingen op te slaan die zijn geoptimaliseerd voor internet. Open eenvoudig uw afbeelding en klik op de optie “Bestand» Opslaan voor web “.

    Dit opent een nieuw dialoogvenster. Aan de rechterkant kunt u verschillende afbeeldingsindelingen instellen. Voor JPEG-formaat ziet u verschillende kwaliteitsopties. Wanneer u uw opties selecteert, wordt ook linksonder de bestandsgrootte weergegeven.

    Afbeeldingen opslaan die voor het web zijn geoptimaliseerd met Photoshop

    GIMP

    GIMP is een gratis en open source alternatief voor populaire Adobe Photoshop. Het kan worden gebruikt om uw afbeeldingen voor het web te optimaliseren. Het nadeel is dat het niet zo eenvoudig te gebruiken is als sommige andere oplossingen op deze lijst.

    Eerst moet je je afbeelding openen in GIMP en vervolgens selecteren Bestand »Exporteren als keuze. Dit zal het dialoogvenster voor het opslaan van bestanden openen. Geef uw bestand een nieuwe naam en klik vervolgens op de exportknop.

    Exporteer afbeelding in GIMP

    Hierdoor worden opties voor het exporteren van afbeeldingen weergegeven. Voor jpeg-bestanden kunt u het compressieniveau selecteren om de bestandsgrootte te verkleinen. Klik ten slotte op de exportknop om het geoptimaliseerde afbeeldingsbestand op te slaan.

    TinyPNG

    TinyPNG is een gratis web-app die een slimme compressietechniek met verlies gebruikt om de grootte van uw PNG-bestanden te verkleinen. Het enige dat u hoeft te doen, is naar hun website gaan en uw afbeeldingen uploaden (eenvoudig slepen & laten vallen).

    TinyPNG gebruiken om afbeeldingen voor WordPress te optimaliseren

    Ze zullen de afbeelding comprimeren en u de downloadlink geven. Je kunt hun zus-website, TinyJPG, gebruiken voor JPEG-beeldcompressie.

    Ze hebben ook een extensie voor Adobe Photoshop, wat we gebruiken als onderdeel van ons beeldbewerkingsproces, omdat het het beste van TinyPNG en TinyJPG in Photoshop combineert.

    Voor ontwikkelaars hebben ze een API om afbeeldingen automatisch te converteren en voor beginners hebben ze een WordPress-plug-in die het automatisch voor je kan doen (hierover later meer).

    JPEG Mini

    JPEGmini maakt gebruik van een verliesvrije compressietechnologie die de grootte van afbeeldingen aanzienlijk verkleint zonder hun perceptuele kwaliteit te beïnvloeden. U kunt ook de kwaliteit van uw originele afbeelding en de gecomprimeerde afbeelding vergelijken.

    JPEGMini online beeldcompressietool

    U kunt hun webversie gratis gebruiken of het programma voor uw computer kopen. Ze hebben ook een betaalde API om het proces voor uw server te automatiseren.

    ImageOptim

    ImageOptim is een Mac-hulpprogramma waarmee u afbeeldingen kunt comprimeren zonder kwaliteit te verliezen door de beste compressieparameters te vinden en onnodige kleurprofielen te verwijderen.

    ImageOptim

    Windows alternatief hiervoor is Trimage.

    Beste plug-ins voor beeldoptimalisatie voor WordPress

    Wij zijn van mening dat de beste manier om uw afbeeldingen te optimaliseren is door dit te doen voordat u ze uploadt naar WordPress. Als u echter een site met meerdere auteurs heeft of een geautomatiseerde oplossing nodig heeft, kunt u een WordPress plug-in voor beeldcompressie proberen.

    Hieronder vindt u onze lijst met de beste plug-ins voor WordPress-beeldcompressie:

    1. Optimole – populaire plug-in door het team achter ThemeIsle.
    2. EWWW Image Optimizer
    3. Comprimeer JPEG & PNG-afbeeldingen – plug-in door het TinyPNG-team dat hierboven in het artikel wordt genoemd.
    4. Imagify – plugin door het populaire WP Rocket plugin team.
    5. ShortPixel Image Optimizer
    6. WP Smush
    7. reSmush.it

    Het gebruik van een van deze WordPress plug-in voor beeldoptimalisatie zal u helpen uw website te versnellen.

    Laatste gedachten en praktische tips voor beeldoptimalisatie

    Als u geen afbeeldingen opslaat die zijn geoptimaliseerd voor internet, moet u dat nu doen. Het zal een enorm verschil maken voor de snelheid van uw site en uw gebruikers zullen u er dankbaar voor zijn.

    Om nog maar te zwijgen, snellere websites zijn geweldig voor SEO en u zult waarschijnlijk een stijging in uw zoekmachine-ranking zien.

    Buiten beeldoptimalisatie zijn de twee dingen die u aanzienlijk zullen helpen uw website te versnellen het gebruik van een WordPress caching-plug-in en het gebruik van een WordPress CDN.

    Als alternatief kunt u een beheerd WordPress-hostingbedrijf gebruiken omdat ze vaak zowel caching als CDN aanbieden als onderdeel van het platform.

    We hopen dat dit artikel u heeft geholpen om te leren hoe u uw afbeeldingen in WordPress kunt optimaliseren. Misschien wilt u ook onze gids zien over hoe u uw WordPress-beveiliging en de beste WordPress-plug-ins voor zakelijke websites kunt verbeteren.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map