Hou je niet van beelden?

Ze kunnen een stuk tekst veranderen in een boeiende leeservaring. Afbeeldingen verbeteren een blogbericht, maken het deelbaarder en zetten de toon en het merk van uw hele site.

En weet je wat? Wij zijn geprogrammeerd om op beelden te reageren. Daarom is het opnemen van beeldmateriaal in je inhoud een krachtig middel om te gebruiken bij de marketing van je blog.

Maar als u niet oppast, kunnen afbeeldingen meer dan de helft (of meer) van de totale omvang van uw webpagina uitmaken. Nog maar een paar jaar geleden was de gemiddelde omvang van een webpagina 600-700K. Nu is het gemiddelde 2MB en dat neemt elk jaar toe.

Dat is enorm!

De belangrijkste reden hiervoor is dat op webpagina's steeds vaker meerdere afbeeldingen worden gebruikt, en dat deze afbeeldingen niet de juiste afmetingen hebben en niet zijn geoptimaliseerd. Dit betekent dat ze niet op een webvriendelijke manier worden opgeslagen of samengesteld, en in plaats daarvan uw pagina's opblazen.

De meesten van ons laten het optimaliseren van afbeeldingen echter bijzaak en doen liever de leuke dingen, zoals het maken van een episch bericht of netwerken met andere bloggers in je niche.

Maar een opgeblazen pagina betekent dat de laadsnelheid van uw pagina wordt beïnvloed. U denkt misschien dat dit geen probleem is als u een snelle verbinding hebt, maar veel van uw bezoekers hebben dat niet. Bovendien houdt Google niet van traag ladende pagina's, en het kan uw SEO negatief beïnvloeden.

Waarom u afbeeldingen moet optimaliseren

U werkt hard aan het creëren van uitstekende inhoud en u besteedt ontelbare uren aan het promoten van uw blog en het netwerken met andere bloggers, dus het laatste wat u wilt is dat potentiële bezoekers uw website verlaten nog voor hij geladen is!

Uit studies blijkt dat tot 40% van de bezoekers op de terugknop klikt als het laden van een site langer dan drie seconden duurt.

Ik weet het, drie seconden is echt niet zo lang, maar als je een mobiele verbinding hebt en je wacht tot een site geladen is, kan een seconde een eeuwigheid lijken.

En omdat veel van uw bezoekers op tragere mobiele verbindingen zitten, wordt het duidelijk: u moet uw pagina's kleiner maken. En we weten al wat de grootste veroorzaker van een te grote pagina is - dat zijn uw afbeeldingen.

Onnodig grote afbeeldingen nemen ook ruimte in beslag op uw hostingaccount. Terwijl sommigen van u misschien hosting hebben met "onbeperkte" opslagruimte, beperken veel premium hostingproviders u tot ongeveer 10 GB opslagruimte op lagere plannen. Dit kan snel vol raken, vooral als u meerdere sites met veel afbeeldingen host op dezelfde account.

Hoe weet u nu of uw afbeeldingen uw site vertragen? Test de snelheid van uw site met Google PageSpeed Insights.

Als Google niet-geoptimaliseerde afbeeldingen als een probleem meldt, is dit wat u moet weten om het op te lossen.

Grondbeginselen voor beeldoptimalisatie

Als het gaat om het optimaliseren van afbeeldingen op uw blog, zijn er een paar verschillende dingen waar u op moet letten: bestandstype, afbeeldingsgrootte en -afmetingen, hoe u uw afbeeldingen serveert, en beeldcompressie.

Laten we elk van deze gebieden nader bekijken.

Soort bestand

Afbeeldingen op het web worden meestal opgeslagen in het PNG- of JPEG-bestandsformaat - of GIF voor animaties. Wie houdt er niet van die hilarische geanimeerde GIF's die op het web rondzwerven!

Nu is het technisch okay Als u uw afbeeldingen in beide formaten opslaat, zal de browser van uw bezoeker geen problemen hebben om uw webpagina weer te geven, maar voor de beste kwaliteit en optimalisatie houdt u zich aan de volgende regels:

• JPEG - te gebruiken voor foto's en ontwerpen waarin mensen, plaatsen of dingen voorkomen
• PNG - het beste voor afbeeldingen, logo's, ontwerpen met veel tekst, schermafbeeldingen en wanneer u afbeeldingen met een transparante achtergrond nodig hebt.
• GIF - als je animatie nodig hebt, anders gebruik je PNG

Waarom zijn er dan verschillende formaten?

PNG wordt traditioneel gebruikt voor het opslaan van logo's en afbeeldingen, omdat het de originele beeldkwaliteit behoudt - niemand wil wazige tekst en korrelige vormen. Maar als je een foto probeert op te slaan als PNG, ziet die er geweldig uit, maar de resulterende bestandsgrootte is minder dan geweldig.

