Image Optimization is the process of shrinking the file size as much as possible with loosing image quality. There are a few additional steps that separate the and amateurs from the pros when it comes to developing web sites efficiently.

As a web developer I use the phrase “image optimization” on a daily basis and it seems like most people have no clue what I’m talking about. “Image Optimization” can be defined any many different ways. A client sent me images for a gallery on their website. In the steps below I’ll explain my process to optimize those images and the importance of each step.

Step 1

Website Image Optimization Step 1

Assess the file names, size, resolution and dimensions. In this example the main image folder is 52.8MB and the gallery I’m going to optimize is 22.9MB.


Step 2

Website Image Optimization Step 2

In the screenshot above take note of the image dimensions and resolution. The images dimensions are pretty big and the resolution is 200dpi. On regular (non-retina) computer monitors, images on the web look fine at 72dpi, anything above 72dpi is just increasing the file size and load time. Modern websites are close to 1200px wide. If the whole website is 1200px wide then there’s no reason to upload an image wider than 1200px. I’m going to change the max-width of every picture to 1200px and set the DPI to 72 automatically using an Adobe Photoshop Droplet.


Step 3

Website Image Optimization Step 3

After resizing the images, the folder size went from 23.7mb to 6.7mb. Now all the images have a consistent width that can be inserted into any page without severe scaling.

The images look great and we’re ready to upload them to the WordPress media library, right? Wrong.

Look at how the files are named in the screenshot above. Disgusting, I know. It’s best practice to only use lowercase characters with no spaces for files being uploaded to the web. Using capital letters and spaces can make it difficult for browsers to locate files which results in 404 errors and files not loading.


Step 4

Website Image Optimization Step 4

Renaming each file can be time consuming. I use Mac terminal.app to automate the process.

To rename all files lowercase, go to folder in terminal then enter

for f in *; do mv "$f" "$f.tmp"; mv "$f.tmp" "`echo $f | tr "[:upper:]" "[:lower:]"`"; done

To replace spaces with dashes enter

for i in *; do mv "$i" "`echo $i | sed -e 's, ,-,g'`"; done


Step 5

Website Image Optimization Step 5

Now that all the images are named and sized correctly I run them through ImageOptim which reduces the file size even more.

Step 6

Website Image Optimization Step 6

Using ImageOptim reduced the folder size from 6.7mb to 5.8mb, which may not seem like much but that adds up quick.


Conclusion

Image Optimization is a very important step that is often overlooked, especially by entry level developers that haven’t had to deal with the consequences of poor file management and bloated servers. The image folder was originally 52.8mb and was reduced to 5.8mb. Optimizing the images for this gallery reduced the folder size by over 75%.

The steps can vary depending on what type of images are being added to your website. Optimization can be done to images already uploaded to your site, there are WordPress plugins like EWWW Image Optimizer that automatically optimize images on the server. In my experience, to get the absolute smallest file size the optimization needs to be done on a local computer and then uploaded to a server.


Does your website need to be optimized?

Contact me today for a free quote to build, fix or optimize your website.