On Server Image Optimization
#1
[Image: KX2lHei.png]



[Image: OoAXhEh.png]

This tutorial will guide you through multiple simple instructions to optimize images directly on your server without any 3rd party services (i.e: Yahoo Smushit). Two command line image optimizers named jpegoptim (for jpg/jpegs) and optipng (for pngs) will be used during this tutorial. Our starting point is a WordPress blog with some pictures that need to be optimized to decrease the loading time of the blog and save some megabytes of traffic.


[Image: uCx1Xag.png]

jpegoptim: "jpegoptim is a utility for optimizing JPEG files. It provides lossless optimization (based on optimizing the Huffman tables) and "lossy" optimization based on setting a maximum quality factor."[1]

optipng: "OptiPNG is a PNG optimizer that recompresses the image files to a smaller size without losing any data. It works in a manner similar to pngcrush, but it has a wider automatic search space (leading to possibly a better compression), and it runs faster."[2]

[1] Freecode - jpegoptim: http://freecode.com/projects/jpegoptim
[2] Freecode - OptiPNG: http://freecode.com/projects/optipng


[Image: RdKuJaD.png]

Debian/Ubuntu and similar Linux distributions
Code:
apt-get install optipng jpegoptim -y

CentOS/Scientific Linux/Fedora and similar Linux Distributions

Fedora
Code:
yum install optipng jpegoptim -y

Based on RHEL 5 (not recommended)
Code:
rpm -ivh https://dl.fedoraproject.org/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm; yum install optipng jpegoptim -y

Based on RHEL 6
Code:
rpm -ivh https://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm; yum install optipng jpegoptim -y

Based on RHEL 7
Code:
yum install optipng libjpeg -y; rpm -ivh ftp://ftp.pbone.net/mirror/download.fedora.redhat.com/pub/fedora/epel/7/x86_64/j/jpegoptim-1.4.1-2.el7.x86_64.rpm

Arch Linux and Linux distributions based on Arch Linux
Code:
pacman -S optipng jpegoptim

Other Linux distributions
For other Linux distributions please consult the documentation of their package managers and search for both tools or compile both tools from their sources. Unfortunately it is impossible for me to write installation instructions for all the Linux distributions out of the very huge Linux distribution pool.


[Image: 6VL0try.png]

jpegoptim

1. Change the directory to the folder that contains the jpg/jpeg images you want to optimize. In case of a Wordpress blog it would be something like .../wp-content/uploads/ for uploaded images that were uploaded through the Wordpress media uploader.
Code:
cd /var/www/myblog.com/wp-content/uploads/

2. Now use the command below to find all jpg/jpeg images in the sub folders of uploads and pass them to jpegoptim for the optimization process.
Code:
find . -iname "*.jp*g" -type f -print0 | xargs -0 jpegoptim -o --strip-all

Output of the optimization process below.
[nopoints]

Terminal

./2014/08/Intel-Logo.jpg 793x537 24bit JFIF [OK] 54696 --> 48915 bytes (10.57%), optimized.
./2014/08/house_labels_comp.jpg 720x540 24bit JFIF [OK] 84105 --> 84105 bytes (0.00%), skipped.
./2014/08/wordpress-28.jpg 700x444 24bit JFIF [OK] 90421 --> 90421 bytes (0.00%), skipped.
./2014/08/large_0709-stanford-car-01.jpg 700x394 24bit JFIF [OK] 187060 --> 183177 bytes (2.08%), optimized.
./2014/08/WWW.jpg 620x388 24bit JFIF [OK] 45329 --> 44031 bytes (2.86%), optimized.
./2014/09/Marmot-edit1-cool.jpg 800x600 24bit Adobe JFIF [OK] 362997 --> 336216 bytes (7.38%), optimized.

[/nopoints]

All jpg/jpeg images that could be optimized have been optimized now. As seen in the example above I could save up to almost 11% of size. With a huge quantity of images that can be optimized a lot of space and traffic can be saved. Optimized images decrease the size of the site and therefor the loading time of the site.


OptiPNG

1. Do step one of jpegoptim to change directory to the folder with the png images you want to optimize.

2. Use the command below to find all pngs and pass them to OptiPNG for the optimization process.
Code:
find . -iname *.png -print0 | xargs -0 optipng -o7 -preserve

Output of the optimization process below.
Spoiler: show
[nopoints]

Terminal


OptiPNG 0.6.4: Advanced PNG optimizer.
Copyright © 2001-2010 Cosmin Truta.

** Processing: ./09/mysql.png
256x256 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 38658 bytes
Input file size = 39632 bytes

Trying:
zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 38651
zc = 9 zm = 9 zs = 1 f = 5 IDAT size = 38620
zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 38552

Selecting parameters:
zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 38552

Output IDAT size = 38552 bytes (106 bytes decrease)
Output file size = 39526 bytes (106 bytes = 0.27% decrease)

** Processing: ./09/wordpress_logo.png
338x338 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 85175 bytes
Input file size = 85269 bytes

Trying:
zc = 9 zm = 9 zs = 0 f = 0 IDAT size = 84164
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 83962

Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 83962

