Tweet
Photo - Image - Resizing - Reducing - Naming
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.
Cache?
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.
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.
Cache?
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.
