Improve Websites SEO: Optimize images to Increase website loading performance on Linux server – Image Compress tools

Friday, 5th December 2014

Optimize-website-images-pictures-to-Increase-website-loading-performance-on-Linux-server_Image_Compress_tools-Improve-Websites_SEO
Part of our daily life as Web hosting system adminstrators is to constantly strive to better utilize our Linux / Windows hosting servers hardware.
Therefore it is our constant task to look for new better ways to optimize our Apache Sites and Webservers in order to return served application content light fast to keep the Boss and customers happy 🙂

There are things to tune up for better server performance and better CPU / memory utilization on both server Application server side as well as the website programming code backend, html and pictures / images

Thus it is critically important to not only keep the Webserver / PHP engine optimized but keep hosted sites  stored images and source code clean and efficient.

We as admins usually couldn't directly interfere with clearning the source code and often we have to host a crappy written sites with picture upload forms with un-optimized Image files that was  produced on old Photo Cameras, "Ancient" Mobile Mobiles, Win XP MS Paint, various versions Photoshop, Gimp etc.).

It is a well known fact that a big part from a Website User Experience is how fast the user loads a page, thus if HTML / CSS loaded images loads slow has a negative impact on user look & feel about website

Therefore by optimizing the size of hosted sites Images, you Save Network bandwidth and in some cases when Large Gallery sites HDD disk space.

On Linux, there are already a many command line tools to inspect and optimize (compress) the size of PNG, JPEG, GIF, BMP, PNM, Tiff Images, most famous ones are:

  • optipng – PNG optimizer that recompresses image files to a smaller size, without losing any information.
  • jpegoptim –   lossless JPEG optimization (based on optimizing the Huffman tables) and "lossy" optimization based on setting a maximum quality factor.
  • pngcrush – Recommended tool to use by Stoyan Stefanov (Yahoo Yslow Developer)
  • jpegtran – Recommended to use by Google 
  • gifsicle –  command-line tool for creating, editing, and getting information about GIF images and animations. 

It is hence useful to first run manually availale Linux image optimization tools (to get an idea what they do) and later automate them to run as scripts to optimize server stored images size and make pictures load faster on websites and thus improve End Users Experience and speed up Image content delivery to GoogleBot / YahooBot / Bing Crawlers which will make Search Engines to position server hosted sites better (more SEO Friendly).

 

  • How much percents of  space (Mega / Gigabytes ) Pictures compress can save you?

If you run it on 500MB image directory, you can probably save about 20 to 50MB of size, so don't expect extraordinary file reduce, however 5% to 10% reduce in size is not bad too. If you host 100 sites each with half gigas of data this would mean saving of 5GB of data and some 5GB from backups 🙂 At extraordinary cases you can expect 20% to 30% of storage reduce. For even better image compression you can try out GIMP's – Save for Web option.
 

  • Installing jpegtran, optpng, jpegoptim, pngcrush gifsicle on Debian / Ubuntu (deb based) Linux
     

apt-get install –yes libjpeg-progs optipng jpegoptim pngcrush gifsicle

 

  • Installing  jpegtran, optpng, jpegoptim, pngcrush, gifsicle on Fedora / CentOS / RHEL (RPM based distros)
     

yum -y install pngcrush libjpeg-turbo-utils opt-jpg opt-png opt-gif


gifsicle is not availale by default on Redhacks 🙂 but there is a RPM package for fedora from http://pkgs.repoforge.org/gifsicle/

 

Some examples of running image compression on GNU / Linux

  • optipng and jpegoptim optimize for all files in directory
     

cd /home/sites/

find . -iname '*.png' -print0 | xargs -0 optipng -o7 -preserve
find . -iname '*.jpg' -print0 |
 xargs -0 jpegoptim –max=90 –strip-all –preserve –totals


In jpegoptim command, the option –strip-all will strip any metadata including Exif data from images. For websites JPEG metadata is usually not needed, so usually its ok to strip them.

Above jpegoptim example will decrease slightly JPEG image quality to 90%. quality level of 90 is still high enough and website visitors are unlikely to spot any visible quality reduction / defects in the image.

 

  • pngcrush all files in a directory example
     

cd /home/sites/

for png in `find $IMG_DIR -iname "*.png"`; do
    echo "crushing $png …"
        pngcrush -rem alla -reduce -brute "$png" temp.png

 

    # preserve original on error
    if [ $? = 0 ]; then
        mv -f temp.png $png
        else
        rm temp.png
        fi
done

  • Run jpegtran on sites directory
     

find /home/sites -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} ;

 

  • Set a script to compress / reduce size of Sites Images


Here is a basic optimize_images.sh which I used earlier before and was reducing the overall images size just 5 to 10%, then I found the much improved version of optimize images shell script  (useful to  clear up EXIF picture data / And Comments from JPG / PNG files). The script execution could take very long time on large image directories and thus could cause a high HDD disk I/O, however if ran once a week at night time its not such a big deal. 

To set it to run on your server as a cronjob:
 

cd /usr/sbin/
wget -q https://www.pc-freak.net/bshscr/optimize_images2.sh
crontab -u root -e 


