Welkom to ISI Media | Online communicatie voor dienstverleners   Klik om deze tekst te beluisteren via je speaker Welkom to ISI Media | Online communicatie voor dienstverleners
06-34009124 hallo@isimedia.nl
Geef je stem:
(Gemiddeld: 4.6)

Je websitebezoekers willen maar 1 ding: zo snel mogelijk hun doel bereiken. Letterlijk telt elke seconde. Google beloont een snelle site bovendien met hogere rankings. Maar als website maker wil je je bezoekers trakteren op mooie, grote afbeeldingen. Dan moet je afbeeldingen optimaliseren. Hoe pak je dat aan? 

Zie hier je dilemma: je wilt een snelle website en je wilt veel afbeeldingen. Want 1 beeld zegt meer dan duizend woorden, nietwaar? Dan is het zeer verstandig je afbeeldingen te optimaliseren. Daarmee voorkom je dat je website trager wordt. Duurt het laden van een afbeelding te lang, dan haken je bezoekers af en doen ze niet waarvoor ze op je website zijn.

In jargon: je wordt getrakteerd op een slechtere gebruikerservaring en een lagere conversie.

In dit artikel vertel ik hoe je de laadtijd van je website kunt verbeteren door het optimaliseren van afbeeldingen voor Google. Zonder dat je afbeeldingen aan kwaliteit verliezen. Ik benoem eerst de belangrijkste begrippen, zoals bestandsformaten, comprimeren en resolutie. Daarna volgen meer dan 10 praktische tips om kleine foto’s op je website te gebruiken.

De basis: Wat zijn de belangrijkste bestandsformaten?

Er zijn veel verschillende bestandsformaten om je afbeelding in op te slaan. De meest gebruikte zijn JPG, PNG en GIF. Ieder formaat heeft zijn eigen functie. Foto’s kun je het beste opslaan als een JPG-bestand. Elke andere afbeelding (logo’s, iconen, tekeningen, lijnen, grafieken) sla je op als PNG. Let op: foto’s met transparante achtergronden, moet je ook als PNG opslaan want JPG ondersteunt geen transparantie.

Mocht je Tiff-bestanden hebben, dan kun je deze omzetten naar JPG op de website Tiff to JPG of met deze online converter die meer bestandsformaten naar JPG kan omzetten.

De basis: Wat is resolutie?

Resolutie is het aantal pixels of punten van een beeldscherm of een afbeelding. Hoe meer pixels, hoe meer informatie er in een afbeelding zit opgeslagen. Hoe meer informatie, hoe scherper de afbeelding. Hoe meer pixels, hoe groter de foto in opslag (Kb of Mb).

De juiste resolutie hangt af van de plaats waar je de foto gebruikt – website, de krant, een folder, een tijdschrift of een boek – en van de afmetingen. Bij een foto met een te lage resolutie krijg je blokken en dat wil je niet. Gebruikelijk is om een resolutie van 72 pixels aan te houden voor je website. 300 pixels gebruik je voor print.

Verwar resolutie dus niet met afmetingen. Dat is de lengte x breedte van een afbeelding. Ze werken overigens wel op elkaar in.

Voorbeeld: je maakt met je telefoon een foto van 1900 x 1600. Dan is de foto 1900 pixels breed en 1600 pixels hoog. Deze afmetingen bepalen de grootte van je foto in kilobyte of megabyte (Kb of Mb).

Hebben je afbeeldingen de juiste afmetingen?

Als je foto’s maakt met een telefoon of met een camera hebben ze vaak niet de juiste afmetingen voor je website. Meestal zijn ze te groot. Hoe groter de afbeeldingen zijn, des te meer ruimte ze in beslag nemen. Zorg ervoor dat je afbeelding niet onnodig groot is.

Er zijn meerdere manieren om je afmetingen bij te snijden:

  • Photoshop
  • Picmonkey
  • Picresize
    Hiermee verklein je je afbeelding met behoud van alle verhoudingen. Ook kun je kleine stukjes bijsnijden.

 

Afbeeldingen optimaliseren voor Google die nog niet op je website staan

Alle genoemde bestandsformaten kun je comprimeren. Compressie van bestanden betekent dat je de gegevens kunt verkleinen. Hoe hoger de compressie, des te kleiner het bestand. Maar ook: des te kleiner de beeldkwaliteit. Bij foto’s valt het kwaliteitsverlies van JPG online niet veel op, maar wel bij grafische afbeeldingen, zoals letters, logos, lijnen en grafieken.

