Behaal een flinke snelheidswinst door alle afbeeldingen op je Magento shop te optimaliseren. Dit kan een tijdrovende klus zijn maar niet op ons Hypernode platform. Daar hebben we een gave feature die je hierbij kan helpen: de Image optimizer. Deze optimaliseert automatisch al je afbeeldingen. In dit artikel leggen we je stap voor stap uit hoe je binnen enkele minuten de Image optimizer van Hypernode kan instellen.
@Hypernode_com hypernode-image-optimizer is pretty effective “Optimization profit over all files: 502812 KB (82%)”. Thanks for that!
— Sander Mangel (@sandermangel) March 16, 2015
Weten hoeveel ruimte je kunt besparen?
Log in met SSH op je Hypernode omgeving en tik het volgende commando.
1 2 3 4 5 6 7 8 |
$ hypernode-image-optimizer ~/public/media [46%] /data/web/public/media/custom_options/quote/h/o/46f68f14df54b639546a583a942cd7c2.png (255 KB smaller) [50%] /data/web/public/media/custom_options/quote/h/o/8a45641021fb82d172b9712f6631c49a.png (405 KB smaller) [30%] /data/web/public/media/custom_options/quote/p/l/a74e500c8e08c48e54ea65d8422bc68e.png (114 KB smaller) [77%] /data/web/public/media/custom_options/quote/L/i/8969288f4245120e7c3870287cce0ff3.jpg (426 KB smaller) [ 0%] /data/web/public/media/custom_options/quote/T/a/6bfddcd09ff981b24fc96e442700f2df.png (0 KB smaller) [... long list of files ...] Optimization profit over all files: 226204 KB (30%) |
Er is nu nog niks aangepast maar er is berekend dat je 226MB (oftewel 30%) van je schijfruimte kunt besparen door je afbeeldingen te optimaliseren.
De geoptimaliseerde afbeeldingen opslaan
Gebruik onderstaand commando om de oude afbeeldingen te vervangen door de geoptimaliseerde afbeeldingen. Zorg ervoor dat je van te voren een back-up maakt van al je media files.
1 2 3 4 5 6 7 8 |
$ hypernode-image-optimizer ~/public/media [46%] /data/web/public/media/custom_options/quote/h/o/46f68f14df54b639546a583a942cd7c2.png (255 KB smaller) [50%] /data/web/public/media/custom_options/quote/h/o/8a45641021fb82d172b9712f6631c49a.png (405 KB smaller) [30%] /data/web/public/media/custom_options/quote/p/l/a74e500c8e08c48e54ea65d8422bc68e.png (114 KB smaller) [77%] /data/web/public/media/custom_options/quote/L/i/8969288f4245120e7c3870287cce0ff3.jpg (426 KB smaller) [ 0%] /data/web/public/media/custom_options/quote/T/a/6bfddcd09ff981b24fc96e442700f2df.png (0 KB smaller) [... long list of files ...] Optimization profit over all files: 226204 KB (30%) |
Ga naar je site, leeg je cache met CTRL-F5 (Mac: CMD-R) en bekijk het resultaat. Waarschijnlijk zie je geen verschil behalve dat je pagina veel sneller geladen wordt. Als je tevreden bent kun je een cronjob instellen waarmee nieuwe afbeeldingen automatisch elke nacht geoptimaliseerd worden.
1 2 3 4 5 6 7 8 |
$ hypernode-image-optimizer ~/public/media [46%] /data/web/public/media/custom_options/quote/h/o/46f68f14df54b639546a583a942cd7c2.png (255 KB smaller) [50%] /data/web/public/media/custom_options/quote/h/o/8a45641021fb82d172b9712f6631c49a.png (405 KB smaller) [30%] /data/web/public/media/custom_options/quote/p/l/a74e500c8e08c48e54ea65d8422bc68e.png (114 KB smaller) [77%] /data/web/public/media/custom_options/quote/L/i/8969288f4245120e7c3870287cce0ff3.jpg (426 KB smaller) [ 0%] /data/web/public/media/custom_options/quote/T/a/6bfddcd09ff981b24fc96e442700f2df.png (0 KB smaller) [... long list of files ...] Optimization profit over all files: 226204 KB (30%) |
Voeg onderstaande code toe.
1 2 3 4 5 6 7 8 |
$ hypernode-image-optimizer ~/public/media [46%] /data/web/public/media/custom_options/quote/h/o/46f68f14df54b639546a583a942cd7c2.png (255 KB smaller) [50%] /data/web/public/media/custom_options/quote/h/o/8a45641021fb82d172b9712f6631c49a.png (405 KB smaller) [30%] /data/web/public/media/custom_options/quote/p/l/a74e500c8e08c48e54ea65d8422bc68e.png (114 KB smaller) [77%] /data/web/public/media/custom_options/quote/L/i/8969288f4245120e7c3870287cce0ff3.jpg (426 KB smaller) [ 0%] /data/web/public/media/custom_options/quote/T/a/6bfddcd09ff981b24fc96e442700f2df.png (0 KB smaller) [... long list of files ...] Optimization profit over all files: 226204 KB (30%) |
Resultaat: elke nacht worden om 4.30 uur alle nieuwe afbeeldingen (die je de voorgaande dag toegevoegd hebt) geoptimaliseerd.
Tips voor gevorderden
Je kan zelf twee instellingen van de image optimizer aanpassen; het compressie level en de maximale grootte die een afbeelding mag hebben.
- De image optimizer gebruikt een image compressie level van 90% voor JPG afbeeldingen. Dit is een veilige en beetje conservatieve waarde. Vaak wordt een compressie level van 80% aangeraden. Mocht je het compressie level aan willen passen dan kan je
hypernode-image-optimizer --quality 80
gebruiken. Zie onderstaande afbeelding om de kwaliteit bij verschillende compressie levels te vergelijken.
- Standaard staat de image optimizer zo ingesteld dat alle afbeeldingen die groter zijn dan 1000 pixel verkleind worden. Als je de maximale grootte wilt veranderen (naar bijvoorbeeld 2000 pixels) kan je dit commando gebruiken
hypernode-image-optimizer --size 2000
.
Verder lezen:
- Alles over het Hypernode platform: de technologie, de voordelen, features en pakketten
- Labtest: Magento webshops zijn sneller op Hypernode technologie
- Alles over het versnellen van je site: themapagina Snelheid