Photo & Image Resizing & Naming Tips

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

Updated 18/10/2008
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.

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

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

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

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

thanks Chris. Nicely done.

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

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

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

that really makes alot of sence thanks

Patience · #5 05-09-2007, 01: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, 04: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, 07: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, 07: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, 02: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, 02: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, 03: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, 03:19 PM

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

Watdaflip · #13 05-10-2007, 03: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, 08:02 AM

Chris, thank you for your imputs and ideas.
Alas

cocotte43 · #15 06-05-2007, 09: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 ??

cct9105 · #16 06-15-2007, 05:44 AM

Hello everyone,

I want to put a 5 picture in my page in a sliding view is this possible to BV or I need a flash software to it. If needs a flash software pls. you recomend one.

Thanks, appreciate any input.

janeth

Jeremy · #17 06-15-2007, 08:05 AM

Well said! :) Great article.

Collectors-info · #18 06-15-2007, 08:30 AM

Hi, bit of a choice here. Can either use:
1. BV banner rotator.
2. An iframe with thumbnails around it. http://netisopen.com/computer/IFT004...e_display.html
3. An iframe with thumbnails in another iframe with a scroll bar. http://netisopen.com/computer/TF004/T004.html
4. Or maybe a free album for more images http://www.ornj.net/webalbum
5. Could even be done with a marquee & iframe. http://www.collectors-info.com/testing/marquee.html

There are many different ways to do this. If none of the above is the right thing. Maybe you have seen a sample some ware that you could post here?

fliks · #19 09-10-2007, 12:12 AM

Hello there Collectors-info,

Just would like to say, great photos!
Thanks for all that infomation,

Louis111 · #20 02-15-2008, 05:20 PM

Hi, i'm looking for a way to work with pictures similar to lightbox or photo gallery, but i need to be able to put text under the pics at least five lines of text and the text must show under the pic when looking at the site - basically the description of the pic will be under the pic. than i also need to be able to hyperlink the pick to another page - so if you click on the pic it will take you to another page.

Any help will be appreciated.

Louis

Collectors-info · #21 02-15-2008, 05:55 PM

Hi, not sure on linking the image to a page. But yo can enter code in the comments box to link to a page. Change the part in red for your description & the part in blue to your page you are linking to & paste it in the comments area as part of your text.

Good luck.

<a href="http://www.webbiesite.com">Test link</a>

Collectors-info · #22 02-15-2008, 07:37 PM

PS. The Boxer template seem to be better for this. You may have to add a color tag with this one.

<font color="blue"><a href="http://www.webbiesite.com">Test link</a></font>

Louis111 · #23 02-17-2008, 07:35 AM

Hi,

does anyone know of a foto-album that can be used that allows you to hyperlink each pic in the album to another page?

feyza · #24 05-19-2008, 01:40 PM

Thanx Chris useful information for me...And I recommend a program that all can use easily...Microsoft Picture It Photo Premium..You really appreciate I think...

Attitudinest · #25 08-25-2008, 08:31 AM

Thanks Chris. You're a wealth of useful info.
As a guy just trying to learn website building with BV I find your stuff very informative and easy to follow.

Thanks again.
...David

Collectors-info · #26 08-25-2008, 10:49 AM

Quote:

Originally Posted by Attitudinest

Thanks Chris. You're a wealth of useful info.
As a guy just trying to learn website building with BV I find your stuff very informative and easy to follow.

Thanks again.
...David

Many thanks David. Good luck with your site.

narobe · #27 12-11-2008, 10:33 AM

Great article Chris, Just like to add if your going to print an image 300dpi is great, but far too much for any screen. All monitors work at 72dpi so bring that resolution down. dpi= dots per inch

pburgum · #28 01-07-2009, 12:07 PM

Thanks Chris
Really helpful post.
Cheers Paul
www.billinghamcharitytrophy.com

metroweb · #29 04-02-2009, 04:03 AM

great tips on this forum!
How do I creat thumbnail Pictures that have the special effect of scrolling over them one at a time makes that image look bigger, without clicking on the picture?
I hope I explained it right, My site is not up yet, waiting for domain transfer. I have seen it on a few other sites, I will try to get a link and post it here, if nobody knows what I am explaining, You see it alot on web sites that sell photos.
Any help, or ideas, would be great!
Thanks,
April

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)