Regelmatig kom ik websites tegen, met afbeeldingen die veel groter op de server staan opgeslagen, dan dat ze op de website worden weergegeven. Dit heeft 2 grote gevolgen:

• Vertraging bij het laden van de site
• Meer schijfruimte op de server nodig om de website op te slaan en daarmee natuurlijk ook grotere backups

Natuurlijk is het het beste om afbeeldingen al te optimaliseren met bijvoorbeeld Adobe Photoshop voordat je ze op de site zet, maar zelfs dan blijken ze nog wel eens an de grote kant te zijn. Het komt echter vaker voor dat je geen Photoshop tot je beschikking hebt of er blijken al heel veel te grote afbeeldingen op de site te staan en je wil ze niet allemaal handmatig gaan optimaliseren en vervangen. Daarom zijn er een paar handige plugins, die het je een stuk makkelijker kunnen maken.

Hopelijk is het niet nodig om te zeggen, maar zorg uiteraard dat je een goede backup hebt, voordat je aan de slag gaat!

Imsanity

Afbeeldingen die in te grote afmetingen zijn geüpload naar de site, bijvoorbeeld rechtstreeks vanaf een camera zonder eerst te verkleinen zijn misschien wel 10 megapixels (of nog veel groter), wat neer komt op een afmeting van 3648 x 2736 pixels. De meeste afbeeldingen in pagina’s of berichten worden echter niet groter getoond dan bijvoorbeeld 1024 pixels breed. Dat zou al ruim een factor 10 schelen qua bestandsgrootte.

Om alle bestaande afbeeldingen in een bulkverwerking te verkleinen, kun je deze plugin gebruiken. Zorg na de installatie dat je de maximale afmetingen instelt via Instellingen – Imsanity:

Wanneer je afbeeldingen die eigenlijk in de 3e categorie vallen eerst uploadt in de media bibliotheek, dan zou je die instellingen (bij de 2e categorie) ook op 2048 x 2048 kunnen laten staan.

Sla de wijzigingen op en klik onderaan de pagina op “Zoek afbeeldingen…”. Controleer of er geen afbeeldingen bij staan, die niet verkleind mogen worden en klik vervolgens op “Resize Selected Images”. Dit proces kan afhankelijk van het aantal te verwerken afbeeldingen en de snelheid van de server best een tijd duren, maar je kunt de voortgang volgen.

Wanneer je na afloop deze plugin actief laat, dan worden voortaan ook alle nieuwe afbeeldingen automatisch geoptimaliseerd.

Imsanity

EWWW Image Optimizer

Afgezien van de afmetingen kun je afbeeldingen ook comprimeren door overbodige informatie uit het bestand te verwijderen en zo nodig de kwaliteit iets te verlagen, zonder dat dit direct zichtbaar is voor het menselijk oog. Daar komt EWWW Image Optimizer om de hoek kijken.

Bij deze plugin kun je nog best wel wat instellingen naar wens aanpassen, maar de standaard instellingen voldoen over het algemeen wel, dus we gaan meteen naar Media – Bulk Optimaliseer. Klik vervolgens op “Scan voor niet geoptimaliseerde afbeeldingen”, waarna het aantal afbeeldingen getoond wordt dat is gevonden. Klik op Start optimalisatie en alles gaat verder vanzelf.

Ook deze plugin kun je geactiveerd laten om nieuwe afbeeldingen bij het uploaden automatisch te optimaliseren.

EWWW Image Optimizer

PNG to JPG

Afbeeldingen heb je in verschillende soorten. Naast foto’s heb je ook nog zogenaamde vectorafbeeldingen zoals logo’s en iconen of afbeeldingen met transparantie. Voor foto’s is JPG het beste bestandsformaat, terwijl de andere types vaak baat kunnen hebben bij een PNG afbeelding. Helaas zie ik ook vaak foto’s als PNG afbeeldingen op sites staan. Deze zijn daardoor echter een stuk  groter. We moeten ze dus omzetten naar JPG. Ook dat kan geautomatiseerd, al heeft het mijn voorkeur om het deels handmatig te doen, maar wel via de site. Met de plugin PNG to JPG is dit makkelijk.

Ga na de installatie naar Extra – PNG to JPG, en verwijder het vinkje bij het bewaren van de originele PNG bestanden op de server, omdat je anders geen ruimte vrij maakt:

Kies “Convert existing PNGs”. Wacht totdat de hele site is gescand op aanwezige PNG afbeeldingen. Je kan een afbeelding aanklikken voor een vergroting, waar je ook snel kan zien of er transparantie in de afbeelding zit. Betreft het gewoon een foto zonder transparantie, dan kun je deze omzetten naar JPG door de foto aan te vinken en zodra je klaar bent met selecteren te kiezen voor “Convert selected to JPG”.

