Een plaatje zegt meer dan duizend woorden: hoe optimaliseer je afbeeldingen voor je website?

brand
Een plaatje zegt meer dan duizend woorden: hoe optimaliseer je afbeeldingen voor je website?

Een plaatje zegt meer dan duizend woorden: hoe optimaliseer je afbeeldingen voor je website?

Gastblog door Jarne Niens van Viraal Marketing

Een plaatje zegt meer dan duizend woorden. Dit spreekwoord geeft aan waarom afbeelding optimalisatie belangrijk is voor websites. Wanneer je een dienst of product aanbiedt is het belangrijk dat een klant dit kan visualiseren. Uiteraard is het belangrijk dat je afbeeldingen van uitstekende kwaliteit zijn. Hier zitten echter wel gevaren aan. Grote afbeeldingen met een hoge resolutie zijn namelijk enorme bestanden. Wanneer je een aantal afbeeldingen op je website plaatst, verandert een fijne online ervaring al snel in een irritatieproces voor je (potentiële) klanten. Hierdoor verlies je niet alleen klanten, want Google ziet dit ook. Dit zal dan ook een negatief effect hebben op je SEO.

De volgende punten zijn met name belangrijk voor afbeelding optimalisatie op je website:

  • Bestandstypes van afbeeldingen
  • Opslaan van afbeeldingen

Bestandstypen van afbeeldingen

De drie belangrijkste bestandstypen van afbeeldingen voor je website zijn JPG, PNG en GIF. Elk bestandstype heeft zijn eigen sterktes en zwaktes.

JPG (of JPEG) afbeeldingen zijn goed voor foto’s of complexe afbeeldingen welke veel kleuren, schaduwen en complexe patronen bevatten. Door het grote beschikbare kleurenpalet van JPG is dit bij uitstek geschikt voor deze afbeeldingen. JPG’s kunnen opgeslagen worden in hoge kwaliteit, lage kwaliteit en alles daar tussenin. Hierdoor kun je een balans creëren tussen bestandsgrootte en kwaliteit van de afbeeldingen.

PNG is ook een belangrijk bestandstype voor afbeeldingen. In Adobe Photoshop heb je de mogelijkheid om PNG afbeeldingen op te slaan als PNG-8 of PNG-24. PNG-8 afbeeldingen hebben een gelimiteerd kleurenpalet van 256 kleuren. Hoewel de bestandsgrootte van de afbeeldingen hierdoor kleiner zal zijn, adviseren wij dit niet voor complexe afbeeldingen. PNG-24 afbeeldingen zorgen voor een betere kwaliteit ten koste van een toenemende bestandsgrootte.

GIF afbeeldingen waren een aantal jaar geleden populair en zijn nog steeds een optie voor kleine afbeeldingen en zijn net als PNG-8 afbeeldingen gelimiteerd tot 256 kleuren. Wij adviseren dus ook om dit bestandstype niet te gebruiken voor productfoto’s.

Opslaan van afbeeldingen

Zoals verwacht zorgen grote afbeeldingen voor een langere laadtijd van je website. Als we het hebben over grote afbeeldingen hebben we het niet over de afmetingen van de afbeeldingen maar over de bestandsgrootte. Het is belangrijk om de afbeeldingen zo klein mogelijk te houden om een snelle website te garanderen. Er zijn drie belangrijkste punten die je moet onthouden bij het opslaan van afbeeldingen.

Allereerst is het belangrijk dat je de afbeeldingen opslaat in de juiste afmetingen ten behoeve van afbeelding optimalisatie. Om dit te realiseren moet je de afbeeldingen in je bewerkingsprogramma bekijken op 100%. Dit zorgt ervoor dat de afbeeldingen in de exacte verhoudingen gezien worden als wanneer ze op een beeldscherm getoond worden.

Bij het opslaan van afbeeldingen van het web is het mogelijk om de grootte van een afbeelding te verkleinen zonder de kwaliteit van de afbeelding drastisch te verlagen. In Photoshop heb je bijvoorbeeld de mogelijkheid om afbeeldingen op te slaan met de functie ‘opslaan voor internet’. Hiermee kun je de afbeeldingen opslaan met nagenoeg dezelfde kwaliteit terwijl je de grootte van de afbeeldingen kan laten afnemen.

Als laatste is het comprimeren van afbeeldingen de makkelijkste manier om de bestandsgrootte van afbeeldingen te laten doen afnemen. Hiervoor is verschillende (gratis) software beschikbaar. Deze programma’s halen verborgen informatie weg uit het afbeeldingsbestand zoals kleurprofielen en metadata (bijvoorbeeld geolocatie’s of waar de foto genomen is). Deze programma’s zorgen voor een makkelijke en snelle manier om de afbeeldingsgrootte te verkleinen zonder kwaliteit in te leveren.

Gastblog

Gastblogs zijn geschreven door gastauteurs: studenten, specialisten en betrokken marketingmedewerkers met een vlotte pen. Gastbijdragen zijn van harte welkom op Bloeise, omdat ze vaak een frisse blik werpen op bestaande onderwerpen waar we soms gewoon al teveel over hebben geschreven.
Alle artikelen van Gastblog

Reacties

2 Reacties
  • Gerben schreef:

    Tegenwoordig kun je fotobestanden omzetten naar webp bestanden. In HTML . Foto’s krijge tot 60 procent minder aan kb. Een plugin in WordPress die dit ondersteunt, heet Shortpixel.

  • Gg schreef:

    Tegenwoordig kun je fotobestanden omzetten naar webp bestanden. In HTML . Foto’s krijge tot 60 procent minder aan kb. Een plugin in WordPress die dit ondersteunt, heet Shortpixel.

  • Geef een antwoord

    Het e-mailadres wordt niet gepubliceerd.