[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

page load time and images

Posted on 2012-08-24
15
Medium Priority
?
447 Views
Last Modified: 2012-09-16
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
0
Comment
Question by:coolispaul
  • 5
  • 4
  • 3
  • +2
15 Comments
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 38328388
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
 

Author Comment

by:coolispaul
ID: 38328402
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38328419
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:coolispaul
ID: 38328433
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
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 38328466
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
 

Author Comment

by:coolispaul
ID: 38328514
ok that makes sense, thanks
0
 
LVL 12

Accepted Solution

by:
Dean OBrien earned 500 total points
ID: 38328616
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
 

Author Comment

by:coolispaul
ID: 38328635
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
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 38328643
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
 

Author Comment

by:coolispaul
ID: 38328652
ok cool - thanks
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 38328654
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
 
LVL 45

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 500 total points
ID: 38328765
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38328771
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
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 38328792
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38328974
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question