One of the most important aspects on my blog will have to be photos. Very rarely do I post an article without images to accompany the post. I’m sure this is very true for most of you too.
The problem with having many images in one blog post is the loading time on browsers. If you have heaps of images in one post, and these images are large in size, this increases the time for the page to load significantly. High loading time for websites is a no-no, because this affects the user experience for your readers. I know if I have to wait a while for all of the images to appear on a blog, the chances of me closing the page is high.
The way to minimise loading time for your blog is to make sure all of your image file sizes are kept low. But how do you possibly maintain image quality (to a certain degree) whilst compressing image size?
One word. Optimisation.
When you optimise your images, you are able to save on bandwidth by serving smaller image files. When the image sizes are smaller, your page loads faster, and this increases user experience for your readers.
There are a few methods you can employ in optimising your images.
1) Adobe Photoshop – I use Photoshop extensively for my image editing, so naturally this is the first software I’d recommend After you’ve resized your images, when you’re about to save your images, remember to click on Save For Web -> click on the Optimize checkbox to enable it. Decrease the quality of the image if you’re not intending to post large images. This decreases the size of the file. I like to optimise my images to about 50% of the quality (Medium). This way, my images are’t compromised on the blog.
For more information on how to optimise your images using Photoshop, do check out this link on how to Speed Up Your Website with Better Image Optimisation in Photoshop.
2) GIMP – A free, open-sourced image editing software. GIMP is a little more complicated to use if you want to optimise your images because there are more processes involved. I’m not going to go through all of them here, but you can check out this link for more information – How To Optimize Images For The Web Using GIMP
3) Paint.net – Another free image editing software. This program is relatively easy to use, and after resizing your image, when you Save A Copy of the image, you have the option to adjust the quality of the saved image. The lower the quality, the smaller the file size. For web images, you can keep both low without making the image appear funny.
1) Smush.It – This is a very popular online tool used by many bloggers. All you have to do is select the image files you want to ‘smush’. The tool will optimise your images and tell you the percentage of file size saved. You can then download those ‘smushed’ images back onto your computer and use them for your blog.
2) WebResizer – An online tool that allows you to resize your images, and do very simple image editing. All you have to do is upload your image (unfortunately this tool does not allow batch editing or resizing, which means you can only edit one image at a time).
3) Piknik – I know this website is closing down in April 2012 (Boo! ), but let’s use it as much as we can before it does, eh? A nifty tool to use for image editing, and when you click on Save & Share, you can adjust the dimensions of the file and compression quality. Easy peasy.
I like to keep every image less than 100kB in size. This is particularly useful when I have a number of images per blog post as it will not take a long time for the website to load.
I hope this has been useful for you, and perhaps a gentle reminder for you to optimise your images. I’ve also added some useful links below for you to check out on image optimisation.
Image optimisation can help your blog load a lot quicker. I call it one more reason to make your readers stay
- How To Minimize Load Time For Fast User Experiences
- 27 Stunning Image Optimization Tools for Web Designers
- WebPageTest – Does your blog load quickly? How much bandwidth does each page consume? Do a performance test on your blog.