3 gratis tools om afbeeldingsformaten te checken

In een eerder blogartikel over Squoosh vertelde ik over deze nieuwe tool waarmee je afbeeldingen kunt optimaliseren. Als je nu wilt weten of je dat goed hebt gedaan, of je er optimaal gebruik van hebt gemaakt, dan is het handig om dit artikel te lezen. Ook als je je website wilt checken of je in het verleden je afbeeldingen goed geoptimaliseerd hebt, dan kun je hiermee uit de voeten.

Eind 2018 lanceerde Google de gratis tool web.dev waarmee je je website kunt controleren op een aantal aspecten die belangrijk zijn voor de weergave van je site en eventueel je ranking. De punten waarop gecheckt wordt gaan niet over de inhoudelijke kant van de website, niet over de content, maar over de technische kant.  Bijvoorbeeld of de code “netjes” geschreven is en niet teveel loze ruimte of spaties en lege regels bevat. En of je afbeeldingen goed geoptimaliseerd en zo de snelheid in de site houden, of dat ze de site vertragen.

Met welke gratis tools kun je controleren of de afbeeldingen op je website optimaal geprepareerd zijn?

  1. Web.dev
    De test doe je op web.dev, waar je de url van je website invoert. Je krijgt nu op hoofdlijnen de rankings door.

  2. Lighthouse
    Als je meer details wilt, dan klik je op “view report” of “download report”. Beide keren krijg je van lighthouse een rapport waarin tal van verbeterpunten staan. Mochten je afbeeldingen nog niet geoptimaliseerd zijn, dan krijg je specifiek per afbeelding een suggestie tot in hoeverre deze verkleind kan worden en voor welke formaten Google een voorkeur heeft.

    Verder krijg je waarschijnlijk meer verbeterpunten voor je website te zien. Veel van die punten zou je eens kunnen bespreken met je websitebouwer.

  3. Google analytics
    Waar web.dev en lighthouse kijken naar je hele website, kun je in Google analytics pagina voor pagina kijken naar

Wat performance in web.dev zegt over de ranking van je website in Google

De uitkomsten van het onderzoek via web.dev laten zien waar Google accenten legt. De uitkomsten uit de test zijn niet zaligmakend. Een hoge SEO-score zegt bijvoorbeeld alleen iets over de technische inrichting van de website en niets over de inhoud of de ranking in Google. Hetzelfde geldt voor een lage performance. Ondanks dat deze laag kan zijn, kan de site een hoge positie bezetten in de ranking. Sites die werken met een CMS waar “alles in zit” en waaraan je niet of weinig hoeft te programmeren, zoals wordpress, joomla, squarespace, wix en soortgelijke, die scoren over het algemeen laag op performance. Bijvoorbeeld omdat er meer code in zit dan noodzakelijk is.

Omdat het kan heb ik John Mueller, webmaster trends analist van Google, gevraagd naar naar het effect dat een lage performance rating heeft op de ranking in Google. Supercool dat dit mogelijk is, live via YouTube! Dit is zijn antwoord:

 

De spreektaal van de hangout tijdens kantooruren van Google is Engels, dit is het originele antwoord, de Nederlandse vertaling staat hiernaast of hieronder:

Ik: “I'm wondering how much a very low (1-15) performance rate in web.dev is affecting the google ranking of the website. “

John Mueller: “I don’t know. Web.dev is a really cool tool that pulls together the different tests that we have in Lighthouse and gives you scores on those. It kind of guides you through the process of improving those scores. So when it comes to speed, things that you need to watch out for, things that you could try and over time it tracks the progress of your website. Kind of as you’re going through the different content of the tool there. So that’s something that I think that is generally a good practice to go through, kind of work through. It’s also that these are good practices to go through, but that doesn’t mean that they result in a higher ranking.

Or similarly if you have low scores here, it doesn’t mean that your website is ranking terribly because it is not following the best practises.