Er vanuit gaande dat je voortaan het juiste bestandsformaat kiest voor afbeeldingen, kun je deze plugin weer verwijderen, zodra je klaar bent met het omzetten.

PNG to JPG

Voor het onderhoud van alle websites die ik in beheer heb, gebruik ik MainWP. Dit is een centraal dashboard, dat je zelf kunt installeren op een WordPress site, waarmee je verbinding kunt leggen met alle websites waar je de bijbehorende MainWP Client plugin op hebt geïnstalleerd.

Hiermee is vanuit een centrale locatie te controleren of er updates beschikbaar zijn en kunnen deze ook geïnstalleerd worden. Je kan de beveiliging en de backups in de gaten houden en nog veel meer.

Zelf doen of uitbesteden?

Wanneer je meerdere sites hebt en in de gaten wil houden, dan is dit dus een ideale oplossing. Maar mocht het onderhoud toch niet je hoofdbezigheid zijn, dan kun je het uiteraard ook aan mij uitbesteden, door een onderhoudsabonnement af te sluiten.

MainWP Child plugin

Wanneer ik je site onderhoud, dan zie je bij je plugins ook de MainWP Child plugin staan. Laat deze altijd geactiveerd staan, zodat de koppeling met mijn dashboard blijft werken. Wanneer de plugin toch onverhoopt een keer gedeactiveerd moet worden, laat mij dan even de reden weten. Zo komen we niet voor verrassingen te staan en kan ik de koppeling herstellen. Bovendien kan ik dan met je meedenken over het probleem dat je blijkbaar probeert op te lossen.

Afgelopen week heb ik weer een aantal sites verhuisd, die gebouwd waren op een ontwikkelomgeving en nu ‘live’ gezet moesten worden. Meestal is dat een uurtje werk, maar elke keer is het weer een verrassing of er geen vreemde problemen optreden. Dat was deze week helaas ook 2x raak.

Complexe redirect oplossing

Op 1 site was een redirect actief. Meestal gaat dat via een instelling in het controlepaneel van de hostingprovider of een instelling in bijvoorbeeld .htaccess. In dit geval bleek er een extra WordPress installatie te bestaan, waar door middel van een redirect plugin de doorverwijzing was gemaakt. Helaas bleek deze constructie ook bij mijn opdrachtgever niet bekend te zijn en kon ook de hostingprovider dit niet snel vinden. In het doolhof van het controlepaneel van die hostingprovider was alles zo goed verstopt, dat ik hier zelf ook niet zomaar achter kwam.

Toen de oorzaak eenmaal boven water was, bleek het opruimen ervan niet goed mogelijk door een fout in het controlepaneel, waardoor dit proces bleef hangen. Dat moest dus door naar de technische dienst, die op dat moment natuurlijk niet meer aanwezig was. De volgende ochtend bleek de doorverwijzing te zijn verdwenen zonder dat men mij daar conform afspraak van op de hoogte had gebracht. De bezoekers kregen daardoor nu een foutmelding te zien, omdat ook de database van de nieuwe site verwijderd bleek te zijn. Gelukkig had ik een backup, zodat ik opnieuw een database kon aanmaken en de data terug kon zetten. Nadat ook nog een probleem in het thema opdook (die op dezelfde omgeving in de ontwikkelinstallatie niet moeilijk had gedaan) en we dat hadden verholpen, kwam eindelijk de nieuwe site in beeld. Inmiddels zat er wel 5 à 6 uur werk in, maar de missie was geslaagd!

Het zit ‘m in de details

Voor een andere site was alles ook vrij simpel overgezet, maar bij het laden van de pagina, kwam er een lange reeks van dezelfde foutmelding. Alles nagekeken en geprobeerd, maar we kregen het niet aan de gang. Ook in dit geval draaide de site prima op de ontwikkelomgeving en was er niet echt iets te vinden, dat het verschil kon verklaren. Totdat iemand een tip gaf over een richting, waarin ik al had gekeken, maar daar stond ook nog iets anders bij dat mijn aandacht trok. In WordPress is er namelijk sprake van een upload_path, waar de afbeeldingen bijvoorbeeld worden opgeslagen. Standaard staat dit ingesteld op “wp-content/uploads”, maar bij deze site bleek dat te zijn gewijzigd naar “/wp-content/uploads”. Geen idee waarom, maar waarschijnlijk is het ooit een keer gewijzigd geweest en verkeerd terug gezet. Zo zie je maar, dat iets heel kleins al grote gevolgen kan hebben.