When it comes to creating a compelling website, images should be one of your most important considerations. The images you use on your website can make the difference between presenting a striking page that grabs a visitor’s attention and compels them to explore further, or turning someone off entirely and compelling them instead to leave your site as in a flash.
But there is a dark side to images — the issue of page load speed. While there’s plenty of advice out there pertaining to load speed that focuses on the likes of caching, efficient coding and so on, the size of your images can often have a greater impact than all other features combined. Put simply, if you can keep your image file size down then people are more likely to hang around on your site.
While using dynamic and striking images on your site is in most cases a necessity, that does not excuse you for using huge image sizes. In reality, you can have the best of both worlds (great images and a fast page load speed) by following just two simple steps when it comes to using images on your site. In this post I want to focus on those steps and offer you simple solutions for all of your image optimization needs.
1. Image File Formats And Size
For 99% of you there are two image file formats to bear in mind when uploading to the internet: JPEG and PNG. In a nutshell (and to keep things simple), JPEGs should be used for photographs and other images that involve a large variety of colors, and PNGs should be used for simpler images (such as screenshots and some computer generated graphics).
A JPEG is a compressed file format, which means that the quality is somewhat reduced in order to provide a much smaller filesize. A PNG on the other hand is uncompressed, which means that the quality is better but the file size is larger. In a perfect world you would always use PNGs but that is not always practical due to file size issues.
Once you have decided upon the file format for an image, the next thing to do is make sure that it is the appropriate size. You should only upload an image to WordPress in the dimensions that it will be used on your site — anything larger is just wasted space. Free applications such as MS Paint for Windows and Preview for Mac OSX allow you to resize images with ease.
If you plan to have a thumbnail that links to a large image, create a separate thumbnail file in addition to the larger file so that you are not loading the larger file into the thumbnail size. This will ensure that your load times are kept down and that larger images are only loaded when visitors call for it.
Once you have a properly-sized image in the right format, you are ready to move onto the next step!
2. Image Optimization
I’ve already mentioned that JPEGs are a compressed file type, which means that you get an image that is still of relatively high quality but is far smaller. However, you shouldn’t just stop at choosing a particular file type when it comes to image optimization — there is in fact more you can do.
When it comes to compressing images, I recommend that you use a plugin such as WP Smush.it. Although the future of this plugin was in some doubt going back a couple of months, it has since been taken over by the awesome team at WPMU DEV which means that we will be able to enjoy a top quality plugin for a long time to come.
WP Smush.it is a JPEG image optimization plugin for your WordPress site — once installed it will losslessly optimize any image that you upload onto your site. Lossless optimization is exactly what it sounds like — the image file size is reduced without any negative effect on its quality. This is done through a variety of methods such as stripping meta data, stripping un-used colors and optimizing the compression methods. Visitors to your site will be none the wiser that the image has been optimized, but it will be smaller and therefore will load more quickly.
The plugin will do the job for you automatically — i.e. carry out the optimization as and when images are uploaded. But what about PNGs? They are after all the heftiest files and could therefore have the greatest to gain through optimization. Well, I recently came across an online tool that does a stellar job of performing lossless compression on PNG images with results that are unnoticeable to the human eye. Consider for example the following two images:
This tool is called TinyPNG and I have been using it non-stop since I discovered it. In fact, it has rendered the use of JPGs all but redundant to me as nearly any PNG can be reduce to a manageable file size and still look fantastic. I am hoping that the developers of this tool will create a WordPress plugin that enables the automatic optimization of uploaded PNGs, but in the meantime it is really easy to use manually — just upload the image(s) to be optimized then download (in a flash) when it is done!
Note by AJ Clarke…
For those using a mac I really love the app “ImageOptim” it will allow you to drag hole folders and quickly optimized multiple images. I find it much easier and better then using an online browser tool.
Great Images For Your WordPress Site At A Small Cost
When it comes to using images on your WordPress site, the key is ultimately to offer striking results at a low cost (in terms of image file size). Following the two simple steps above will enable you to do that.
Determining the size (in terms of dimensions) of an image before you upload means that it is no larger than it needs to be, and using the likes of WP Smush.it and Tiny PNG to reduce the image size (in terms of kb) further means that all of the images you use on your site are likely to be no bigger than 100kb.
However, you may not necessarily want to stop there. In fact, you may well have your own tips and tricks for optimizing images in WordPress and making the most of the visual side of your website. For instance, we haven’t even talked about ideal image dimensions, placement, title tags, captions, and so on. Nor have we discussed how to find the best images through sites such as Compfight, stock.xchng.
In short, there is a lot to image optimization in WordPress — certainly more than I have covered in this post. As such, I would love to read your thoughts and questions regarding image optimization. Please do not hesitate to share your comments below!
A Tip For Theme/Plugin Developers
This is me AJ again, interrupting Toms post ;) I wanted to also recommend the Aqua Resizer script created by my buddy Syamil which will allow you to easily crop any image in WordPress using built-in WordPress image resizing/cropping functions. I find it a lot easier/better then using add_image_size() because it will crop them “on the fly” without any need for the “regenerate thumbnails” plugin as well as it only creates the cropped/resized image on those that need it, unlike add_image_size() which auto crops/resizes every single image uploaded to the site creating unnecessary bloat.