JPEG wordt traditioneel gebruikt voor het opslaan van foto's. Een deel van de beeldgegevens wordt weggegooid om een drastisch kleinere bestandsgrootte te creëren, maar aangezien foto's een grote verscheidenheid aan kleuren en natuurlijke variaties bevatten, is het kwaliteitsverlies meestal onmerkbaar voor het menselijk oog.

We zullen later dieper ingaan op compressie, maar voor nu, als je maar twee dingen onthoudt: JPEG voor foto's en PNG voor tekst/grafiek.

Afmetingen afbeelding

Heb je ooit een webpagina geladen en gemerkt dat het downloaden van een kleine foto (misschien een kopfoto, bijvoorbeeld) f-o-r-e-v-e-r duurt? Zo langzaam dat je elke regel ziet binnenkomen? Je denkt bij jezelf, hoe kan zo'n kleine afbeelding zo lang duren om te downloaden?

En als het gebeurt met een grote header-afbeelding, is het nog erger omdat het het laden van de hele pagina kan vertragen.

De reden hiervoor is dat de blogger zijn of haar foto niet goed heeft aangepast en geoptimaliseerd, en in het geval van ons voorbeeld van een kopfoto misschien een JPEG met volledige resolutie heeft geüpload, rechtstreeks vanaf zijn of haar DSLR-camera.

En dat is een enorm bestand!

Een webbrowser schaalt een afbeelding namelijk (meestal) van zijn oorspronkelijke afmetingen af, zodat hij mooi op zijn plaats op een webpagina past. Wat een kleine afbeelding op het scherm lijkt, kan in werkelijkheid een enorme foto van 10 megapixels zijn, die in real time door de browser wordt verkleind.

Sommige platforms voor webpublicaties maken automatisch meerdere variaties van uw afbeelding met volledige resolutie in verschillende groottes, maar als dat niet het geval is, moet u uw afbeeldingen vooraf verkleinen in een beeldbewerkingsprogramma zoals Photoshop, Lightroom, Pixlr - of zelfs MS Paint. Het kan het verschil betekenen tussen een bestand van 50K en 5MB.

WordPress maakt bijvoorbeeld automatisch drie (of meer, afhankelijk van uw thema) kopieën van uw geüploade afbeelding - allemaal met verschillende afmetingen - die u kunt gebruiken in blogberichten, in plaats van altijd de afbeelding op ware grootte te gebruiken.

Als je de gewoonte hebt om enorme stockfoto's te uploaden, en ruimte wilt besparen op je hosting account, heeft de WordPress plugin Imsanity je steun.

De oorspronkelijke afbeelding wordt verkleind en vervangen door iets hanteerbaarders, dus zelfs als u de afbeelding op ware grootte in uw bericht invoegt, is dat niet zo erg.

Eenmaal geactiveerd kan Imsanity ook uw bestaande afbeeldingen doorzoeken en de grootte ervan aanpassen.

Uw beelden bedienen

Hoe u uw afbeeldingen aan uw bezoekers aanbiedt, is niet per se een kwestie van optimaliseren, maar het kan een dramatische invloed hebben op de laadtijd van uw pagina.

De meeste bloggers serveren hun afbeeldingen rechtstreeks vanaf hun hostingaccount en dat is meestal prima, maar als u echt elk beetje prestatie uit uw site wilt persen, dan kan het hosten van uw afbeeldingen op een Content Delivery Network (CDN) een groot verschil maken.

Een CDN bestaat uit strategisch geplaatste webservers in datacentra over de hele wereld. Deze servers hosten dubbele kopieën van uw afbeeldingen en wanneer de browser van een bezoeker een afbeelding van uw website opvraagt, leidt het CDN de browser automatisch naar een server die geografisch het dichtst bij hem in de buurt is.

Dit betekent dat bezoekers uit Europa, bijvoorbeeld, beelden ontvangen van een lokale Europese server, in plaats van een server uit de States of elders. Aangezien de reactietijd en netwerklatentie worden verminderd, worden de beelden veel sneller gedownload, waardoor de pagina's sneller worden geladen.

Blogging Wizard gebruikt Sucuri (het bevat een firewall voor beveiliging en een CDN), maar er zijn andere kwaliteitsproviders zoals Amazon's Cloudfront of KeyCDN. Zelfs het populaire CloudFlare, dat strikt genomen geen CDN is, biedt een gratis CDN en is gemakkelijk in te stellen in de meeste gedeelde hostingpakketten.

Beeldcompressie

Als het gaat om het optimaliseren van uw afbeeldingen, vermindert niets de bestandsgrootte meer dan geavanceerde lossy beeldcompressie.

De meeste beeldbewerkingsprogramma's zoals Visme of Photoshop slaan bestanden op met lossy JPEG-compressie, omdat dit de beste reductie van de bestandsgrootte oplevert. Dus, terwijl de beeldkwaliteit iets afneemt, brengt het gebruik van lossy beeldcompressie enorme afbeeldingen terug tot webvriendelijke afmetingen.

Ik weet zeker dat velen die Photoshop gebruiken de Opslaan voor web En zelfs online beeldbewerkingsprogramma's zoals PicMonkey of Visme optimaliseren uw afbeeldingen.