So there is kind of an aspect of on the one hand if your website is so bad that we can’t index it properly at all, which might be the case with really low SEO scores in Lighthouse where we can’t access the url. So there are no url’s on this page and it’s just a javascript shell that we can’t process the javascript. That could have a severe effect on your SEO.

But on the other hand if it’s just a matter of your site being a little bit slow or not being perfectly optimised. I don’t know if that would cause a significant effect on your website.

My recommendation here is to look at advice that is given in tools like web.dev. Think about what you can implement, think about the parts that you think that are important for your website. On the one hand for search engines, on the other hand for your users. Because ultimately if you doing something that improves things for your users, that will have a long term triple down effect on the rest of your website as well.”

 

Nederlandse vertaling:

Ik: “Hoeveel effect heeft een lage score op performance in web.dev op de ranking van de website in Google.”

John Mueller: “Ik weet het niet. Web.dev is een geweldig instrument dat alle verschillende testen die we in Lighthouse hebben uitvoert en je scores geeft op die testen. Web.dev vertelt je hoe je je scores kunt verhogen en leid je daarmee door een verbeterproces. Bijvoorbeeld de snelheid van je site, de dingen waar je voor uit moet kijken, dingen die je kunt proberen om te verbeteren. Het houdt in de loop van de tijd de vooruitgang van je website bij. Alsof je door de verschillende aspecten van de tool gaat. Dat is naar mijn idee sowieso een goede werkwijze, de aanwijzingen blijven volgen. Het is ook zo dat dit goede verbeterwerkzaamheden zijn, maar dat betekent niet dat ze resulteren in een hogere ranking.

Een vergelijkbare situatie is er als je in web.dev een lage score hebt op performance. Dat houdt niet automatisch in dat je website vreselijk laag in de ranking staat omdat je het goede voorbeeld niet hebt gevolgd.

Dus aan de ene kant kan het zo zijn dat je website zo slecht in elkaar steekt dat hij helemaal niet geïndexeerd kan worden. Dat zou het geval kunnen zijn bij hele lage SEO scores in Lighthouse, als we niet bij de url kunnen. Of als er geen url’s zijn, maar alleen een schild van javascript, dan kunnen wij het javascript niet verwerken. Dat zou een enorme slechte invloed op je SEO kunnen hebben.

Van de andere kant, als je website alleen maar wat langzamer is, of niet helemaal perfect geoptimaliseerd, dan weet ik niet of dat een significant effect heeft op je site.

Mijn aanbeveling in deze is om te kijken naar de adviezen die je krijgt in tools als web.dev. Denk erover na wat je kunt implementeren, welke onderdelen jij belangrijk vindt voor je website. Aan de ene kant vanwege de zoekmachines, aan de andere kant voor je bezoekers. Uiteindelijk is het zo dat als je je website verbeterd voor je bezoekers, dat op lange termijn een driedubbel positief effect op de rest van je website heeft.”

 
 

Vraag aan de google webmaster: “Hoeveel effect heeft een lage score op performance in web.dev op de ranking van de website in Google.”

 
Foto’s verkleinen met squoosh

De impact van het plaatsen van foto’s en afbeeldingen op de performance van een website kan enorm zijn. Sinds Google afgelopen zomer (2018) enkele grote updates in het algoritme heeft doorgevoerd, lijkt de invloed alleen maar groter te worden. Ik spreek uit ervaring als webmaster en contentcreator van een paar websites. What’s up?

Next-gen formats, nieuwe generatie afbeeldingsformaten

Veel mensen weten wel dat je je foto’s moet verkleinen en optimaliseren voordat je ze op de site zet, maar wist je dat Google nu echt een voorkeur heeft voor next-gen formats? Dat zijn bestanden die beter comprimeren, kleiner zijn en sneller laden dan de oude vertrouwde JPG’s en PNG’s. Die nieuwe formats heten bijvoorbeeld JPG2000, JPG XR, MozJPG en WebP.

Nieuwe gratis en online tool om foto’s te resizen

Met de website Squoos.app van Google, kun je je “gewone” .JPG’s en .PNG’s downsizen naar een van die nieuwe formaten. Zo werkt Squoosh:

 
 

