Alright, hello guys - I got done with my introduction blog post last week, and now we can get stuck into the good stuff.
I think one of the most important factors when working on website and server optimization and tweaking that is forgotten the most is images. We tend to just upload images, make sure they look good and do no more on the subject. Many of us have fast internet connections now and website images usually load in a snap - not like the 56k modem days where we saw them render piece by piece.
You've probably spent a lot of time on your HTML code and MySQL database tweaking and settings, but images are just as important, especially if you run an image heavy website such as TweakTown. My next blog post is going to deal with Content Delivery Networks (CDNs) to reduce the latency to users, so that not only images, script files and such load faster, but today we need to cover the first part in image optimization - and you guessed it, that is image optimization itself.
When you are running a website such as TweakTown that has many contributors uploading new images all the time, it is not physically possible to manually optimize every single image using for example a Windows optimization tool. Sure, you can upload your base website layout images and be done with it, but what about all the other images that get uploaded to articles and such? When you use an image that is not optimized, that increases hour website loading time and brings down your website speed score on many of the comparison engine sites out there. It's also bad for SEO since Google does factor in website performance into its rankings. And Google has said that this is something they intend to focus on, with possibly increasing importance - just look at Google's stance on making the web faster, they even make a Linux server plugin called mod_pagespeed for this very purpose. We'll cover that in another post later.
So, what is the best way to automatically optimize your website imagery? After a lot of looking around, several months ago, I decided on using the combination of Optipng and Jpegoptim. The first focused on PNG images (it will convert static GIF images to PNG as well), and the second focuses on JPEG images. In our testing, we saw cases where some images decreased in file size by an amazing 90%, most cases though we see around a 30% drop in size. Now, you may be thinking that is small, but consider you have many images on your site, and it adds up. Besides making your website load faster, you will also reduce the amount of bandwidth you use - and or a large website, that adds up quickly.
If you are experienced with Linux, you can download and install Optipng and Jpegoptim yourself. If not, ask a friend to do it or if you are on managed hosting or have a friendly host, ask them to install it for you. If you are on shared hosting, they should not have a problem with it and these programs will not affect other accounts on the same server box. Once install, run a test first and see the type of improvements you see on your images. Use these commands:
Optipng - find /home/user/public_html/images -iname *.png -print0 |xargs -n 1 -P 16 -0 /usr/local/bin/optipng -o7
Jpegoptim - find /home/user/public_html/images -iname *.jpg | xargs /usr/local/bin/jpegoptim --max=90 --all-progressive --strip-all --strip-com --strip-exif --strip-iptc --strip-icc
In the examples above, the commands will look for all images in the /home/user/public_html/images/ folder and optimize them. Do note that some images may already be optimized and if so, will be skipped or show no improvement. You can adjust the level of optimization depending on your needs. In the case of Jpegoptim, we set "--max=90", which means the image will only be compressed and tweaked by up to 10%, hence not affecting image quality that much visually.
If that worked, the next step is to add these commands to a CRON job. A CRON job is an automatic Linux service that runs set commands at a certain date and time as defined by you. For instance, we have Optipng and Jpegoptim run every seven days on all our various image folders. As a tip, if you have many images and they are split into different folders, run them at different times so you do not put too much strain on your server's CPU and RAM, which may as a result slow your website down. Find out how long each command usually takes to complete and set the next folder to start once the previous folder is completed.
If you want to take things a big step forward, you could code into your CMS / back-end a script, as we've done at TweakTown, that will automatically execute and fire Optipng and Jpegoptim for new image uploads, so that they are optimized right away. I still recommend running Optipng and Jpegoptim repeatedly on the same folders and images as I've seen previously optimized images get optimized slightly again - after around 5 or 6 runs, the image ends up becoming 100% optimized. It won't hurt repeating the process over and over.
That's about it for image optimization. This method from my experience is by far the best and easiest. It takes a bit of time to setup, but once you are done, you can just leave it and let it do its thing keeping your images nicely optimized and your website loading faster. In the next blog post, I will cover CDNs and why everyone should use one.