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.
Software:
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.
Online Tools:
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 🙂
Useful Links:
- 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.
I’m a huge fan of IrfanView also freely-available. Resizing is a cinch and honestly with the high pixel count of images we take these days, any simple image resizing tool can do the job. Allows you to crop and perform simple image enhancements as well.
Glad you mentioned GIMP. I love it for fancier image editing; it’s my free version of Photoshop. It’s a lot clunkier and fatter than IrfanView but it’s capable of doing almost everything you want to on Photoshop.
LeGeeque recently posted..Dior Vernis Waterlily (Spring 2012)
hevn’t been using Irfan View for ages, but it used to be on my laptop, don’t remember why I got rid of it. I used to use GIMP too, but I find it really hard to use, tried all sorts of tutorials but I always end up back with Photoshop or Paint.
plue recently posted..Happy Chinese New Year!
I used Irfan View and GIMP for years in Malaysia. Don’t know, never really liked Irfan View though. Something about the red icon rubs me the wrong way 😛
Another plus point for optimizing images is bandwidth. The smalle your image sizes, the less bandwidth gets used and consequently the lesser chance of exceeding your hosting bandwidth 🙂 learnt it the hard way!
Paris B recently posted..Helping you stop your makeup from melting with the Smashbox Photo Set Finishing Powder
Paris B: Oh after that loooong episode with Lunarpages, I’m now very aware of bandwidth consumption. Thanks for alerting me about it. Sigh why do we have to learn things the hard way, eh? 😛
Great tips there! I normally use Gimp (it’s free, and works just like photoshop). So I’m going to check out the tips on optimising my images with the link you’ve shared. Thanks for this great post! 🙂
Norlin recently posted..The Cheat’s Way of Using the Donut for a Ballerina Bun
Norlin: Pleasure, Norlin. Optimising images can help save you on bandwidth as well, which helps with your hosting company. I had way too much nonsense from my old one regarding exceeding of bandwidth, etc, so yeah, had to learn it the hard way like Paris B 😛
Great post, Tine! Image loading time was one of the greatest concerns when I first started out coz I initially saved them as erm, ‘Saved As’ instead of ‘Save for Web & Devices’, and they took forever to load! Luckily I switched to the latter and they load much quicker now. My posts usually contain a lot of pictures, especially detailed tutorials and reviews, and I didn’t want to cut down on the quantity so I had to find a way! 🙂
Bun Bun Makeup Tips recently posted..Mitchy-Matchy: Colorful Eye Makeup To Go With A Colorful Dress
Bun Bun: I used to just click on “save as” too! I only found out when I googled Photoshop tutorials for something else, and found out that I should do “save for web” instead 🙂 It will definitely save on bandwidth 🙂