When optimizing your website you will notice that images, and static resources are the most delaying the load of your website. You can use numerous tool to optimize them on the fly and cache them in WordPress or Joomla cache. I personally prefer to optimize them for once and save them on the disk.
The latter is requiring some access to the Linux command line and is therefore reserved for the most tech oriented people. I am presenting here some tools: Guetzli and PNGQuant, uglifyJS but there are more available. At this point of time these tools are the best in their category.
Optimizing JPEG files
Guetzli is a Google JPEG encoder that aims for excellent compression density at high visual quality. Guetzli-generated images are typically 20-30% smaller than images of equivalent quality generated by libjpeg. Guetzli generates only sequential (non progressive) JPEG due to faster decompression speeds they offer.
Install it
apt install guetzli # linux brew install guetzli # macos # windows user should use binary releases https://github.com/google/guetzli/releases
It is recommended to always do a backup of the folder containing your images, just in case. (real men don’t do backup but they often cries). I run Guetzli recursively in all sub-folder using find
find . -type f -name "*.jpg" -exec guetzli {} {} \;
Optimizing PNG files
pngquant is a command-line utility and a library for lossy compression of PNG images. The conversion reduces file sizes significantly (often as much as 70%) and preserves full alpha transparency. Generated images are compatible with all web browsers and operating systems.
apt install pngquant # linux wget https://pngquant.org/pngquant.tar.bz2 # macos # windows user should use binary releases https://pngquant.org/pngquant-windows.zip
I use the same technique, running pngquant recursively in all sub-folder using find
find . -iname "*.png" -exec pngquant -f -ext .png --verbose {} {} \;
Optimizing JavaScript files
Warning: i do not recommend to optimize official files of WordPress or Joomla. Some build int scanner that checksum internal file may detect this changes as a security breach: new code checksum do not match official WordPress expect checksum anymore.
It can be use for plugins and your own custom JavaScript code through.
UglifyJS is a general-purpose JavaScript parser/compressor/beautifier toolkit.
find . -maxdepth 1 -iname "*.js" -exec uglifyjs --compress --mangle -o {} -- {} \;
Cédric Walter Blog 