CODEWITHSUNDEEP
javascripthtmlperformance
ovanwijk
ovanwijk

Reputation: 159

Many images loading performance HTML/Javascript

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:

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

Upvotes: 0

Views: 1384

Answers (4)

Simon Groenewolt
Simon Groenewolt

Reputation: 10665

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.

Upvotes: 1

Jordan Foreman
Jordan Foreman

Reputation: 3888

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.

Upvotes: 0

Brad
Brad

Reputation: 163568

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.

Upvotes: 1

Dean Meehan
Dean Meehan

Reputation: 2647

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

Upvotes: 0

Related Questions