Online gebruik je:

  • TinyPNG
    Hiermee comprimeer je PNG en JPG bestanden online
  • JPEG Mini
    Doet hetzelfde als TinyPNG, en is beschikbaar online of als desktop applicatie
  • JPEG Optimizer
    Werkt ook online. Kies voor Compressie level 99 en optimaliseer. Vergeet niet het resizen uit te zetten.
  • Kraken (TIP!)
    Hier kun je online een onbeperkt aantal foto’s comprimeren (met of zonder kwaliteitsverlies) en ze vervolgens los of in één keer bewaren. Met de pro-versie kun je grotere foto’s uploaden tot 16MB, foto’s resizen qua afmetingen en ze meteen te laten synchroniseren met je Dropbox. De pro-versie kost tussen de 50 en 800 dollar per jaar, afhankelijk van de mogelijkheden.

Offline gebruik je:

  • Photoshop
    De facto standaard fotobewerkingsprogramma voor professionals. Met Photoshop kun je via de ‘opslaan-voor-het-web’ functie direct foto’s aanpassen. Je kunt de gewenste kwaliteit en het formaat aanpassen naar je wens.
  • GIMP
    GIMP staat voor GNU Image Manipulation Program. Het is gratis software voor je desktop en een goed alternatief als je geen Photoshop hebt, of er niet voor wilt betalen.
    Heb je GIMP geinstalleerd, open dan een afbeelding die je wilt bewerken. Kies daarna voor Afbeelding > Afbeelding schalen. Vul de gewenste breedte en hoogte in en selecteer pixels.

Afbeeldingen optimaliseren voor Google die al op je website staan

Bij voorkeur comprimeer je je afbeeldingen voordat je ze op je website gebruikt. Als je ze al online hebt staan, kun je nog steeds foto’s en andere afbeeldingen optimaliseren voor Google en je sitebezoekers. Je kunt bijvoorbeeld in de mediabibliotheek van WordPress afbeeldingen verkleinen. Dat kan als je een foto uploadt naar WordPress, of nadien. WordPress plugin om afbeeldingen te verkleinen

Ben je dat vergeten, of wil je nog meer compressie, gebruik dan specifieke WordPress plugins.

  • Met de plugin WP Smush.it worden alle afbeeldingen, indien dit nog mogelijk is, nog kleiner gemaakt. Het is dus een bulkverwerker.
  • Met de plugin BJ Lazy Load kun je afbeeldingen pas tonen als ze zichtbaar zijn voor bezoekers. Zeker als afbeeldingen onder de vouw staan, is dat handig. Je webpagina laadt sneller omdat een afbeelding pas wordt getoond als je bezoeker naar beneden scrollt. Extra voordeel: BJ Lazy Load schaalt de afbeeldingen automatisch voor responsieve websites.(let overigens op dat je niet te veel plugins gebruikt, want dat kan ook ten koste gaan van de snelheid van je website – een heel ander probleem).

Snelheid testen

Als je je afbeeldingen hebt geoptimaliseerd, kun je de snelheid van je website testen. Idealiter doe je dit vooraf het optimaliseren en nadien. Dan zie je of je werk effect heeft.
Dit zijn de drie beste gratis tools die je gebruikt om de snelheid van je website te testen:

Niet tevreden over het resultaat? Kijk dan wat je nog meer kunt doen. Plaats bijvoorbeeld minder afbeeldingen op je pagina. Hoe minder http-verzoeken, hoe sneller je webpagina laadt. Dit kun je doen door:

  • Eenvoudigweg overbodige afbeeldingen te verwijderen (vervang ze door witruimte om je tekst toch nog lekker leesbaar te houden)
  • Wijzig iconen van afbeelding naar lettertype.
  • Voeg afbeeldingen samen. Maak bijvoorbeeld een infographic van een reeks afbeeldingen op dezelfde pagina. Bundel je social mediabuttons.

 

Advies nodig?

Foto’s en andere afbeeldingen zijn vaak dé vertrager van je website. Dat kan je websitebezoekers kosten en een hoge Google-positie. Daarom is het verstandig afbeeldingen te optimaliseren voor Google en je potentiële klanten.

Vraag je je af of je website snel genoeg laadt, en of je voldoende doet aan je vindbaarheid via Google? Wil je je website optimaliseren door een expert? Neem dan vrijblijvend contact met ons op voor meer informatie.

Klik om de tekst te horen via je speaker