Tag: website

Classic Cars Citroën DS

Optimaliseer je website: reSmush je foto’s!

Website optimalisatie is voor beheerders van websites, webwinkels en, in het bijzonder, fotografen een lastig verhaal. Foto’s op je website in een hoge kwaliteit zonder kwaliteitsverlies is geen makkelijke klus. Met WordPress, Joomla, Drupal, Magento en PrestaShop is dat echter een fluitje van een cent.

Bij optimalisatie van je website denken veel mensen in eerste instantie aan de lay-out, vindbaarheid in Google (SEO) en andere zaken. Maar er speelt ook een ‘technisch’ verhaal een rol in de optimalisatie. En door hier goed op te letten kun je (in principe) ook geld besparen!

Website optimaliseren

Waarom zou je je website moeten of willen optimaliseren?

  1. een website die geoptimaliseerd is sneller op het scherm bij de bezoeker. Vooral de ‘startpagina’ moet dus relatief snel laden. Een trage website is een afknapper. Mensen gaan geen 5-10 seconden wachten tot de pagina geladen is.
  2. Veel fotografie-websites en webwinkels zijn vaak erg traag omdat de (product)afbeeldingen in een hoge resolutie zijn of onvoldoende geoptimaliseerd voor internet. Dat is niet alleen jammer wegens de snelheid, het kost ook veel bandbreedte (het aantal mb’s dat mensen “downloaden” van je site) en opslagruimte. Eén foto in hoge resolutie is al snel 7 tot 10 mb groot;

performance verbetering optimalisatieHierdoor heb je dus én een trage website én potentiële hoge kosten én mensen die je website voortijdig verlaten én.. het leidt tot een lage google-ranking.

Voor deze casus ga ik uit van de website erbeefoto.nl die geoptimaliseerd is en een pagina-omvang van +/- 1Mb voor de startpagina heeft. De laadtijd is minder dan 2 seconden (gemeten door Pingdom, vanuit de EU en de VS is slechts een fractie hoger).

Ik heb dit vergeleken met een aantal websites (uiteraard ga ik geen namen noemen!) van fotografen uit de regio en sommige scoren vergelijkbaar, maar er zijn er ook diverse die met een laadtijd van >5 seconden erg slecht scoren.

Hoger in Google

Nu is ‘google ranking’ wel een buzz-word. Het “bovenaan in Google” is heel relatief. Veel mensen willen “bovenaan in Google”, vooral webwinkels natuurlijk, maar beseffen zich niet dat het “bovenaan staan” afhangt van de trefwoorden die mensen intikken (of zelfs volledige zinnen) in Google. Je kunt je eigen site en trefwoorden controleren via bijvoorbeeld deze website.

Daarnaast is er nog een andere weg om ‘hoog in Google’ te eindigen. Afbeeldingen worden veel gezocht door mensen, vooral foto’s. En één van mijn foto’s staat al tijden stijf bovenaan in de Google Image Search. Dit soort resultaten kun je ook beïnvloeden.

Besparen op kosten

Hoe meer ruimte en data je nodig hebt, hoe hoger de kosten voor je hosting. Door te besparen op data en opslag, kun je met een goedkoper hostingpakket toe. Dat is al de eerste winst. Wil je je werk verkopen via je website, dan is een trage website dus ook nog eens een hindernis op dat gebied. Veel mensen zullen niet wachten tot de site geladen is en vertrekken naar een ander. Dat heet de ‘bounce-rate’ (na één pagina, al dan niet helemaal geladen, vertrekken van een bezoeker). Een hoge bounce-rate is eveneens slecht voor je Google-ranking.

Er zijn dus meer dan genoeg redenen om je website ook ‘technisch’ te optimaliseren!

Hoe optimaliseer je je website?

Heel veel websites gebruiken een “Content Management Systeem” zoals WordPress. En daar ga ik in dit artikel ook van uit. Ook andere CMS-systemen zoals Joomla en Drupal en webwinkel-systemen zoals Magento en Prestashop kunnen profiteren van de oplossing die hier beschreven wordt.

Gaat het ten koste van de kwaliteit?

Voor fotografen een hele belangrijke vraag: “Gaat dat optimaliseren niet ten koste van de kwaliteit van mijn foto’s?!”. Je kunt daar in principe volmondig “Ja!” op zeggen want: het aantal pixels in de foto wordt minder. Echter, het antwoord is: “Nee!”.

