Updated January 10, 2010
Why is size important?
First thing about images for any web page, is to start off with the best quality image you can find. Why! For images to load onto a web page quickly, you need to strip out a lot of the goodness by get the kbís (Kilobytes) down to the minimum number with minimum loss of image quality. This is commonly done by 1st reducing the physical size & then reducing the DPI (Dots per square inch) of an image So if your image wasnít much good in the 1st place, itís not going to look that great after you have finished taking out the dots to push the kbís down to be web friendly image.
Reducing the image size & DPI will also help massively with page loading times & your visitorís experience wile browsing through your site.
The other point about images with large file sizeís is that most screens/monitors will not show any improvement on an image of 800x600 that is over 250kb, so all the kbís above this number is a waste & will annoy visitors viewing your site that donít have supper fast broadband. (Nearly half the world)
Another small bonus on images that are below this size? Is they will look great on your site being viewed on a screen, but are not worth printing out as they will look very grainy on paper.
If you need to let visitors have use of your (Make sure they are yours) images for printing, make up some image files of different sizes & place some text links to downloadable image file. You can place these in zip file for ease of downloading, but note! a zip wonít reduce the KBís on image an file like it will for text documents.
(Also warn the user if itís a large file that may take time to download)
Naming your images!
This part is often overlooked, but is as important as naming your pages. IE: If you have an image with a URL of http://www.mysite.com.92nx120pd.jpg & your site is about hair products! Would you put a search into Google for 92nx120pd for hair products?
I quite often search Google & other SEís (Search engines) by image, I just find this quicker for certain types of searches. But please remember, that there are many visitors that will come to your site that may have a disability or impairment & use other methods of searching. Naming your image correctly will help all visitors & help traffic to your site by being compliant with SE rules.
So as an example! If an image is about hair shampoo! Name your image ďhair-shampooĒ so you end up with a URL of: http://www.mysite.com/hair-shampoo.jpg It is also very important to fill in the ALT part of your image. This is an extension/description that the SEís also take notice of. So your url & alt tag may end up looking like this:
<img src="hair-shampoo.jpg" alt=" Hair shampoo with coconut oil ">
There is also a limit to the text length of an alt tag & this varies with different SEís. But a tag of around 50 characters or less should be no problem.
New types of image presentation programs.
With the advent of new styles of image presentation software, it is even more important to resize your images. The reason for this! Is there are many web pages that have thumbnail images that are compressions of the very nice but larger image. With some software/scripts they tend to load this larger image in the background or have a code that reduces the thumbnail in size but not the DPI. So when the page is down loading to your machine, this can end up making the page very bulky in kbís, then loading times become extremely slow for visitors. So if you do want to use this type of software, just use it for a very limited number of images on each page & not a whole album of 20 or 30 images. If you still need to use this software for a larger amount of images, then either give some warning or install a loading script to let visitors know why things are about to slow down. (I will quite often wait if, I know why!) But personally would just use a correct method or software.
Physical size of images.
When making a page or album of images, try to make all the images the same physical size. If this is not possible! Then try to group the images in areas of the album or page in similar sizes. I know this next point is sacrilege to some, but if it makes a better presentation of your images. CROP IT! This is a good idea if you have thumbnails that are linked to larger images. IE: Crop the thumbnail & show the original as it should be.
With your larger images you will find looking through a web album that there is nothing worse than the images jumping up & down your screen when trying to view because the images go from something like 800x300 to a 300x800 (It very unprofessional in looks department, & visitors will just leave) Images of 600x400 is usually a nice size to make up album with. If you want an even larger image? Place a link from the 600x400 to the larger one when needed. (Keep it neat)
Resizing images using the tabs. (Donít be lazy!)
A pet hate for me is the amount of people that resize there images using the tabs on the edges or corners of there image to fit a space on a page. We have just talked about the importance of resizing & optimizing your images to keep your pages looking great & loading fast. But many take that 600x400 & sometimes larger imageís, then use the tabs to squeeze it down to a thumbnail. So now you have a page full of crinkly looking thumbnails with the same size kbís as the larger one that you are going to link to. The idea behind a thumbnail is to save space, but more to save loading times of your pages.
IE: You have just placed 10 60kb images & squeezed them down to thumbnails using the side tabs. The kbís are still the same on your page, your might as well just leave the large ones there & save yourself the time.
Thumbnails should be about 3-12 kb each (Depending on size).
As an example if you ever visit an eBay page, you will find that nearly every thumbnail on their pages are no larger than 3 kb & mostly 1-2kb. The 800x600 supper size images are on average about 100kb.
So at the end of the day, resize your thumbnails correctly as well.
Yawn! Oh No you say! This part is important to remember. (Clear it) When you are building your web pages for your site, & testing them to see what they look like, all of the pages will get caught up in your computers cache. This is little storage area on your computer that memorizes & helps to load things more quickly. IE: If you are visiting a web page for the 1st time it may be a bit slow. But when you go back for a second time or back tag, your computers cache will have this information stored to speed things up. (Saves it down loading the page twice)
So if a page appears that it is loading quickly, it may just be that it is in your cache & giving a false impression of a quick loading page, because you havenít cleared the cache when testing.
This can also be the reason that when you make a change to your page & publish, it can appear that your site hasnít been updated. This will be your machine using the cache memory to load the link you clicked on.
Pressing F5 many times can sometimes clear this. But the best option is to go to tools on your browser page & find the clear cache option.
Example of images.
Ok! Not the best of examples below! But if you look at the 2 images below, I donít imagine you can see much difference in the quality, between the one on the left & the one on the right. The One to the left is 10kb & the one to the right is Ĺ the size at 5 kb and will load nearly twice as fast onto yours & your visitorís machines when browsing. So the main aim of this post is to make a visit to your site a happy one by reducing the kbís of those images. The content is up to you. lol
A Quick summary on do's & doníts.
1. Get the physical size & DPI down to reduce those kbís! Put your images on a diet. (Very important & will keep visitors happy)
2. Donít have lots images on the same page much larger than 35kb each (& preferably less) unless linked to a larger image via a text or thumbnail link to a pop up.
3. Donít use the tabs on the side of the image for resizing. Use the software links & sites below to do it properly. (Otherwise your image will be over weight & look old & crinkly)
4. No single image should be over 250kb for good quality. But 60 to a 100kb should be the norm & fine with most images between 600x400 & 800x600 if of good quality.
5. Keep the images to a minimum amount on each page unless a visitor is pre warned about loading times. IE (please wait wile page is loading)
6. Name your image & ALT tag correctly. (This really helps you with the SEís & will help traffic)
7. Never have lots or large images on your home/index page. Home pages should never be much more than 150 to 250kb maximum. (At least get your visitors on your site quickly) This especially applies to video.
8. A 600x400 image at 60kb will look a lot better than a 800x600 of the same image.
9. Resize your thumbnails to about 3 to 12 kb & link to larger image.
10. Keep your site fast loading so a visitors experience is a happy one & wanting to come back.
Good luck! And hereís some FREE software & sites links to help keep your visitors happy with quick loading pages. Remember! This is only a guide & sometimes slightly better results can be achieved with the more expensive software, but using some of the free software & spending a few extra minutes on each image will see fantastic improvements on the looks & speed of your site, all at no extra cost.
Vodahost PIXresizer Download page
Paint.net Very handy program Download page
Gimp Similar to paint.net Download page http://www.gimp.org/
Photo tool kit Got some good effect tools & a great way to crop images. Download page
Infranview. More of a database but has the basic editing tools. Download page
Online image optimizers. You will have to get your images down to about 300kb to use some of these sites. But all work in a similar way.