I have been meaning to write this post for a while, it was part more pressing things and part the fact that I wasn’t sure I wanted to share these great tools specifically. I thought about it though and decided that I am all about sharing. Most novices tend to forget about image optimization from not only an aesthetic but a performance standpoint. The title talks about WordPress in particular but the tips that I am about to share with you should be used in running any website as best practice.
In order to give your product (i.e. your website content) more credibility, you need to have what we call high quality assets, this includes high-resolution images and video if applicable. In most industries you might cover the PR companies and companies in that industry tend to provide high-resolution assets as source material which is great for them because their primary goal is to make whatever they are representing look good. The problem for publishers who are reporting or interpreting that content is that what looks good is not always the best way to go when you talk about publishing to the web. Most content that you will receive will out in a format that has been optimized to look good, not to be easily deliverable over the web. The majority of assets we get here come out as .bmp, .jpg, .png, or even .psd and most of the time they haven’t been optimized for the web and can be in the range of several MB each. If you want to maximize your website’s resources you don’t want to be uploading images that are several megabytes in size on a regular basis, it is an inefficient use of your resources and even over FTP it will take a long time. So what can you do?
Image optimization and compression is something that you should do to any image you are going to upload to your website, a good program can allow you to drastically shrink the actual size of the image but maintain its original image quality. There are two steps that we always take across our family of sites when it comes to prepping images for publishing. The first step is to run it through a program that allows us to bulk rename, resize, compress and even add our watermark if we want. The problem that people that are just starting out and who aren’t technical have is that they think that to get a tool that is good at this is going to cost them a lot of money and the fact is that just isn’t true. In fact, most sites use programs that are absolutely and completely FREE. The tool I am about to recommend to you is one that we use on a daily basis, its free and does the job as good as any commercial tool we have seen.
To make sure you aren’t uploading humongous images to your site, run them through a tool called FastStone Photo Resizer. FastStone Photo Resizer is an image converter / resizer intended to enable users to convert, rename, resize, crop, rotate, change color depth, add text and watermarks to images in a quick and easy batch mode. Drag and Drop mouse operation is well supported. FastStone is the best free tool for this type of activity we have seen and I recommend it without hesitation. Most people think that freeware is always bad and must have tons of spyware or ads or something. I’m here to tell you that FastStone has none of that, it’s a no frills tool that gets the job done. It has an easy to use interface, you just add the images you want into the tool and then make the customizations that you want.
In general no matter what the source image is, my default image type is JPEG. From here if you are doing bulk image conversion, you can also set up a naming convention for your files. If you go into the advanced options, you can resize the image is really where you get the huge space reduction. It has several common sizes and presets but you can input your own custom one too. The default compression type will be just fine for the majority of people. Make sure you select the top two options in this window, “Switch Width and Height to Match Long Sides” and “Preserve Aspect Ratio”. This way when it gets resized, your original image quality will be maintained. It has several other options you can explore but the only other one I want to recommend is the ability to add a watermark. You just go to the watermark tab, browse to the image that you want and then use a preview space to arrange it anywhere you like. You can then preview the images to make sure that it looks the way you want, click convert and let the program do the rest. The program will show you the original size, the new size and how much space you saved. It’s really impressive to be honest and once you use it you won’t do it any other way.
The other piece of advice that I am going to give you is completely WorPress centric. There is a plugin called WP Smush.it that reduces image file sizes and improve performance using the Smush.it API within WordPress. This one integrates directly with the media library function in WordPress and once installed will automatically process the images thorough its API as you upload them. You can also browse to your media library from there and “smush” any images you have already uploaded, it won’t do anything to your images but shrink them even more if possible. I have to caveat on this one though as I have just begun testing this plugin on one of my other sites so I can’t give it as glowing a recommendation as FastStone but I can tell you so far it hasn’t created any problems and appears to work just fine.
In the end, if you follow my suggestions then things will go a whole lot easier for you and your site will be a whole lot better off in the long run. By compressing and optimizing your images, it will position your site a whole lot better for the future and will ultimately improve the page load speeds of your site by leaps and bounds.
Well alright folks, that’s it. I hope this helps somebody and feel free to drop me any questions you might have in the comments.
Note: Please read Yahoo’s Terms of Service before using WP-Smush.it, #4 as it relates to ownership and use of images, if you don’t agree then don’t use this plugin. Thanks to one of our commenters for bringing this to our attention.