Sample cron job to run once a month on 10th and 27th in 3 o'clock AM:
 

 00 3 10,27 * * /usr/sbin/optimize_images2.sh 2>&1 >/dev/null


Also if you need to further optimize million of tiny sized PNG files Yahoo Smush.it service could be helpful. For compression maniacs its worthy to check out also TinyPNG Service (however be awre that this service compresses files with significant quality loss) making picture quality visibly deteriorated.

Besides optimizing server stored Pictures, here are some other stuff that helps in increasing server utilization / lower webpages loading time.

Starting up with the installation (when site is to use Apache + PHP) for its backend, the first thing to on the freshlyinstalled Linux server is to implement the following list of Apache common Timeout variables that help better scale the webserver for the CMS-es hosted, enable Webserver caching with (mod_deflate), enable eAccelerator tune PHP common php variable etc.

Other thing  I sometimes use to speed-up performance of Apache child responce time up to 20-30  is to Include into Virtualhost / httpd.conf Apache configuration any htacces mod_rewrite rules.

On too heavily loaded sites On-line stores / Large Company website portals with more than 60 000 – 100 000 unique IP visitors a day it is useful tip to disable completely Apache logging in access.log / error.log.

Often when old architecture websites are moved from older Linux OS version to a newer one with newer versions of Apache / PHP often sites are working without major code rework, but use many functions which are already obsolete and thus many WARNING messages crap is logged into php_error.log / error.log. Thus to save disk space and decrease hard disk I/O operations it is good to Disable PHP Notices and Warnings messages
 

Share this on:

More helpful Articles

Download PDFDownload PDF

Tags: , , , , , , , , , , , , , ,

3 Responses to “Improve Websites SEO: Optimize images to Increase website loading performance on Linux server – Image Compress tools”

  1. admin says:
    Google Chrome 39.0.2171.71 Google Chrome 39.0.2171.71 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36

    PngOut mirror for Linux is here – http://www.pc-freak.net/files/kzipmix-20091108-linux.tar.gz

    View CommentView Comment
  2. admin says:
    Google Chrome 39.0.2171.99 Google Chrome 39.0.2171.99 Mac OS X 10.8.5 Mac OS X 10.8.5
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36

    Make sure you check all your pictures output as it happened one time to me that some images got screwed up. Make sure you run the batsch script only in case if the images are coming in the same format and created by the same Graphic Editor other wise better off run it to a dir and do serious testing that all pictures are viewable after that ..

    View CommentView Comment
  3. admin says:
    Firefox 45.0 Firefox 45.0 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0

    Here is also two other tips to optimie:

    find . -iname ‘*.jpg’ -print0 | xargs -0 jpegoptim –max=90 –strip-all –preserve –totals;
    find . -iname ‘*.png’ -print0 | xargs -0 optipng -o7 -preserve;


    ./images/back.jpg 85×203 24bit Adobe [OK] 1044 –> 724 bytes (30.65%), optimized.
    ./images/322.jpg 100×100 24bit JFIF [OK] 3044 –> 2666 bytes (12.42%), optimized.
    ./images/257.jpg 100×100 24bit JFIF [OK] 2929 –> 2533 bytes (13.52%), optimized.
    Average compression (1636 files): 48.48% (10643k)

    ** Processing: ./selector-arrow.png
    13×10 pixels, 4 bits/pixel, 16 colors (1 transparent) in palette
    Input IDAT size = 81 bytes
    Input file size = 211 bytes

    Trying:
    zc = 9 zm = 9 zs = 0 f = 0 IDAT size = 68
    zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 68
    zc = 8 zm = 9 zs = 0 f = 0 IDAT size = 68
    zc = 8 zm = 8 zs = 0 f = 0 IDAT size = 68
    zc = 7 zm = 9 zs = 0 f = 0 IDAT size = 68
    zc = 7 zm = 8 zs = 0 f = 0 IDAT size = 68
    zc = 6 zm = 9 zs = 0 f = 0 IDAT size = 68
    zc = 6 zm = 8 zs = 0 f = 0 IDAT size = 68
    zc = 5 zm = 9 zs = 0 f = 0 IDAT size = 68
    zc = 5 zm = 8 zs = 0 f = 0 IDAT size = 68
    zc = 4 zm = 9 zs = 0 f = 0 IDAT size = 68
    zc = 4 zm = 8 zs = 0 f = 0 IDAT size = 68
    zc = 3 zm = 9 zs = 0 f = 0 IDAT size = 68
    zc = 3 zm = 8 zs = 0 f = 0 IDAT size = 68
    zc = 3 zm = 9 zs = 1 f = 0 IDAT size = 68
    zc = 3 zm = 8 zs = 1 f = 0 IDAT size = 68

    Selecting parameters:
    zc = 3 zm = 8 zs = 1 f = 0 IDAT size = 68

    Output IDAT size = 68 bytes (13 bytes decrease)
    Output file size = 198 bytes (13 bytes = 6.16% decrease)

    View CommentView Comment

Leave a Reply

CommentLuv badge