page load time and images

Hi,

I have an ecommerce site that for each product dispays a product thumbnail image, main image and then large image.

They are just 3 versions of  the same image but just resized, so i have 3 seperate images.

Would it be more optimal to use the same image for each display but just resize them using html? ( rather than using 3 seperate images that i have resized in photoshop)

Thanks
coolispaulAsked:
Who is Participating?
 
Dean OBrienConnect With a Mentor Commented:
As dave mentioned, its best to have three separate images.

The very nature of a thumbnail is to show a small version of the image, with out having to download the larger image.

Your question asked about pageload times. If you can get away with only loading the thumbnail in the first instance, it will make the load time considerably faster. If at a time after page load, you then choose to call the larger image, then that single operation will be minimal compared to the initial page load.

Under what situation would you choose to show all three sizes of the image? Arguable you might have main#1 plus thumbs#1-#5 and you could reuse main#1 for thumb#1 but the difference would be minimal.

Easynow
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
No, I have found that it is better to have the 3 separate images.  The main reason is if you use only 1, it needs to be the largest one.  That means you incur the load time of the large image even when you are making it small.
0
 
coolispaulAuthor Commented:
interesting, but if the largest image is on the page already why does it need to be loaded 3 times just because it is being referenced/used 3 times?

Thanks
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
Dave BaldwinFixer of ProblemsCommented:
I didn't realize that was what you meant.  If it is already loaded, then the only question is are you getting the quality you want in the smaller images.
0
 
coolispaulAuthor Commented:
yeah im getting confused myself!

this might help, the scenario is

1) thumbnail
2) main image
3) larger image

all 3 are exactly the same image, but i have resized them in photoshop and saved them as seperate images.

I guess my question is whetther i can just make use of the largest image and display the largest image 3 times but resize it with html to make it look like a thumbnail etc

this way i am only loading the largest image intead of largest image, main image, thumbnail image. ( i think - or does it mean the largest image gets loaded 3 times so is a slower page load?)

by the way, the scaling down of largest image would be fine
0
 
Julian HansenConnect With a Mentor Commented:
Personally I prefer 2 images a Large image and a medium sized which can be resized to a thumb or enlarged to fill a bigger box.

This provides the best of both worlds in that you reduce your get's from the server by 33% and don't unnecessarily download large images and the difference between the small and medium pic is not significant enough to warrent 2 calls.
0
 
coolispaulAuthor Commented:
ok that makes sense, thanks
0
 
coolispaulAuthor Commented:
i would be showing all thumbnails and then 1 main image.
all main images are on the page though so that once a thumbnail is clicked its main image is shown

i guess my question is whether once an image is downloaded it can be shown any number of times on a page without effecting page load? i.e. once loaded once thats it?
0
 
Dean OBrienCommented:
Once its loaded yes you can use it as much as you like with zero additional overhead.

However, there is no reason to make the page wait for 5 main images to download before showing the page.

Just make a call using javascript to load each new main image as it is required. Or look at preloading them once the main page has displayed.
0
 
coolispaulAuthor Commented:
ok cool - thanks
0
 
Dean OBrienCommented:
On a slightly different note, if you are indeed bothered about page load, you could save time by merging all the thumbnails into one image and using css sprite to show the relevant portion.

This will deduce overheads considerably.

Easynow
0
 
Chris StanyonConnect With a Mentor Commented:
Go with three images - small, medium and large. When you view a list of products, you will likely load 9,12,15 images on the page - better to load the thumbnails than the large image. When you then click the image to view your product, you will only need to download 1 large image.

Another reason is that at some point in the future, you may want to use a different image for the thumbnail (close up) than the main image (full product shot)
0
 
Julian HansenCommented:
This will deduce overheads considerably.
and make maintenance a nightmare.
There are times to use sprites and times not to use them - in most cases this is one of those times not to use them.
As dave mentioned, its best to have three separate images
Still can't see any need under normal circumstances for 3 images - 2 is sufficient unless you have specific requirements
0
 
Dean OBrienCommented:
Julian thanks for comments.

I was simply addressing the question that was asked, which focuses on loadtime, not maintenance.

The question also states he has a use for three images (thus his specific requirements). If he requires the medium size of any image prior to needing the larger one, then it will be quicker to call that image, rather than the larger image.
0
 
Julian HansenCommented:
Yes but I was suggesting an approach we use all the time where the thumb is actually between the medium and the the thumb. We scale up for the medium and down for the thumb. We have found that by selecting the right sizes and upping the quality on the image there is little perceived degradation when scaling up.

This is however subject to the requirements of the site - but in general the fewer images the easier it is to maintain and less server gets.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.