Hoe kan dat? Dat heeft te maken met de beeldschermen. Digitale foto’s en afbeeldingen zijn in een enorm hoge resolutie. Omdat ze geschikt moeten zijn voor afdrukken in, uiteraard, hoge kwaliteit. Maar de PPI van een beeldscherm haalt bij lange na dat getal niet. Een beeldscherm kan simpelweg dat niet weergeven en dus gaat die ‘informatie’ al verloren voordat je het ziet omdat er een scherm ‘tussen’ je ogen en de afbeelding zit!

Bij een één megapixel-camera(..) hebben we het over 1 miljoen pixels. Een 5 megapixel digitale fotocamera kan foto’s maken met een resolutie van 2560 x 1920 pixels, bijna 5 miljoen pixels. Dat kun je simpelweg dus niet weergeven op een scherm. Er valt heel wat meer over te vertellen maar de conclusie zal duidelijk zijn. Afbeeldingen bedoeld voor op een scherm kun je behoorlijk optimaliseren. Aan het eind van dit artikel heb ik ook nog een voorbeeld hiervan uit de praktijk.

Voor je begint

Ik neem aan dat het overbodig is te melden, maar toch. Maak altijd een backup van je website voor je begint. Altijd! vertrouw er niet op dat “de hostingfirma” dat wel gedaan heeft of dat de risico’s wel mee vallen. De vraag is namelijk niet óf het fout gaat maar wannéér het fout gaat. Ik heb het in de praktijk helaas toch wel een paar keer gezien bij klanten en als je hele website ‘weg’ is door een plugin of service die faalt is dat vreselijk zuur!

WordPress

De beste en populairste oplossing voor het optimaliseren van afbeeldingen is reSmush. Er zijn diverse plugins beschikbaar waaronder de eigen plugin van reSmush via de WordPress website. Maar je kunt een stap verder zetten en het kost weinig moeite. De bovenstaande afbeelding, een screenshot, is (origineel) 829,5 kB. Nadat reSmush zijn werk doet..?

“The file was compressed from 810.02 KB to 268.36 KB saving 66.87”

Met de plugin WP Optimize kun je niet alleen je afbeeldingen optimaliseren (door slimme compressie via reSmush) maar ook allerlei andere zaken optimaliseren in je wordpress website zoals: tabellen optimaliseren, revisies van documenten verwijderen én: caching gebruiken. Door “caching” wordt je website vele malen sneller dan de standaard WordPress website.

De reden is dat pagina’s worden opgeslagen in een tijdelijk bestand en niet elke keer het hele WordPress-systeem een pagina interactief moet genereren. Daarmee wordt je website tevens minder afhankelijk van de kracht van de server (en de drukte op dat moment op de server). Een handige ‘alles in één’ tool dus!

In een andere WordPress website welke ik beheer (zie afbeelding hiernaast) bespaarde ik minder ruimte op de foto’s omdat die door een eerdere plugin al waren geoptimaliseerd. Toch was er nog ruimte voor verbetering.

Overige systemen

Voor Joomla, Prestashop, Magento en andere CMS-system en webwinkels heeft de reSmush website diverse plugins beschikbaar.

Voorbeeld foto

De “proof is in the pudding” zeggen ze altijd, dus neem ik onderstaand de proef op de som. Deze foto was oorspronkelijk 4,58Mb/20mp/350×350 dpi. Ik heb ‘m iets uigesneden en verkleind naar 1600px op de lange zijde en daardoor is de afbeelding nu 468Kb. Dat is al een aanzienlijk verschil.

klassieke auto zuidhorn

(originele foto 1600px lange zijde)

Met reSmush heb ik de foto als “gecomprimeerd” gemarkeerd, waardoor hij niet daadwerkelijk gecomprimeerd wordt maar in de originele resolutie blijft. Daarna heb ik de foto nog een keer naar de website geupload, en nu wel met reSmush laten comprimeren.

(afbeelding bewerkt door reSmush)

Zie je ook maar énig verschil? Voor het menselijk oog is dit, door het computerscherm, niet waarneembaar!

De afbeelding is nu 410Kb. Dat is niet wereldschokkend, maar bedenk dat wanneer je een site hebt met een paar honderd of zelfs duizenden foto’s de winst enorm is. En als op een pagina 10 foto’s geladen moeten worden is een verschil van 50kb/foto toch al weer een halve Mb. In de praktijk is de winst vaak groter zelfs. Dat zorgt dus voor alle eerder genoemde voordelen zoals: minder schijfbeslag, minder datatransfer en bovenal een sneller ladende pagina!

Tot slot

Niet tevreden over het resultaat? In WP Optimze heeft reSmush heeft een ‘undo’ functie. Waarmee je het origineel kunt herstellen. Heel veel succes met het optimaliseren maar nogmaals: vergeet niet vóór je iets dergelijks gaat doen: backup maken!

 