Wil je het zelf eens proberen, maar heb je geen goede foto’s? Onderaan deze pagina geef ik je de foto’s die in de video gebruikt zijn, zodat je zelf de test kunt doen.

Niet alle browsers kunnen nextgen images weergeven

Nog even een puntje: de nieuwe formats werken niet met alle browsers. Zo kun je in Safari (Apple) de WebP afbeeldingen niet zien. Op internet zijn nog geen berichten te vinden dat Apple dit in de toekomst wel mogelijk gaat maken. Hoe gebruiken webmasters de WebP images dan? Verschillende CMS’en geven de mogelijkheid om meerdere soorten afbeeldingen in te voeren, voor de verschillende browsers waarmee bezoekers een website kunnen bekijken. Door twee dezelfde foto’s in verschillende bestandsformaten in je site te zetten, wordt de site natuurlijk wel langzamer. Kijk maar eens in je analytics welke browsers jouw bezoekers gebruiken.

Test hoe je afbeeldingen eruit zien in andere browsers

Er zijn handige tools die je kunnen laten zien hoe je website er in een andere browser uitziet. Sommige van deze tools zijn gratis, bijvoorbeeld browsershots.org en deze screenshots browser.

Hoe kom je erachter of de afbeeldingen op je website te groot zijn?

Voor de toekomst weet je hoe het moet, maar wat doe je met alle foto’s en visuals die al op je website staan? Hebben die de juiste afmetingen en indelingen, of is er werk aan de winkel? Google kan je op verschillende manieren helpen om te zien of je afbeeldingen op je site hebt staan die de performance naar beneden halen.

Een hele handige, gratis en recente tool is web.dev. Toets in web.dev de url van je website in en je krijgt een compleet overzicht van de performance van je website, verdeeld over vier aandachtsgebieden. Als je op “view report” klikt, dan kom je op de website van lighthouse, waarop je gedetailleerde informatie over verbeterpunten van je website kunt vinden. Lighthouse geeft precies aan welke afbeeldingen niet het optimale formaat hebben en tot hoever ze verkleind kunnen worden. Zelf heb ik na het verbeteren van alle afbeeldingen op mijn site gemerkt dat ik 10 punten steeg in de performance graadmeter. Overigens geven web.dev en lighthouse ook een heleboel andere verbeterpunten voor je website. Die zou je eens kunnen bespreken met je websitebouwer.

Andere manieren om je afbeeldingen te verkleinen

Er zijn talloze programma’s en websites om je afbeeldingen te verkleinen. Het meest bekend zijn waarschijnlijk Photoshop en Lightroom. Beide kunnen zowel op een mac als op een pc gebruikt worden. Deze programma’s moet je huren tegenwoordig, tegen een kleine vergoeding weliswaar, maar de huur komt wel iedere maand terug.

Exclusief voor pc-gebruikers is IrfanView. Het enige programma dat ik mis op de mac. Het is al jarenlang een van de meest gebruikte viewers en image-converters. Werkt gemakkelijk en overzichtelijk. Je kunt het gratis downloaden.

Macgebruikers hebben de beschikking over automator, dit programma wordt op iedere mac meegeleverd. Daarmee kan je een of meer afbeeldingen van formaat en indeling doen veranderen, ook voor batchverwerking.

Voordeel van Squoosh

Het voordeel van Squoosh boven alle bovenstaande opties is dat je bij Squoosh nog voor het opslaan ziet het nieuwe resultaat gaat worden. Een nadeel dat je wellicht ervaart, is dat je je foto’s een voor een moet uploaden. Dit nadeel kun je ook als een voordeel zien, als je waarde hecht aan de kwaliteit van de afbeelding. Sommige afbeeldingen wil je wellicht meer comprimeren dan andere, omdat er bij de een meer informatie verloren gaat dan bij de ander.

Foto’s verkleinen voor facebook en instagram