Output IDAT size = 83962 bytes (1213 bytes decrease)
Output file size = 84056 bytes (1213 bytes = 1.42% decrease)

** Processing: ./09/shiny-php-versions-white.png
1764x1148 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 3x8 bits/pixel, RGB
Input IDAT size = 335577 bytes
Input file size = 336172 bytes

Trying:
zc = 9 zm = 9 zs = 0 f = 1 IDAT size = 329876
zc = 9 zm = 8 zs = 0 f = 1 IDAT size = 328680
zc = 9 zm = 9 zs = 1 f = 1 IDAT size = 327984
zc = 9 zm = 8 zs = 1 f = 1 IDAT size = 326745
zc = 9 zm = 9 zs = 0 f = 2 IDAT size = 322498
zc = 9 zm = 8 zs = 0 f = 2 IDAT size = 320140
zc = 9 zm = 8 zs = 1 f = 2 IDAT size = 318347
zc = 9 zm = 9 zs = 0 f = 5 IDAT size = 312446
zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 310646
zc = 9 zm = 9 zs = 1 f = 5 IDAT size = 307922
zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 306436

Selecting parameters:
zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 306436

Output IDAT size = 306436 bytes (29141 bytes decrease)
Output file size = 306551 bytes (29621 bytes = 8.81% decrease)

[/nopoints]

All png images have been optimized as much as it was possible. And as at the end of the jpegoptim usage instruction the size of the images has decreased so the size of the site has decreased and therefor the loading time of the size has, too.


[Image: scPXYw7.png]

Thank you for reading another of my tutorials. If you have any question or concern feel free to ask it or talk about it.
#2
jpegrescan, jpegmini, adept...

pngquant, zopflipng...

might as well just use imagealpha and imageoptim.
Thanks to FreeVPS for the, er, free VPS 7!
#3
Yet another cool tut Smile This gonna help me a lot since I have more than 1000 images in dir and never tried 3rd party plugins for this job.
output is :


Quote:[root@****]# find . -iname *.jp*g -type f -print | xargs -0 jpegoptim -o --strip-all

jpegoptim: skipping special file: ./2014/12/****s-150x150.jpg
./2014/12/asdasd-300x141.jpg
./2014/12/fhsfAsfasf-300x108.jpg
./2014/12/fjhsdfsdf-200x140.jpg

Help please
#4
I've not noticed it before but I missed a zero in the command for jpegoptim which caused it to simply print out the found jpg/jpeg images but not pass them to jpegoptim. It's been fixed now in the guide.

Situnrocks please execute the following command:
Code:
find . -iname *.jp*g -type f -print0 | xargs -0 jpegoptim -o --strip-all
#5
Yeah this works fine and smooth and too fast. Also passed the test of Optimize Images on Google Page Speed Insights Smile
#6
But optimizing a lot of files might get a bit cumbersome . Nice tute though. Did not know all these were possible Tounge
Many thanks to Freevps, Chris (cw1998), The Guy( ID 4810), optimus, GHP and the other  staff members.
#7
In case it would get cumbersome you should plan it in as a maintenance and do it when the traffic level is on the low. Already optimized images will be skipped so on the second run it's much less work for the server. The best would be of course to optimize the images before they get onto the server.
#8
Facing this issue :


Code:
[root@** uploads]# cd 2015
[root@** 2015]# find . -iname *.jp*g -type f -print0 | xargs -0 jpegoptim -o --strip-all
xargs: jpegoptim: Argument list too long
[root@** 2015]# cd 06
[root@** 06]# find . -iname *.jp*g -type f -print0 | xargs -0 jpegoptim -o --strip-all
find: paths must precede expression
Usage: find [-H] [-L] [-P] [path...] [expression]


Either list too long error, in sub dir also another error.

Any solutions ?
#9
No, actually not. It should work as is. Maybe your terminal turned some character around into a different from copying and pasting? This can happen! Sometimes a - is not a - if copied from a site into the terminal and commands stop working.

It works for me:
Code:
[root@xxx uploads]# find . -iname *.jp*g -type f -print0 | xargs -0 jpegoptim -o --strip-all
./2010/08/gcf_lib0.jpg 1388x612 24bit N Exif XMP JFIF  [OK] 190340 --> 174637 bytes (8.25%), optimized.
./2010/08/gcflib8-1024x672.jpg 1024x672 24bit N JFIF  [OK] 168932 --> 158510 bytes (6.17%), optimized.
./2010/08/gcf_lib0-150x150.jpg 150x150 24bit N JFIF  [OK] 7327 --> 6746 bytes (7.93%), optimized.
./2010/08/gcf_lib0-1024x451.jpg 1024x451 24bit N JFIF  [OK] 124748 --> 118435 bytes (5.06%), optimized.
./2010/08/gcflib8-150x150.jpg 150x150 24bit N JFIF  [OK] 7517 --> 6863 bytes (8.70%), optimized.
...


The only thing I can think of: maybe some of your images have a extremely long name?
#10
I just tested the same on 2014 dir it worked, but not in 2015 or any sub dir. Also I'm sure about its not long name issue.
Also tried on another servers 2015 dir worked. Never faced such issue, its ofcourse due to something wrong in that dir.




Users browsing this thread: 1 Guest(s)