Waar komen jullie toch vandaan (en wat bekijk je)?

“Waar komen jullie toch vandaan”, zo zong Vader Abraham ooit zijn blauwe smurfen toe.. dat is ook altijd een leuke vraag voor de eigenaar van een website. En: wat bekijkt men zoal op een website?

Dit soort gegevens zijn, vooral voor commerciële websites, van levensbelang. En voor mij zijn ze als publicist van heel veel foto’s en blogstukjes over dieren, fotografie, software, fotobewerking en fietsen-met-de-camera verhaaltjes natuurlijk ook van belang want: je wilt toch wel graag weten of mensen ook daadwerkelijk je website bekijken? Waar dóe je het anders immers voor?

35.000+ bezoekers in één jaar

Dat deze website kennelijk (tot mijn vreugde!) in een behoefte voorziet blijkt wel. In één jaar tijd meer dan 35.000 bezoekers! Ongelofelijk! Dat zijn er zo’n 100 per dag en daar ben ik echt blij mee. Het aantal bezoekers lijkt wat gedaald ten opzicht van juni vorig jaar maar dat heeft een goede reden: ik heb de beveiliging opgeschroefd. Er waren veel ‘bezoekers’ die de statistiek vervuilden (hackers). Wat ook maar weer eens aantoont dat statistiek nuttig is: zo onderken je ‘probleemgebieden’!

TOP 10-berichten

Wat zijn de best bekeken stukjes op deze website het afgelopen jaar? De Top10!

1. De AVG en (amateur)fotografie
2. Kasteel Olt Stoutenburght, Blesdijke (De Blesse)
3. Gratis Foto’s en Video bewerken met Linux, OSX én Windows!
4. Fotoverslag Ballonfiesta Meerstad (Groningen)
5. Review: Sony Cybershot DSC-HX350
6. Rijtuigmuseum Leek 60 jaar – rijtuigen, paarden en mensen
7. Bunkers bij Trimunt (Marum) – Duitse Radarstelling
8. Op pad met een DAF 33
9. Fotobewerking met FastStone (gratis): retoucheren
10. Vogels in Nationaal Park Lauwersmeer (Jaap Deensgat)

Altijd een verrassing! Sommige berichten had ik het echt niet van verwacht dat ze zó vaak bekeken zouden worden. Van sommige andere verwacht je dat ze “het wel goed zullen doen” en dat blijkt dan helemaal niet het geval te zijn. Ik blijf dan ook maar gewoon posten wat ik leuk vind en zie vanzelf of er naar gekeken wordt 🙂

En, waar komen jullie vandaan?

Tot slot het antwoord op de vraag waar de bezoekers vandaan komen. Wederom de Top10.

Bezoekers komen dus van over de hele wereld, maar de meeste toch uit Nederland en de VS (procentueel). Toch opmerkelijk dat veel mensen uit landen komen waar geen Nederlands gesproken wordt. Alleen, de reden er voor is simpel: Google Image Search.

 

Portfolio van 500px website verwijderd

Wat gebeurt er als een prachtige website in handen komt van een bedrijf dat alleen maar commerciële doelen na lijkt te jagen? Mensen gaan weg..!

Jarenlang heb ik een portfolio gehad op 500px, een site heel geschikt voor (hobby)fotografen. Helaas, waar ik al bang voor was, heeft de overname van 500px door een (grote) Chinese marktpartij er toe geleid dat de website steeds minder goed bruikbaar werd.

De laatste “update” van de site was de druppel voor mij. De layout van de feed toonde niet meer mooi de foto’s van mij en andere fotografen maar een raster met allemaal foto’s .. en daarnaast heel veel foto’s er tussendoor die duidelijk bedoeld zijn als “clickbait” met andere woorden: niet de foto’s van mensen die je volgt maar foto’s die de eigenaar graag onder de aandacht wil brengen.

Einde 500px dus voor mij. En ik hoorde van andere gebruikers dat ze ook helemaal niet tevreden waren en overwegen weg te gaan. Dergelijke sites snappen kennelijk niet wat het woord ‘klantenbinding’ inhoudt want er zijn veel betalende(!) fotografen op deze site (ik was ook betalend lid).

Alternatieven zijn er genoeg. Zoals Instagram natuurlijk en YouPIC. Natuurlijk kan je ook gewoon je eigen site maken (zoals deze). Als je hulp zoekt daarvoor, kun je contact met mij opnemen. Zie daarvoor mijn bedrijfswebsite op https://www.brinkhost.nl/.