0

Ok so after some searching and not finding the real anwser I was looking for I came with the following question in this situation:

I have a trading website that loads about 2300 PNG images of 37x50 twice, once in a left column and once in a right column. The images and all information that comes with it is inserted using jQuery on the document on the onLoad event. However loading 2300 images (even when the html came straight from the server) takes just TOO much time and even hangs new versions of chrome!. So now the quick solution was just to remove the images and show in a dynamic tooltip. Works great but got angry website users and it is indeed ugly.

So... I thought of some possible solutions but I have no idea what is good/bad practice here:

  • Make all images JPEG and reduce quality.
  • With the above or not: Add all images to 1 very large image, load it and draw 4600 canvasses based on locations in an array like 'imageArray["someimageID"] = { x = 0, y = 40 }'
  • Convert all images to base64, add them in an array 'imageArray["someimageID"] = "base64"' and draw 4600 canvasses.

And to an extend where I must think of as well that of all those 2300 images I have a small, medium and large version. (of which only the small ones, 37x40, are shown all together in a page)

Hope to get some nice insights on how to correctly solve such a problem!

Greets

Improve this question
2
  • can the users see all 2300 of these images at once? Commented Mar 24, 2014 at 15:42
  • Do you have to load all of them at once? What do you need 2300 images on a page for? Can the user process all this information? Can you use pagination? Also, you might want to take a look at CSS sprite images, rather than canvas. Commented Mar 24, 2014 at 15:43

4 Answers 4

Reset to default
1

If your images are static (not generated for every request) I think you should use CSS sprites. (similar to your own suggestion of lots of canvases).

Basically you create a div for each image you want to show (or some other container element) and set a background on it that takes a small portion of the big image that contains all images.

Example css:

img.icon1
{
  width:50px;
  height:50px;
  background:url(spritesheet.png) 50 0;
}

in this example the 50 and 0 indicate the offset of your 50x50 icon in the spritesheet.

Update: Here http://css-tricks.com/css-sprites/ is an explanation that goes a bit further than my simple example.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I agree, there's a nice explanation of CSS sprites @ css-tricks.com/css-sprites
@SzilardMuzsi thanks, I've added the link to my answer
Thanks for this! Totally didn't think of a CSS solution!
1

First off, consider whether or not you actually need this many images, and loaded on the page all at once. Assuming you do...

Make all images JPEG and reduce quality.

Use the right format for what you're doing. JPEG is for photos. My guess is that since you have 37x50 pixel images that you're not showing photos. PNG is likely smaller from a file-size perspective in this case. It doesn't matter a whole lot though because the speed issue you're having is probably 80% browser time, 20% network time.

With the above or not: Add all images to 1 very large image, load it and draw 4600 canvasses based on locations in an array like 'imageArray["someimageID"] = { x = 0, y = 40 }'

Try it and see. I don't think this is going to help you. A canvas will have more overhead than a simple image.

Convert all images to base64, add them in an array 'imageArray["someimageID"] = "base64"' and draw 4600 canvasses.

Don't do this. You're adding 33% overhead to the file size, and again the load problem is mostly in your browser.

What you can do

  1. Really question again whether or not you need this many images in the first place.
  2. Cut down on network requests by using several hostnames to load the images. image1.example.com, image2.example.com, image3.example.com, etc. This will allow for more network requests in parallel.
  3. Use your developer tools to verify where the problem actually is. Again, I suspect it's mostly client-side. Once you know the real problem, you can solve it directly.
Improve this answer

Comments

0

I would advise if you can, creating a very low resolution sprite of images that can be placed to make it look like everything is loaded, then replace this with the proper images. Without better code/samples/what your images contain/ are they dynamic I am unable to give you a real answer with solution but at least it can lead you in the correct direction.

If your images are static, this will work fine, if dynamic there is not much else that can be done. I think some examples of the webpage you are creating would be great

Improve this answer

Comments

0

The reason you're having problems is simply a massive amount of HTTP requests - something you should always be trying to minimize.

Like others are saying here, you're going to want to use a spritesheet technique if possible (it sounds like it is). A spritesheet will condense all of your images into one, removing 2299 of your HTTP requests.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.