Facebook en instagram hebben eigen compressietechnieken die vaak grote afbreuk doen aan de kwaliteit van de originele foto. Fotografen balen ervan. Het is wel mogelijk om je foto’s beter te laten lijken op de originelen. Dit doe je door de foto’s zo optimaal mogelijk aan te leveren. Als je je foto’s voor het uploaden verkleind en in een next gen bestandsformaat zet, dan zal er veel minder kwaliteit verloren gaan. Je kunt dezelfde foto’s gebruiken die je voor je website gecomprimeerd hebt, zoals hierboven beschreven.


Oefenfoto’s

Klik op een foto en je komt op dezelfde foto in groter formaat. Linksboven in de browser, onder “Archief”, kun je de foto bewaren door te klikken op “Bewaar pagina als”. Je krijgt dan een scherm dat je verschillende mogelijkheden voor het opslaan van de afbeelding geeft. Eenmaal opgeslagen, kun je de afbeelding gaan bewerken.

 

 

Foto’s laten maken

Mocht je het laten maken van foto’s of video’s willen uitbesteden, dan doe ik dat graag voor je. Laat het me weten als je vragen hebt.

 
 
Els Edesedes.tv
Kanaalpictogram en titel voortaan zichtbaar bij insluiten video via YouTube

Is het je opgevallen dat de video’s die je op je website hebt ingesloten via YouTube en waarvan je de titels niet wilde laten zien, dat die sinds kort wel de titels laat zien? YouTube heeft het naamloze en kanaalloze insluiten laten vervallen. Voortaan wordt altijd de titel getoond en daarnaast het logo van het YouTube-kanaal waar de video gehost wordt.

Link naar YouTube-kanaal

Als je op de titel of het kanaalpictogram klikt, dan kom je op het YouTube-kanaal terecht waar de video gehost wordt. Als de video als een verborgen bestand op YouTube staat, dan is hij ook na het aanklikken niet zichtbaar op YouTube. De zichtbaarheid op de website blijft wel.

Tip

Check alle video’s op je website om te zien of

  • de video gehost wordt vanaf een YouTube-kanaal dat iedereen mag zien,

  • de video een goede titel heeft.

Alternatief

Via vimeo.com blijft insluiten van video’s zonder verdere gegevens of afspeelmogelijkheden wel mogelijk. Om dat te kunnen doen heb je wel een betaald pro-abonnement nodig.

Naschrift

YouTube is blijkbaar nog bezig met het uitrollen van deze aanpassingen, want bij het maken van dit artikel kreeg ik nog wel de mogelijkheid om het het vakje “videotitel en afspeelmogelijkheden” aan te vinken. De functie doet het niet meer, ongeacht de keuze.

Insluiten videotitel youtube niet meer mogelijk


Els Edesedes.tv
Squarespace circle member

Soms wordt een project groter dan je in eerste instantie aan zag komen. Zo krijg ik naast een videoproductie- of videomarketingvraag wel eens de vraag naar een nieuwe website. Immers, als je mooie video's en foto's hebt laten maken, dan wil je ook dat deze op hun mooist getoond worden op je website. Zo heb ik in 2016 naast video's ook een aantal websites gemaakt voor verschillende opdrachtgevers. Het was een goed bewaard geheim dat ik dit kon, maar met de juiste middelen is de techniek niet zo ingewikkeld meer. Een beetje communicatieadviseur of marketeer timmert tegenwoordig zelf een site in elkaar. En aangezien dat mijn achtergrond is, heb ik dat vlot voor elkaar.  Dus tijd om ermee voor de dag te komen.  

Het is leuk om te doen, vooral omdat je snel resultaat ziet als je met mooie video's en afbeeldingen kunt werken. De sport is om een professionele site te maken die in een oogopslag laat zien wat je organisatie doet of waar zij voor staat.

Hieronder een paar voorbeelden van door mij gemaakt websites, uiteraard heb ik ook deze site, edes.tv, zelf gemaakt. Onder de afbeeldingen een toelichting op de keuze voor het Squarespace platform.

Eisen en wensen

