{"id":927,"date":"2020-02-15T11:33:44","date_gmt":"2020-02-15T11:33:44","guid":{"rendered":"https:\/\/averex.nl\/?p=927"},"modified":"2020-02-15T11:33:44","modified_gmt":"2020-02-15T11:33:44","slug":"afbeeldingen-optimaliseren-website","status":"publish","type":"post","link":"https:\/\/thewebreview.com\/nl\/website-ontwikkeling\/afbeeldingen-optimaliseren-website\/","title":{"rendered":"Zo optimaliseer je afbeeldingen voor je website!"},"content":{"rendered":"\n<p>Het komt vaak voor dat je even snel een afbeelding verandert op jouw website. Dit kan heel simpel zijn en verloopt vaak zonder problemen. Helaas zijn er in veel gevallen meer gevolgen dan je denkt. In deze blog vertel ik hoe je je afbeeldingen maximaal kunt optimaliseren voor jouw website met behulp van onderstaande onderwerpen.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Voordelen van optimalisatie<\/strong><\/li><li><strong>Comprimeren<\/strong><\/li><li><strong>De grootte<\/strong><\/li><li><strong>Juiste bestandsformaat<\/strong><\/li><li><strong>Naamgeving<\/strong><\/li><li><strong>ALT Tags<\/strong><\/li><li><strong>EXIF data<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Wat zijn de voordelen van afbeelding optimalisatie?<\/strong><\/h2>\n\n\n\n<p>Afbeeldingen die geoptimaliseerd zijn, zijn minder groot en beter leesbaar voor een computer. Dit betekent dat de pagina&#8217;s sneller geladen kunnen worden en de inhoud van een afbeelding gelezen kan worden door een computer. <\/p>\n\n\n\n<p>De voordelen zijn: een snellere laadtijd voor de bezoeker, minder opslaggeheugen en <a href=\"https:\/\/averex.nl\/hoe-kom-hoger-in-google-staan\/\" title=\"hoger komen in Google SEO\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">betere posities in Google voor jouw website<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Waarom moet ik mijn afbeelding comprimeren?<\/strong><\/h2>\n\n\n\n<p>Op het internet vind je\noveral afbeeldingen: groot, klein, scherp en onscherp. Deze afbeeldingen\nverschillen allemaal van kwaliteit. Deze kwaliteit kun je op je scherm maar tot\neen bepaalde mate waarnemen. Al deze \u2018extra\u2019 kwaliteit neemt eigenlijk alleen\nmaar extra geheugen in beslag.<\/p>\n\n\n\n<p>Door je afbeelding te\ncomprimeren zorg je dat jouw afbeelding nog steeds een goede kwaliteit heeft,\nmaar de \u2018overbodige\u2019 kwaliteit wordt automatisch weggelaten. Het bestand wordt\nzo een stuk kleiner waardoor de webpagina ook veel sneller ingeladen kan\nworden.<\/p>\n\n\n\n<p>Nu vraag je je waarschijnlijk\naf: hoe comprimeer ik mijn afbeelding dan? Een makkelijke tool kun je vinden\nvia de website van CompressJPEG. In deze tool upload je jouw JPEG en PNG\nafbeeldingen en de tool doet de rest. Door te klikken op de download knop heb\nje jouw afbeelding gecomprimeerd.<\/p>\n\n\n\n<p>Als voorbeeld: neem een afbeelding van bijvoorbeeld 2.5MB. Na een compressie is de grootte met 51% afgenomen zonder dat er veel kwaliteit verloren is gegaan op het oog.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Hoe groot moet mijn afbeelding zijn?<\/strong><\/h2>\n\n\n\n<p>We zien het vaak gebeuren:\neven een foto maken met je smartphone en dan direct op de website. Vaak zijn de\nformaten van deze foto\u2019s echter veel te groot voor een website. <\/p>\n\n\n\n<p>Een iPhone maakt foto\u2019s van bijvoorbeeld 6000 bij 4000 pixels, terwijl een website afbeeldingen vaak in hooguit 2500 pixels breed laat zien (afhankelijk van je schermformaat). Al die pixels zijn dus overbodig en zorgen voor extra kwaliteit die je met het blote oog niet of nauwelijks ziet.<\/p>\n\n\n\n<p>Afbeeldingen zijn met de\nhuidige kwaliteit van telefoons dus al snel enkele MB\u2019s. Voor een website is\ndit veel te veel, aangezien elke milliseconde telt bij het inladen van een\npagina. Google straft trage websites af en bezoekers haken af als het laden te\nlang duurt.<\/p>\n\n\n\n<p>Probeer altijd een maximaal\nformaat aan te houden van ongeveer 0.5MB \/ 500KB voor pagina brede afbeeldingen.\nDeze grootte van een afbeelding is ruim voldoende voor een website. Zo blijven\nkwaliteit en laadtijd optimaal.<\/p>\n\n\n\n<p>Onthoud deze getallen; als je afbeelding groter is weet je dat er nog winst te behalen is.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welk bestandsformaat moet ik gebruiken voor mijn afbeelding?<\/h2>\n\n\n\n<p>Voor afbeeldingen op het internet komen de bestandsformaten .PNG en .JPG (of  .JPEG) het vaakst voor. Tussen deze twee formaten zitten verschillen, dit zijn voornamelijk kwaliteit en transparantie. <\/p>\n\n\n\n<p>PNG bestanden kunnen een transparante achtergrond hebben, dit is bijvoorbeeld handig bij een logo of afbeelding die niet volledig rechthoekig is. Verder kan een JPG bestand verder gecomprimeerd worden, de grootte van een JPG bestand kan dus veel kleiner worden dan een PNG bestand.<\/p>\n\n\n\n<p>Gebruik voor logo&#8217;s en icoontjes een PNG formaat. Voor (grote) afbeeldingen die rechthoekig zijn gebruik je een JPG formaat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Hoe geef je jouw afbeelding een goede naam?<\/strong><\/h2>\n\n\n\n<p>De naam van jouw afbeelding\nheeft meer invloed dan je denkt. Zo leest Google bijvoorbeeld de naam waardoor het\neen idee kan krijgen wat er op de afbeelding te zien is.<\/p>\n\n\n\n<p>Wanneer de naam van de\nafbeelding bestaat uit de belangrijkste zoekwoorden van jouw website, is er\nmeer kans op een hogere positie op deze zoekwoorden in de zoekresultaten.\nBekijk van tevoren dus welke zoekwoorden je moet gebruiken en plaats deze in de\nnaam van jouw afbeelding.<\/p>\n\n\n\n<p>Tip: Een goede afbeeldingsnaam bestaat uit zoekwoorden gekoppeld met een \u2018-\u2018. Bijvoorbeeld \u2018groene-kamerplant-witte-bloempot.jpg\u2019. De (dash) streepjes zijn hier beter geschikt dan de liggende streepjes \u2018_\u2019.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Hoe geef je jouw afbeelding een ALT-tag?<\/strong><\/h2>\n\n\n\n<p>De ALT-tag is een\nbeschrijvende tekst die vertelt wat er op de afbeelding te zien is. Deze tag\nwordt ook gelezen door Google en is voor de bezoeker eigenlijk onzichtbaar.<\/p>\n\n\n\n<p>Gebruik ook in deze tag de\njuiste zoekwoorden en vertel in beschrijvende woorden wat de inhoud van de\nafbeelding is. Met een goede naam en ALT-tag zijn jouw afbeeldingen ook goed\nvindbaar in bijvoorbeeld Google Afbeeldingen.<\/p>\n\n\n\n<p>De ALT-tag kan een combinatie\nzijn van enkele trefwoorden en kunnen achter elkaar gezet worden met een spatie\ner tussen.<\/p>\n\n\n\n<p>Na het optimaliseren van de naam en ALT-tag ziet de bezoeker dus op het oog geen verschil. In de code van de website is de ALT-tag echter wel zichtbaar en dat ziet er zo uit:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"99\" src=\"https:\/\/thewebreview.com\/wp-content\/uploads\/2020\/02\/afbeelding-alt-tag-seo-optimalisatie-1.png\" alt=\"afbeeldingen optimaliseren website img tag\" class=\"wp-image-935\" srcset=\"https:\/\/thewebreview.com\/wp-content\/uploads\/2020\/02\/afbeelding-alt-tag-seo-optimalisatie-1.png 500w, https:\/\/thewebreview.com\/wp-content\/uploads\/2020\/02\/afbeelding-alt-tag-seo-optimalisatie-1-250x50.png 250w, https:\/\/thewebreview.com\/wp-content\/uploads\/2020\/02\/afbeelding-alt-tag-seo-optimalisatie-1-120x24.png 120w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Haal het maximale uit jouw afbeelding door de EXIF-data aan te passen.<\/strong><\/h2>\n\n\n\n<p>EXIF-data is een reeks van\ninformatie die opgeslagen is in een afbeelding en is verder niet zichtbaar.\nDenk hierbij aan de datum, tijd, locatie, camera en bepaalde instellingen. <\/p>\n\n\n\n<p>Let op, pas de EXIF-data pas\naan nadat je de afbeelding gecomprimeerd hebt. Bij het comprimeren gaat deze\nnamelijk vaak verloren om data te besparen.<\/p>\n\n\n\n<p>Het invullen of aanpassen van\ndeze informatie gaat alleen in de daarvoor bestemde programma\u2019s, zoals\nPhotoshop.<\/p>\n\n\n\n<p>Met behulp van bovenstaande\ninformatie kun je jouw website optimaliseren voor een betere laadtijd en hogere\nposities in Google.<\/p>\n\n\n\n<p>Wil je graag hulp of meer informatie over dit onderwerp? Neem even contact met ons op, we helpen je graag.<\/p>\n","protected":false},"excerpt":{"rendered":"Het komt vaak voor dat je even snel een afbeelding verandert op jouw website. Dit kan heel simpel zijn en verloopt vaak zonder problemen. Helaas zijn er in veel gevallen meer gevolgen dan je denkt. In deze blog vertel ik hoe je je afbeeldingen maximaal kunt optimaliseren voor jouw website met behulp van onderstaande onderwerpen. [&hellip;]","protected":false},"author":1,"featured_media":928,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[84,85],"tags":[59,60,14,61,31],"class_list":["post-927","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-ontwikkeling","category-zoekmachine-optimalisatie","tag-afbeeldingen","tag-optimaliseren","tag-seo","tag-snelheid","tag-website"],"acf":[],"_links":{"self":[{"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/posts\/927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/comments?post=927"}],"version-history":[{"count":0,"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/posts\/927\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/media\/928"}],"wp:attachment":[{"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/media?parent=927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/categories?post=927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewebreview.com\/nl\/wp-json\/wp\/v2\/tags?post=927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}