In this post I’m going to give you a few obvious tips and tricks on how to make large collections of images and photographs load faster on the internet. I’m always (as most of you probably know) posting large collections of images for design round-ups and showcases here on Circlebox Blog, so I’ve had a little practice over the last couple of months.
Recently I posted an article called ‘The Art of the Business Card: 187+ Creative Examples, Tutorials & Resources‘, which included approx. 170 photos/images. I got a couple of comments and emails about the post, some people asking how I got the images to load so fast, others saying that it took a while to load but was worth the wait.
If you get comments like that, the people that said it was slow are usually the unlucky ones that have a slow internet connection. Unfortunately there’s not much you can do about that! However, there are a few things I can suggest that can help your users load the images on your website as quickly as possible, and it doesn’t mean you need super expensive web hosting. Believe it or not, you can do the same with reasonably cheap web hosting, too!
1. Make sure you’re paying for a good hosting service!
When I was looking at signing up to a hosting site about half a year ago, I was spoiled for choice with so many providers offering different packages for so much per month. I wanted to go with a company who could provide excellent customer service, as in the past I have had a web hosting company who were constantly having problems and never explaining to me why my site wasn’t loading, therefore me paying £XX a month for a hosting account with only 90% up time. Make sure you look around, as there are companies out there with excellent customer service who offer excellent packages for 1/4 price of others with only, say, 50mb of storage. Rubbish!
I really do recommend hostgator.com when it comes to hosting, I pay about $10 a month, and in return get unlimited data, unlimited bandwidth, unlimited domains (yes, all 3 of my Circlebox sites are on the same hosting account!), and only approx. 0% downtime! There customer service is excellent – you can talk live to a member of staff almost instantly right over at their site, free of charge!
2. Scale images the real way!
You’ll be surprised how many people out there scale their images using HTML. The full image size still needs to be loaded, quality is lost and it takes a lot longer to load. Use a program specifically designed for tasks like this (I suggest Photoshop) to resize your images.
You can set it up to rescale images in batches, so you don’t need to do it one by one. I scale all of my images to 580px before they are uploaded to Circlebox.
3. Don’t use the highest quality settings!
There’s really no need. In Photoshop, when you save an image as a Jpeg you have the option to choose a quality, from 1 to 12, 1 being the lowest. When writing big posts with lots of images, I tend to save the new resized images at either 9 or 10. It doesn’t really decrease the image quality all that much, but the MB’s saved at the end of the post will probably surprise you. Always save at the highest quality if you plan to print your image, though!
4. Arrange your images in a suitable order!
In some circumstances this isn’t possible, but if you’re simply posting a page full of images which don’t need to be in any particular order, try arranging your images from small to large file sizes. A simple way to do this is use Adobe Bridge. Arrange the images so the smallest files are displayed at the top, the biggest at the bottom, then Batch Rename the lot to something like PostTitle1.jpg. This way, your reader has something to look at whilst the other images at the bottom of the page have a little longer to load – perfect!
5. Read up on how to make your pages load faster!
This is still something I haven’t really got perfect just yet, but there are loads of articles all over the web teaching you how to modify your hosting settings and editing your HTML pages to make your pages load a lot faster. So head over to Google and do a search or two! Also, treat your images to the best web hosting available, it’s important!
A very simple post, but a few tips that I think some of my readers deserve to know.
Good stuff mate! It is amazing what faster loading, optimized images can do!
A few good tips but when saving images to go on a website you shouldn’t do the normal ‘File > Save As’ and just adjust the quality (as you mention in step 3).
Photoshop has a handy ‘Save for Web & Devices’ option allowing you to optimise your images for the web, in terms of more than just filesize (allowing for things like progressive scan).
After doing this you can also run your images through a handy tool by Yahoo called Smush.it ( http://developer.yahoo.com/yslow/smushit/ ) which reduces the filesize even more without reducing the look or quality of your images.
Every time an image is resaved, even if you don’t edit it, you’ll lose quality, so you will lose quality using Smush.it… Take a look at this photo: http://www.impulseadventure.com/photo/images/resaving_compare1.png
I think we should use “Save for Web” option in PhotoshopS, it really saves image’s load time
Save for web is the best solution.