Wat voor wensen en eisen heb je als je een nieuwe site wilt? Of je hem nu laat maken, of zelf gaat maken, in de basis komt dat voor de meeste mensen neer op:

  • Mooie vormgeving, passend bij je organisatie
  • Geschikt voor mobiel en desktop
  • Gemakkelijk zelf bij te houden met een of meer mensen: begrijpelijk cms
  • Goed vindbaar zijn
  • Geen gedoe met updates
  • Goed bereikbare helpdesk

Voor mij:

  • Header met automatisch afspelende video

En voor anderen: organisatie-specifieke wensen.

 

Platform en sitebouwer

Wie zich helemaal niet wil verdiepen de techniek achter de website, zal op zoek gaan naar een sitebouwer die hij vertrouwt. Sitebouwers verbinden zich vaak aan een of soms meerdere platforms. Het te kiezen platform zou dus ook een selectiecriterium voor een sitebouwer kunnen zijn. Afhankelijk van je business en de eisen die je stelt aan je website, kun je een programma van eisen opstellen voor het te kiezen platform.

 

Gebruikersgemak

Wie overweegt zelf te gaan maken, of in ieder geval geïnteresseerd is in de techniek achter de site, gaat zich oriënteren op de verschillende platforms. Met welk cms kun je goed uit de voeten? Hoe is de vindbaarheid in Google en Bing? Als snel komt dan een paar bekende namen voorbij, zoals Wordpress, Joomla en Drupal. Er zijn nog duizenden anderen! Of dat de beste systemen zijn, hangt af van je wensen. Wat ik een nadeel vind van na jarenlang met Wordpress en Joomla te hebben gewerkt, is dat je bij beide behoorlijke kennis op moet bouwen van het systeem. Het is niet plug and play. Daarnaast heb je alle updates en plugins. Gedoe. Als je pech hebt verandert er weer iets aan je site en is het een hele puzzel om het weer goed te krijgen. Wie maar een paar keer per jaar iets verandert aan zijn site, moet zich iedere keer weer verdiepen in het systeem. Drupal is niet een echt cms, maar meer een framewerk waarmee je op lego-achtige wijze kunt bouwen. Voor mij waren dit dan ook niet mijn eerste keuzes.

 

Squarespace

Bovenstaande lijst van eisen en wensen is ook voor mij leidend en ik zocht verder. Ik kwam op het spoor van Squarespace. Een platform dat je helpt een site te maken zonder te programmeren. Het kan wel, maar het hoeft niet. Je werkt op het platform zelf, dus installeren en updates uitvoeren wordt voor je gedaan. Daar betaal je wel iets voor, maar dat lijkt me logisch en is in mijn ogen de investering zeker waard. De templates die je kunt gebruiken zien er fantastisch uit. Mooi vormgegeven, de meeste zijn heel erg beeldgericht. Met verschillende mogelijkheden voor call-to-action. Ingebouwd in Squarespace zitten koppelingen met Google G Suite, het vroegere Google apps for business, Mailchimp, social media, Stripe voor webshops en tal van andere integraties

 

SEO

Naast dat je site er goed uit moet zien, wil je dat hij goed gevonden wordt. Een puntje van onderzoek alvorens over te stappen op Squarespace. Het blijkt dat Squarespace dat prima geregeld heeft. Google analytics kunnen heel eenvoudig worden aangekoppeld en ik ben nog niet tegen beperkingen aan gelopen. Squarespace laat je concentreren op de inhoud van je site om zo de meeste waarde voor je bezoekers te bieden. Dat is precies wat Google verlangt van een website. De eenvoudige koppelingen voor video, afbeeldingen, audio, grafieken, social media blocks, enzovoorts, geven je de mogelijkheid om alle content die je maar wilt op een aantrekkelijke wijze te plaatsen. 

 

Circle member, verlengde proefperiode

