Afbeeldingen optimaliseren met imagecrunch

We hebben recentelijk een nieuwe tool gelanceerd in cPanel genaamd Hoasted Image Optimizer. Deze is gemakkelijker in gebruik dan Image Crunch zoals onderstaand uitgelegd.

Deze handleiding is daarom met name interessant als je een andere afbeeldingsmap hebt dan /wp-content/uploads/ , als je alleen de laatste afbeeldingen wilt optimaliseren of als je automatisch de nieuwste afbeeldingen wekelijks wilt laten optimaliseren.

Wat is de Hoasted beeldoptimalisatie tool?

Hoasted imagecrunch gebruikt slimme compressietechnieken om de bestandsgrootte van je PNG en JPEG files te verkleinen. Door het selectief verminderen van het aantal kleuren in de afbeelding zijn er minder bytes nodig om de gegevens op te slaan. Het effect is bijna onzichtbaar voor de bezoekers van je website, maar het maakt een groot verschil in de bestandsgrootte. Dit bespaart niet alleen ruimte op je account, maar versnelt ook de laadtijden van de pagina's op je website enorm!

Hoasted beeldoptimalisatie tool Hoasted beeldoptimalisatie tool
Voorbeeld Originele Afbeelding
Grootte 319kb
Voorbeeld Geoptimaliseerde Afbeelding
Grootte 104kb

Bij Hoasted hebben we imagecrunch ingebouwd in ons hosting platform. Volg onderstaande stappen om deze te gebruiken. Hou er rekening mee dat dit proces arbeidsintensief is, het is daarom raadzaam om deze stappen uit te voeren op een moment dat je je website niet aan het bewerken bent of andere onderhoudswerkzaamheden aan het uitvoeren bent.


Inhoud:

Imagecrunch uitvoeren vanuit cPanel

  1. Open het betreffende cPanel account waar je de afbeeldingen wilt optimaliseren
  2. Navigeer naar het icoon 'Terminal' en open dit

    Terminal Icon

    Klik de bevestiging dat je bewust bent dat je hiermee wijzigingen aan je cPanel kunt doorvoeren en dat het belangrijk is de stappen goed te volgen.

  3. Typ/plak onderstaande in om naar de juiste map te gaan (in het voorbeeld de uploads map van WordPress):


cd public_html/

  1. en druk op enter. Je ziet nu [yourusername@s1110 public_html]$
  2. Start JPEG imagecrunch opVoer om al je JPEG afbeeldingen te verkleinen het volgende in (je kunt deze regel ook gewoon plakken):

find . -type f -name "*.jpg" -exec jpegoptim --strip-all --all-progressive --max=90 {} \;

  1. druk op enter. Nu kun je zien dat al je JPEG afbeeldingen worden geoptimaliseerd. Dit proces kan een tijdje duren, afhankelijk van het aantal afbeeldingen.


    Let op: Als je naar een submap van je public_html map wil gaan typ je cd public_html/submapnaam voordat je doorgaat met de volgende stap.

  2. Start PNG imagecrunch

    De procedure om al je PNG afbeeldingen te optimaliseren is vergelijkbaar. Typ:


find . -type f -name '*.png' -exec pngquant --ext .png --force 256 {} \;

  1. Klik op enter. Het optimaliseren van PNG afbeeldingen duurt wat langer, en er wordt ook geen visuele update van de gecomprimeerde afbeeldingen getoond. De imagecrunch is klaar zodra je [yourusername@s1110 public_html]$ weer op je scherm ziet.
  2. Uitloggen

    Om de verbinding te verbreken typ je:

exit

  1. Je wordt nu uitgelogd en het volgende bericht wordt weergegeven ter bevestiging: Logout





Imagecrunch uitvoeren vanuit jouw computer (Apple/MacOS)

1. Open de Terminal en log in op je account

Log in op je account door het volgende in te typen:

ssh yourusername@sxxx.myfasthosting.com

Je gebruikersnaam is je cPanel username. Vervang 'yourusername'’sxxx' met de juiste gebruikersnaam en server (bijvoorbeeld johndoe1@s1101.myfasthosting.com).

Er wordt nu gevraagd om je wachtwoord. Gebruik je cPanel wachtwoord om door te gaan.

Let op: Als je dit bericht krijgt: ‘If you need shell access please contact support.’, laat het ons dan weten via support@hoasted.com. We zullen dan shell access inschakelen voor je.


2. Ga naar de juiste map

Nu ben je ingelogd en zie je [yourusername@s1115 ~]$ op het scherm. Je moet nu naar de map gaan met de afbeeldingen die je wil optimaliseren. Als je al je web afbeeldingen wil optimaliseren kun je naar de public_html map gaan.

Typ:

cd public_html/

en druk op enter. Je ziet nu [yourusername@s1115 public_html]$

Let op: Als je naar een submap van je public_html map wil gaan typ je cd public_html/submapnaam voordat je doorgaat met de volgende stap.



3. Start JPEG imagecrunch op

Voer om al je JPEG afbeeldingen te verkleinen het volgende in (je kunt deze regel ook gewoon plakken):

find . -type f -name "*.jpg" -exec jpegoptim --strip-all --all-progressive --max=90 {} \;

en druk op enter. Nu kun je zien dat al je JPEG afbeeldingen worden geoptimaliseerd. Dit proces kan een tijdje duren, afhankelijk van het aantal afbeeldingen.



4. Start PNG imagecrunch

De procedure om al je PNG afbeeldingen te optimaliseren is vergelijkbaar.

Typ:

find . -type f -name '*.png' -exec pngquant --ext .png --force 256 {} \;

Klik op enter. Het optimaliseren van PNG afbeeldingen duurt wat langer, en er wordt ook geen visuele update van de gecomprimeerde afbeeldingen getoond. De imagecrunch is klaar zodra je [yourusername@s1115 public_html]$ weer op je scherm ziet.

5. Uitloggen

Om de verbinding te verbreken typ je:

exit

Je wordt nu uitgelogd en het volgende bericht wordt weergegeven ter bevestiging: Connection to s1115.myfasthosting.com closed.

Wekelijkse optimalisatie van nieuwe afbeeldingen met een cronjob

Als de website regelmatig nieuwe afbeeldingen krijgt kun je middels een cronjob wekelijks de nieuwe afbeeldingen optimaliseren. ImageCrunch zal vaststellen dat de oude al geweest zijn en alleen de nieuwe afbeeldingen comprimeren.

Ga in cPanel > Advanced > Cronjobs

Kies bij Common Settings: Wekelijks (Weekly), vul bij tijdstip bijvoorbeeld 4  uur en bij dag in de week (Weekday) zondag in en plak de commando-regel bij Commando (Command):

Wekelijkse optimalisatie van nieuwe afbeeldingen met een cronjob

Commando's voor de cronjobs (op één regel):

find ~/public_html/wp-content/ -name '*.jpg' -type f -exec jpegoptim --strip-all --all-progressive --max=90 {} \; >/dev/null 2>&1

find ~/public_html/wp-content/ -name '*.png' -print0 | xargs -0 -P2 -L1 pngquant --ext .png --force 256 >/dev/null 2>&

Heeft dit artikel je goed geholpen? Dank voor je feedback! Er is een probleem opgetreden bij het verzenden. Probeer opnieuw.