Optimaliseren snelheid - 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!
 |
 |
| 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 Terminal
- Imagecrunch uitvoeren vanuit jouw computer (Mac/OS X)
- Nieuwe afbeeldingen wekelijks automatisch optimaliseren met een cronjob
Imagecrunch uitvoeren vanuit cPanel
- Open het betreffende cPanel account waar je de afbeeldingen wilt optimaliseren
Navigeer naar het icoon 'Terminal' en open dit
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.
Typ/plak onderstaande in om naar de juiste map te gaan (in het voorbeeld de uploads map van WordPress):
cd public_html/
- en druk op enter. Je ziet nu [yourusername@s1110 public_html]$
- 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 {} \;
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.
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@s1110 public_html]$ weer op je scherm ziet.
Uitloggen
Om de verbinding te verbreken typ je:
exit
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):
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>&