Photo, image, resizing & naming tips.

Collectors-info · #1 04-25-2007, 02:07 PM

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 a lot of the goodness out of them by get the kb’s (Kilobytes) down to the minimum number with minimum loss of image quality. So if your image wasn’t much good in the 1st place, it’s not going to look that great after you have finished pushing the kb’s down to a minimum.
Reducing the kb’s, will also help massively with page loading times & your visitor experience on your site. Plus it will keep your band width usage down.
The other point about images with large kb’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 three quarters 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 a print out. If you need to let visitors have use of your images for printing, have a large file size on its own page or offer a download via a link.
(Warn the user if it’s a large file that may take time)

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 & greatly increase traffic to your site.
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 alt tag may end up looking like this:
<IMG SRC="hair-shampoo.jpg" ALT=" Hair shampoo with coconut oil ">

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 lager image in the background 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 lager 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!)

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!
You will find looking through album that there is nothing worse than an album 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 a lager image? Place a link from the 600x400 to the lager 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 lager 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 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 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 in those images. The content is up to you. lol

--

A Quick summery on do's & don’ts.

1. Get the kb’s down! 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 600x400 at a 60kb (& preferably less) unless
via a link to its own page or pop up, or download.
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 image should be over 250kb for best quality. But 60 to a 100kb should be the norm & fine with most
images between 600x400 & 800x600.
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 increase traffic)
7. Never have lots or large images on your home/index page. Home pages should never be much more than
150 to 300kb 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 lager image.

Good luck! And here is 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.
(Keep the visitors experience a quick happy one & wanting to come back)

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.

http://tools.dynamicdrive.com/imageoptimizer/

http://www.sitereportcard.com/imagereducer.php

http://www.imageoptimizer.net/Pages/

larazovich · #2 04-25-2007, 02:27 PM

thanks Chris. Nicely done.

aconstas1 · #3 04-27-2007, 01:12 AM

great info and an excellent addition to the tips and tricks section

big money · #4 04-29-2007, 02:29 PM

that really makes alot of sence thanks

Patience · #5 05-09-2007, 12:45 AM

Hey Chris,

Want to say thank you for this thread. Chock full of info.

I'd done a search trying to figure out what size to re-size my pics. This was a nice find!

Thanks pal!

Malhoeira · #6 05-09-2007, 03:58 PM

Great post, Chris. And a good thing you've put it LARGE on your signature. Saw it on another thread.

BV sent out an email last month with the html code to put on the Between Head Tag tab on the HTML page to stop caching. It works.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Lightbox vs Gallery pop-ups. Is it merely a matter of taste?

Cheers,

Collectors-info · #7 05-09-2007, 06:08 PM

Hi, Sarah, not sure if no-cache is a good idea or not as its one of the things that help pages load quicker the 2nd time round. There are some areas ware this can be handy with forms & alike (For security).
On some of the testing I have been trying out the gallery seems to come out faster than the light box. The main reason for this is when you use the gallery & tick the create thumbnails it reduces the images by a lot, & saving load times.
Here’s 3 I was playing with, & I named all the images with different names in each album. But are all still the same size. See which one is fastest for you.
The last one wins for me.

BV LIGHT BOX.
http://www.collectors-info.com/testing/lbtest.html

BV GALLERY
http://www.collectors-info.com/testing/galtest.html

This one is a photo album that a few on the forum use.
http://www.collectors-info.com/testi...nightswim.html

The last one is from this company (FREE)
http://www.ornj.net/webalbum/

,

Malhoeira · #8 05-10-2007, 06:59 AM

Thanks Chris, that's exactly the comparison I need. Gallery is much faster. I also found the block-out effect of lightbox good for a commercial site but less effective for mine. Will look into the third option for a photo page.

You're right about resizing. I fudged the 4 photos at the top of http://british-cemetery-elvas.org/chapel.html
and am now stuck with an outsized one on the left. I sorted out the kbs and tried to resize the pixels with Paint. Typed in 360x480 and got a cropped image of the upper left quarter of the photo. How do I get a 360x480 image of the whole photo. Hocus pocus?

Re. cache code: is this why re-publishing sometimes takes two or three tries to work?

Cheers,

Collectors-info · #9 05-10-2007, 01:35 PM

Hi, I see you have put your images on a good diet. I’m not sure how you resize with paint? I got the same as you results as you when I tried. (Strange)
But you can use PIXresizer, (link on 1st post) or if you have it on your machine, Microsoft Office Picture Manager is fine for this. (Should be in the MS area).
The only thing with resizing your images is that you should resize with the view of keeping the aspect ratio of the image to stop the image looking distorted or stretched.
I am not sure if you have the original? But using one of the 2 programs above you should be able to resize ok. Other wise it will look like these 2 below. (I used your one on site).

360x480 STRECHED BUT DISTORTED

360x356 keeping aspect.

The other thing that will help! Is when you create a gallery, check the create thumbnail box. It will automatically reduce the kbs of the thumbnails by about 2/3rds.

Oh! I don’t believe cache has anything to do with publishing.

Cheers.

Malhoeira · #10 05-10-2007, 01:53 PM

I do have Office Picture Manager, I see, and also the originals. Thanks for that and the thumbnail tip.

Can you confirm that the favicon code should be put on the Start of Page area of the BV's Page HTML?

Thanks again, Chris.

Malhoeira · #11 05-10-2007, 02:12 PM

PS
I thought caching prevented new pages from publishing. The code <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> on Between Head Tag was supposed to solve the problem - and wear and tear on F5.

AmaDee · #12 05-10-2007, 02:19 PM

about the favicon, yes, it should be in the "start of page" section of the page html.

Watdaflip · #13 05-10-2007, 02:19 PM

It should go between the <head></head> tags, but to be honest, most current broswers should render no matter where you put it on the page. Its just good coding to put it where it should be, and older browsers might not recognize it if it isn't where it should be.

alas · #14 05-11-2007, 07:02 AM

Chris, thank you for your imputs and ideas.
Alas

cocotte43 · #15 06-05-2007, 08:07 PM

PLease could you go at the URL of my site and tell me if you can play the music , but one thing my site is french ??