Om bovenstaande redenen ben ik enthousiast over het platform Squarespace en heb ik een aantal websites op dit platform gemaakt. Tot mijn verrassing, ik wist niet dat het bestond, werd ik vervolgens uitgenodigd voor Squarespace Circle. Dit is een groep professionele gebruikers die een aantal voordelen genieten. Waaronder een proefperiode van 6 maanden voor nieuwe websites, in plaats van de 2 weken die Squarespace standaard biedt. De periode van een half jaar is handig voor klanten die uitgebreid de tijd willen nemen om een website te ontwikkelen. 

Wil je meer weten over dit onderwerp? Laat dan een berichtje achter: 

 
squarespace-circle-member-badge-black.png
 
YouTube introduceert betaalfunctie in live-streaming

Mensen die op willen vallen met hun reactie op een live-uitzending op YouTube, moeten daarvoor gaan betalen. Dat meldt Barbara Macdonald op het blog van YouTube. Daar staat tegenover dat YouTube de betaalde reactie tot vijf uren prominent in beeld laat staan tegen een gekleurde achtergrond. Daarmee kan de reageerder maximale aandacht genereren. Kijkers van een live-stream kunnen op het dollarteken naast het bericht klikken. Vervolgens kunnen zij bepalen welk bedrag ze willen spenderen. Hoe meer je betaalt, hoe langer je bericht in beeld blijft. Bij verschillende bedragen horen verschillende kleuren. De vanaf-prijs is $5 en kan oplopen tot $ 500.

Het videoplatform wil hiermee creators een extra mogelijkheid bieden om geld te verdienen, zegt  YouTube. Dit naast de bestaande mogelijkheden van kanaalbanners en in-video advertenties. 

De nieuwe dienst gaat Super Chat heten en wordt op 31 januari 2017 uitgerold onder creators in 20 landen, met kijkers in meer dan 40 landen. Intussen zijn er een aantal betatesters aan het testen. De functie is nog niet meteen beschikbaar in Nederland, maar de helptekst is er al wel in de Nederlandse taal, dus je zou zeggen dat het niet heel lang kan gaan duren. 

Super Chat is de vervanger voor de Fan Funding functie. Deze laatste was bedoeld om creators een steuntje in de rug te geven, maar heeft nooit brede bekendheid gekregen. 

Super Chat nieuwe betaalfunctie in YouTube live streaming
CBS past ultieme vorm van videopersbericht toe

Het videopersbericht is een product dat ik jaren geleden bedacht. Aan de hand van een aantal video’s die ik ooit maakte voor een lokale politieke partij. Die waren zo leuk, dat ik ze bij wijze van experiment maar eens instuurde naar een lokale omroep. Die vond het de moeite waard om de video’s uit te zenden en vervolgens werd de voorzitter herkend in de supermarkt. Zo werd ook meteen de impact van de lokale tv-zender duidelijk.

In mijn dagelijkse praktijk als communicatieadviseur, jaren geleden, verstuurde ik regelmatig een persbericht. Nu was dit er een in video-vorm: het videopersbericht was geboren. Op google zocht ik op dit woord en ik bleek niet de eerste te zijn geweest. Onderzoek onder bedrijven, marketeers en PR-mensen leerde mij dat het fenomeen nog niet erg bekend was, maar dat men er wel veel potentie in zag. 

Zo langzamerhand zie ik steeds meer organisaties eigen tv- of beter: videokanalen toepassen om nieuws te brengen met een video, in plaats van te wachten tot een van de omroepen langskomt om een item te maken. Een recent en mooi voorbeeld van het CBS staat vandaag in het NRC.

 

Wat een videopersbericht voor je organisatie kan doen:

  • PR: op alle mediakanalen van de organisatie verschijnen dezelfde berichten, met, als het goed is, de website als basis. Dat is de plaats, bijvoorbeeld in de newsroom, waar alle nieuwsberichten over de organisatie staan.

  • Storytelling: alle verhalen samen, bijvoorbeeld je hele YouTube-kanaal, vertellen het verhaal van je organisatie. Door de nieuwsfeiten toe te voegen is je verhaal compleet en up-to-date.

  • Met video genereer je meer aandacht dan met alleen tekst.

  • Video krijgt veel punten van Google, dus je eindigt hoger in de zoekresultaten.