Het ideale formaat afbeelding voor op je website

Foto’s zeggen meer dan 1000 woorden en zijn ontzettend belangrijk voor je website. Want wat ziet een bezoeker het eerst op je website? juist je foto’s!
De sfeer en de boodschap die je banner en foto’s uitstralen op je website zijn heel belangrijk. Maar je moet er ook voor zorgen dat je website niet te traag wordt door te grote bestanden.
In deze blog leg ik je uit hoe je op eenvoudige wijze de afbeeldingen kunt verkleinen, hoe je de foto’s op maat snijdt en de bestandsgrootte kunt verminderen. Maar eerst geef ik je nog wat tips over het ideale formaat.

Het formaat van je afbeeldingen op je website

Als een foto van links naar rechts loopt, bijvoorbeeld een banner, en je wilt dat de foto lekker scherp is dan heb je een formaat van 2400 pixels breed en niet meer dan 500 Kb nodig.
Heb je een afbeelding die een deel van de pagina van je website in beslag neemt dan heb je voldoende aan 1200 pixels en niet meer dan 300kb nodig

Bestandsgrootte foto’s

De bestandsgrootte is het ‘gewicht’ van de foto en wordt uitgedrukt in Kb (kilobytes) of Mb (megabytes).

Hoe verklein ik de foto’s naar het ideale formaat

Een makkelijke en gratis tool om foto’s te verkleinen en de foto’s op het juiste formaat te snijden is bijvoorbeeld https://www.befunky.com/create/resize-image/  Er zijn nog veel meer sites dus kijk even welke jezelf het prettigste vindt.

Ik heb zelf geen ervaring met Mac computers maar naar navraag zou dit de beste tool voor Macbook gebruikers zijn https://www.macupdate.com/app/mac/13039/iresize

Waarom moet ik foto’s verkleinen

Het scheelt enorm in je bestandsgrootte (Kb) als je je foto’s alvast verkleind. Door het verkleinen van je foto’s blijft je website snel.  Hierdoor gaat de scherpte van je afbeelding wel iets achteruit maar dit zal niet zichtbaar zijn, tenzij je extreem in zoemt.

Een afbeelding op maat maken

Om rust te creëren op je site is het verstandig je foto’s in het zelfde formaat te snijden. Zeker als je twee foto’s naast elkaar zet is het mooier om dezelfde grootte te hebben. Natuurlijk hoef je niet de hele site door hetzelfde formaat te gebruiken. Het is ook wel eens mooi om een landscape foto boven je tekst te zetten en dan is bijvoorbeeld een breedte van 2400 pixels bij 1200 pixels hoog.

Uitleg over het verkleinen en op maat maken van foto’s met Befunky

We hebben een foto van 4000×2000 pixels en 4Mb
We willen een foto gaan gebruiken naast een tekst en de grote wordt  1200x 750 pixels met zo min mogelijk Kb.
Open Befunky

Ga naar open en dan computer en zoek de foto op die je wilt verkleinen en op maat wilt maken.

We gaan eerst de foto Croppen (op maat maken) naar 1200×750
Ga in het linker veld naar Crop
Vul bij With 1200 in en bij Height 750 in laat het vinkje bij Lock staan

Nu ga je op een hoek staan en maak je het kader groter tot je vindt dat de foto in het kader er goed uitziet, je kan het kader ook verslepen. Druk op Apply als je tevreden bent met het uitsnijden van je foto.
Ga vervolgens naar Resize (linker kant)
Vul bij with 1200 in en bij Height 750 in laat het vinkje bij Lock staan

Druk op Apply
Ga naar Save (bovenin) druk op computer
Geef de foto meteen een goede naam die verwijst naar je zoekwoorden!
De foto wordt gedownload, heb je alle foto’s bewerkt dan kan je alles in 1x overzetten naar je map op de computer

In dit geval heb ik gebruik gemaakt van Befunky maar je kunt natuurlijk elk programma gebruiken die jij  het prettigste vindt.

De bestandsgrootte van foto’s verkleinen

Om de puntjes op de i te zetten moeten we de bestandsgrootte van de afbeelding nog verkleinen. Je hebt bijvoorbeeld een foto van 1000 pixels breed met een bestandsgrootte van 300 Kb. Maar we willen zo min mogelijk Kb gebruiken zonder dat de kwaliteit achteruit gaat. Dit doen we door gebruik te maken van Tinypng. https://tinypng.com/

Vaak wordt de bestandsgrootte wel met 40% verminderd! De tool is gratis tenzij je meer dan 20 afbeeldingen in 1x wilt verkleinen. Heb je meer afbeeldingen dan moet je de handeling meerder malen doen (20 afbeeldingen per keer) of je kan dan de pro kopen.

Ga naar https://tinypng.com/
Druk op drop your Webp enz, zoek je foto op, dubbel klik erop en je ziet dat deze al wordt verkleind
Druk op download en de foto wordt naar je computer gedownload. Vanuit download zet je hem weer in de juiste map op je computer.

Naam aanpassen.

Voordat je de foto overzet moet je de naam aanpassen dit is voor de SEO (vindbaarheid op het internet) belangrijk, gebruik dus het zoekwoord waar je op gevonden wilt worden van de blog of de pagina waar je in bezig bent.
Bijvoorbeeld in mijn geval: ideale formaat foto

Afbeeldingen in WordPress downloaden

Zet de foto in het juiste mapje op je computer zodat je hem makkelijk terug kunt vinden.

Welk bestandsformat opslaan? JPG of PNG

jpg geeft je een lichter bestandsformaat dan .png. Om nog extra op zwaarte van je afbeelding te besparen kun je voor .jpg kiezen. Png heeft een transparante achtergrond en is vaak scherper, logo’s worden vaak als png. gedownload.

Conclusie:

Door deze stappen te volgen heb je niet alleen de ideale foto formaten op je site staan maar blijft je website ook snel doordat we de bestandsgrootte zo klein mogelijk hebben gehouden! Door zoekwoorden toe te voegen aan de naam van je afbeeldingen ben je beter zichtbaar op Google en makkelijker te vinden. Ja het kost je tijd maar ik zou je toch echt aanraden dit te doen.

Kom je er niet uit? laat het me dan weten, domme vragen zijn er niet naar mijn mening dus schroom niet als je iets niet begrijpt.