Maar wist u dat er programma's zijn die uw "geoptimaliseerde" afbeelding uit Photoshop of andere bewerkingsprogramma's kunnen nemen, deze kunnen verfijnen en comprimeren met nog eens 40% (of meer), en nog steeds dat het bijna identiek lijkt aan het menselijk oog?

Hier zijn enkele gratis en betaalde tools om je te helpen je afbeeldingen te verkleinen tot een webvriendelijke status.

Desktop tools

ImageAlpha / ImageOptim

Voor de Mac-gebruiker is ImageOptim een gratis desktop-tool dat ik elke dag gebruik om PNG-afbeeldingen - meestal schermafbeeldingen - te optimaliseren voordat ik ze upload. Deze tools zijn gemakkelijk te gebruiken, je sleept gewoon je bestanden naar beneden, maar je moet één afbeelding per keer doen.

Pro tip Voor de techneuten is er ImageOptim-CLI, waarmee je een hele map met afbeeldingen tegelijk kunt optimaliseren.

ImageAlpha is een lossy PNG-compressor en kan wonderen doen bij het verkleinen van PNG-bestanden, terwijl ImageOptim geavanceerde lossless (met de optie van lossy) compressie uitvoert - en het stript onnodige metadata van PNG-, JPEG- en GIF-bestanden.

Voor mijn PNG-afbeeldingen haal ik ze eerst door ImageAlpha:

Hier verkleinde het mijn schermafbeelding van 103K naar 28K.

Daarna heb ik het door ImageOptim gehaald en 10% extra bespaard.

JPEGmini

Mijn JPEG-bestanden optimaliseer ik met het desktop-programma JPEGmini, beschikbaar voor zowel Mac als Windows.

Met de Lite-versie kunt u gratis tot 20 afbeeldingen per dag optimaliseren, en het kost $19,99 om de limiet op te heffen.

Pro tip Geavanceerde gebruikers die JPEGmini in Photoshop of Lightroom willen integreren door middel van een plugin, kunnen de Pro-versie kopen voor 99,99 dollar.

Online / Cloud / SaaS tools

TinyPNG

Als u op zoek bent naar een online beeldcompressietool van hoge kwaliteit, dan is TinyPNG (ondanks de naam optimaliseert het ook JPEG-bestanden) een webapp waarmee u tot 20 afbeeldingen van 5 MB of kleiner naar uw browser kunt slepen, en ze allemaal tegelijk kunt laten optimaliseren.

Ze hebben ook een API voor ontwikkelaars en stellen een WordPress-plugin beschikbaar die uw afbeeldingen automatisch kan optimaliseren bij het uploaden.

TinyPNG geeft u 500 gratis beeldoptimalisaties per maand, en rekent daarna $0,002-0,009 per beeld, afhankelijk van het volume.

Nu klinken 500 afbeeldingen per maand misschien als veel, maar als je bedenkt dat WordPress vaak drie tot vijf variaties van elke afbeelding in verschillende formaten maakt, lijken 500 afbeeldingen niet zo dat vele voor de productieve blogger. Gelukkig zijn de kosten per afbeelding budgetvriendelijk.

EWWW Image Optimizer

Als u niet bereid bent om geld uit te geven, en u wilt niet lastig gevallen worden met het handmatig optimaliseren van uw afbeeldingen, dan kan de gratis EWWW Image Optimizer plugin voor WordPress uw geüploade afbeeldingen automatisch optimaliseren.

U kunt kiezen voor een premium abonnement dat lossy compressie uitvoert, maar de gratis versie voert alleen lossless compressie uit, zodat de besparingen lang niet zo groot zijn. Het bespaart u echter tijd en is beter dan niets.

Let op: Bekijk voor een volledig overzicht ons bericht over hulpmiddelen voor beeldcompressie.

Inpakken

Nu sommigen voorspellen dat de gemiddelde grootte van webpagina's in 2017 bijna 3 MB zal bedragen, is het tijd om uw afbeeldingen te optimaliseren.

Vergeet niet dat niet al uw bezoekers een snelle verbinding hebben en dat een opgeblazen pagina en trage laadtijden uw ranking bij Google kunnen beïnvloeden. Om u te helpen de last te verlichten, kunt u vandaag nog uw afbeeldingen optimaliseren.

Let op de afmetingen van uw afbeeldingen en pas te grote stockfoto's of afbeeldingen van een digitale camera aan tot een geschikt formaat.

Maak vervolgens gebruik van moderne beeldcompressie met desktop apps zoals JPEGmini, of cloud tools zoals TinyPNG of Kraken - en integreer ze zo mogelijk in WordPress met een plugin.

Ten slotte, als uw publicatieplatform automatisch aangepaste variaties van uw originele afbeelding maakt, kies dan een van deze variaties voor uw blogbericht, in plaats van de originele afbeelding op ware grootte.

Verwante lectuur: 7 manieren om de grootte van PDF-bestanden te beperken.