Foto’s optimaliseren voor je website

Waarom moet je foto’s optimaliseren voor je website?

Het is belangrijk dat afbeeldingen op je website niet zorgen voor vertragingen wat betreft het laden van webpagina’s. Omdat we steeds meer gebruik maken van mobiel internet moeten afbeeldingen ook snel geladen worden als er alleen een telefoon- of draadloze verbinding is. Dit is niet alleen van belang voor de gebruiker, maar ook de waardering die zoekmachines (als Google) geven voor een webpagina. Je scoort hoger met je webpagina als de afbeeldingen snel laden.

Sneller laden van webpagina’s

Er zijn dan een aantal zaken die je kunt regelen om afbeeldingen sneller te laden. Bijvoorbeeld kan dat door een snelle(re) webserver. Maar ook moet je afbeeldingen optimaliseren voor gebruik op een website. Een afbeelding is namelijk nooit direct geschikt om op een website te plaatsen. Je moet dan op de volgende punten letten:

• Zorg dat de pixelgrootte geschikt is voor tonen op een website. Voor een website moeten foto’s circa 800×800 pixels bevatten voor een vierkante foto (en bijvoorbeeld 800x 600 foto’s voor een rechthoekige foto oftewel landscape formaat) en een paginabrede foto is 1920 pixels breed. Hoe meer pixels, hoe groter het bestand.
• Hoe kleiner de bestandsgrootte, hoe beter het is. Uiteraard moet de foto er nog wel goed uit zien, het is dan een kwestie van uitproberen. Voor grote afbeeldingen moet je onder de 250Kb blijven en voor kleinere afbeeldingen raden wij circa 50Kb tot 150Kb. Als je meerdere foto’s plaatst, bijvoorbeeld in een fotogalerij, adviseren wij een grootte van niet meer dan 50 Kb. De grootte kun je bekijken in bijvoorbeeld de Windows verkenner of de Finder bij een Apple. Verder is onze tip om niet enorm veel foto’s in een fotogalerij te plaatsen, of te gebruik te maken van thumbnail afbeelding en als je erop klikt, dat dan pas de foto in volle grootte wordt geladen.
• Voor de resolutie adviseren wij standaard 72 dots per inch (DPI) voor op een website. Je kunt de resolutie wel iets hoger maken indien nodig, maar zorg dat het niet meer dan nodig is.
• Gebruik PNG, JPG, SVG en GIF bestanden. Meestal gebruiken wij JPG voor foto’s. Er zijn verschillende compressietechnieken hiervoor beschikbaar. PNG wordt veelal gebruikt voor grafische elementen (en bij foto’s zonder achtergrond) en GIF voor animaties. SVG is interessant als je gebruik maakt van illustraties en het zijn super lichte bestanden.

Een foto optimaliseren of verkleinen

Er zijn diverse softwareprogramma’s om afbeeldingen te kunnen optimaliseren. Dat kan natuurlijk al (voordat je een foto uploadt) in een fotobewerkingsprogramma (zoals bijvoorbeeld Photoshop), maar er zijn ook gratis programma’s zoals de ShortPixel plugin voor WordPress, of via het onderdeel Media van WordPress. Een andere plugin is bijvoorbeeld Smush.
Ook een handig programma is Irfanview. Sla een foto op met de functie Bestand > Opslaan voor het Web. Gebruik de aanvullende plugin waarna gevraagd wordt. Verder is er ook nog TinyPNG. Voor de Apple Mac kun je iResize gebruiken. Bij installatie krijg je de melding dat een programma wilt downloaden dat niet via de Apple-Store aangeschaft is. Ga dan naar de systeemvoorkeuren > Privacy en klik op akkoord dat je het programma toch wilt installeren. Voor Apple Mac kennen we verder ImageOptim, maar er zijn nog wel meer programma’s verkrijgbaar.

Onze methode

Wij openen een afbeelding altijd eerst in een fotobewerkingsprogramma, zoals Photoshop. Hierin passen we de afmetingen aan en zorgen voor een goede kwaliteit foto. Vervolgens gaan we de foto opslaan (of exporteren) in een web-formaat en in de juiste bestandsgrootte. Zowel bij Photoshop (zie: https://helpx.adobe.com/nl/photoshop/using/saving-files-graphics-formats.html) als bij gratis alternatieven kun je het beste kijken of er een instructie is hoe je bestanden kunt optimaliseren voor internet (web). Wij adviseren vooral te kijken op Youtube naar instructies.

Daarna uploaden we de afbeeldingen en eventueel gaan we de foto binnen het beheerprogramma van de website optimaliseren met een plugin.

Comprimeren van foto’s op je website / webshop

WordPress zorgt zelf al voor een compressie van foto’s, maar dat kan nog beter. Hiervoor zijn een aantal plugins verkrijgbaar. Een aantal staan op deze website beschreven. Wij gebruiken zelf WP Smush of EWWW Image Optimizer. Standaard zijn deze plugins niet beschikbaar voor WordPress, maar kunnen eenvoudig worden toegevoegd.

Tenslotte

Het beste is natuurlijk om je eigen foto’s te gebruiken. Maar er zijn ook websites waar je foto’s kunt vinden. Op sommige websites zijn ook gratis foto’s te vinden.