Voordat je een foto op je website plaatst moet je letten op het formaat. En dan bedoel ik niet in centimeters maar in KB = kilobytes. Klinkt ingewikkeld maar dat is het niet.
Je foto verkleinen is goed voor de snelheid van je website en fijn voor je bezoeker, want die hoeft niet lang te wachten. En Google waardeert snelle websites, dus tel uit je winst 🙂
Een digitale foto betaat uit pixels. Hoe groter en verfijnder je foto, hoe meer pixels = hoe meer bytes. Die moeten allemaal naar de computer (of tablet / smartphone) van je bezoeker overgebracht worden om je foto te kunnen tonen.
In de Verkenner (Windows) of Finder (Mac) wordt de grootte van je bestanden vermeld. Zie je dit niet, klik met je rechtermuisknop op de naam van het bestand en kies Eigenschappen (Windows) of Toon Info (Mac).
Ga er maar van uit dat wanneer je foto rechtstreeks van je camera of smartphone komt, deze veel te groot is om op je website te zetten. Zo’n foto bevat teveel data voor schermvertoning.
- Een bezoeker moet al die data downloaden vooraleer hij je foto kan zien.
Iemand die op zijn smartphone surft wil graag wat langer plezier hebben van zijn data-abonnement. Daarom wacht een bezoeker meestal niet tot jouw mooie foto geladen is. - Daarnaast nemen grote foto’s veel serverruimte in beslag, waardoor je eerder aan je hostinglimiet zit. Grote kans dat je dan moet bijbetalen voor een duurder hostingabonnement voordat je verder kunt werken aan je website.
Dus ga je eerst je foto verkleinen.
Probeer een foto voor in je blog / pagina naar plm. 50 kb te verkleinen
(ook aan te raden voor foto’s in je zijbalk).
Een headerfoto mag tegen de 80 kb zijn.
Foto verkleinen zonder Photoshop
Dankzij de gratis online tool pixlr.com/editor heb je geen duur fotobewerkingspakket nodig.
Je hoeft er niet eens je emailadres achter te laten.
Klik op ‘Open afbeelding van computer’ en upload je foto.
Kies onder Beeld de optie ‘Afbeeldingsgrootte‘.
Met ‘Beperk verhoudingen‘ aangevinkt houdt de foto dezelfde verhouding, dwz. wordt niet vervormd.
(Je kunt zelfs een uitsnede maken op een vooraf bepaald pixelformaat.)
Klik OK. De foto wordt nu nogal klein getoond.
Klik onder Weergave op Alles weergeven om je foto groter te zien.
In dit voorbeeld sla ik de verkleinde foto nu op mijn computer op.
Hierna kun je de foto uploaden naar WordPress, in je blogpost of pagina waar je de foto wil gebruiken.
Om het helemaal af te maken optimaliseer je je afbeelding voor Google, waardoor je website nog beter geïndexeerd wordt, en in Googles afbeeldingsresultaten eerder getoond wordt.
Hoe je tekst plaatst over een foto bijvoorbeeld voor je header, zoals in dit voorbeeld hieronder, lees je hier.
Bastin Hofman zegt
30 maart 2017 op 17:16Dank voor de duidelijke info.
Scheelt een stuk of een afbeelding van 2500-3000 kb plaatst of van 50 kb. Kwaliteit is wel merkbaar. Maar laden van de website gaat een stuk langzamer met alle grote bestanden.
Mvg Bastin Hofman
MArio zegt
25 juni 2015 op 09:19Ontzettend bedankt maar ik heb een thema op mijn wordpress waarin ik een topbar kan maken en een header. Ik had daardoor een prachtige header van ongeveer 400 hoog, 1000 breed maar die kwam op elke pagina. Ik besloot toen met sliders te gaan werken per pagina die TEGEN de header aan komt en erzelfs mooi onder valt. Daarvoor moest ik wel mijn header maar 40 hoog maken geen probleem want daarin kon ik mijn menu verplaatsen van de topbar naar de header.Maar!!! nu kan ik op andere paginas waar ik geen slider wil die grote header terug krijgen. Ook weet ik niet op welk formaat ik mijn fotos inde slider moet vergroten verkleinen. zoals je ziet zoomt de header/slider de foto veel te ver in. ik geef op fulsscreen en meer hoef ik daarin niet te doen omdat ik de slider los maak en hem daarin in de pagina als header/slider( mits dus de ruimte van de originele header is aangepast). hoe groot maak ik de originele fotos alvoresn ik ze een full screen opdracht mee geef?!!
Riet de Wit zegt
27 juni 2015 op 10:36Hallo Mario, om per pagina/bericht een andere header te tonen gebruik ik meestal de plugin Unique Headers of Custom Headers. Een slider is af te raden zie http://shouldiuseacarousel.com (even uit mijn hoofd, ben nu op vakantie of google even op ‘should I use a caroussel’). Succes!
Patricia Gorissen (@georganiseerd) zegt
19 maart 2015 op 11:42Dankzij jouw tip doe ik dat nu altijd! RT @WebsiteCoachRdW: Even je foto verkleinen: werkt in je voordeel – Blog http://t.co/vrEmnV7CYT
@Noorganiseert zegt
29 juni 2014 op 14:50Even je foto verkleinen voor op je website: werkt in je voordeel http://t.co/SZ0iOl9Csw