best file size for photos on website?

Question

I am trying to build a website catalog. I want thumbnails of each item on page then larger of each when thumbnail is clicked. Do i need 2 different sizes of pictures saved? What is the best file size(in bytes) for each? I have 300, 150, 96 and 72 res of each image saved in different files. Any help will be appreciated.

Answer 1

Yes, it's recommended that you have two versions of each image, one that's a thumbnail size (generally around 30 - 50 pixels wide x however tall in correct aspect ratio), and one that's a larger size (anything from 300 - 600 pixels wide x however tall in correct aspect ratio)

This way, you can load a results type page that has multiple thumbnail sized images (perhaps 20 - 40 images), and then upon clicking a thumbnail, it loads only that corresponding large image. Each thumbnail should be smaller than 5-10k (kilobytes), and each full sized image should generally be less than 60k (kilobytes).

When working with internet only images (vs. print) your dpi should always be 72. Anything larger than that (such as 300 dpi) should be downgraded to 72 dpi.

DPI is the total resolution of the image, and when I mentioned pixels that's the specific width and height on your screen.

The reason for two versions of each image (at two different sizes) is because when you're creating a catalog type results page and there's 20 items to be viewed, your page's weight (in kilobytes) should generally be approximately 100k. 20 thumbnail images at 5k/image = 100k. Then when each thumbnail is clicked that's an additional 60k image that's loaded after the original page is loaded. This is perfectly acceptable, and recommended.

Using Adobe Photoshop (the industry standard for graphics) you will be able to convert your high resolution images down to web sized images (if you're using Photoshop CS, there's an item in the file drop down menu labeled "save for web." Choose that option and set your image compression at the highest (most compressed) setting that still allows your images to look distinguishable. Also note, if your images have mostly solid colors you should choose the GIF compression format, and if the image is more like a photograph with many different colors choose the JPG compression format.

Answer 2

There are 2 ways to get around this: Manual and Through free photo gallery makers on the web.

For the manual:
You'll have to make 2 copies of the same image, one a small thumbnail and the other a larger version of the same thumbnail pic.

The thumbnails can be as small as possible but it should also let the user get a pretty good idea what the actual bigger image is. Thumbnail size should not be more than 10 kb generally.
The larger pics can be around 60-70 kb. Here you can take some liberty with the file size because only people really interested in your pics will click the thumbnails and may wait a bit longer to show your full sized pic.
Generally 20-30 thumbnails/page are ok, otherwise your total page size will increase too much and it will open slowly.
72 resolution is best for computer screens.

The Automatic route: Good if you have lots and lots of pics to show.
There are several free photo gallery makers on the web.
You have to take some time and install them once on your server(where your site is). Once set up, you just upload your full sized pics on a specified folder and it generates corresponding thumbnails automatically.
No need to create multiple pages also- it does that for you with a specified number of thumbnails on each page.
I am not sure whether putting external links is allowed here but you can google for ' php photo gallery ' to find some good gallery makers.
Best of luck with your site!

Answer 3

Yes. The bigger the file size the longer the page will take to load, so if it takes too long then people will get bored waiting. Most computer screens are 72 dpi, so not much point in doing a resolution much bigger than that, unless you do small thumbnails and say click here for the large picture. It's a pain doing it all before hand , but worth it as it make syour website go faster.

Answer 4

There is software available that will take your images and automatically convert them to thumbnails. Search for "auto thumb (s)". 300 is a good size for catalog items as your visitors will appreciate the best image possible.

Answer 5

The smaller the better is always the key.