Slow loading of many images

Hi

I have some 35 images in one page. They have been compressed, reduced in size to the minimum acceptable, but still make the page load in over 6 sec on a fast connection. That is too much for me.

What can I do to speed up things, other than break the page into 2 pages?

see http://pintotours.net/Europe/Spain/Barcelona.html

One idea, but I don’t kknow if it can be done, is to display normally the few top ones and somehow delay (defer?) the rest, so that the page load fast with the “above the fold” images and then the rest will come in its own time.

Another idea, is to combine all 32 images into a css sprite, but is there an easy way of amending the sprite if I decide to change one or two images later?

Any ideas, please?

Where are you storing them for downloading? On your own web space, or some other hosting?

In my server in the Host server

I think this may be where the idea of using a CDN might be useful. I think there are a number of free services out there that might fit the bill, but they’ll come with limitations I’m sure. You could also look at some of the photo hosting services like Flickr, as they allow hot linking. They’d be worth looking at even if only for test purposes to see if you can get a noticeable improvement in load times.

I’m rreading about deferring with something like

<img src="fake.png" data-src="real-image.png"

is that a good idea? What about folks who have disabled javascript?

I guess I don’t know a great deal about how your site operates, but don’t you just link using <img src="some_url_goes_here">? Unless I’m missing something, I’m not sure how JS enabled/disabled would affect that.

Sorry see EDIT above

OK. Not something I’m familiar with. I may be a little while getting my head around it… :wink:

They would only ever see the fake images. The JavaScript would need to run to load the real ones.

Is this the first page on your site you expect people to visit or is there another page most of them will visit first? If they are more likely than not to visit a specific other page first you could include some of the images in that page but hide. That way they can start downloading before the person comes to the page where you want to display them.

Unfortunately most visitors seem to go to what is basically links from the main pages, and there are so many that your idea, which sounds good, might not work on my pages.

Just to explain better

I have 3 levels of pages

  1. index page that distributes to
  2. 7 pages that distribute to
  3. 25/30 pages each

Most of my visitors google directly to level 3)

Thanks

Good read. It’s a concept I’ve not encountered before, but it does very neatly explain how JS comes into the picture. I’d still want to test the theory around hosting elsewhere, but I can’t see that you couldn’t combine the two approaches, assuming of course that the JS is working on the recipients browser - there could potentially be a couple of performance boosts there to be had.

Well, I think I did not read the article properly…

I put the code in the first 6 images of the page and when I use FF Web Console I still see the images loading right at the beginning

I used the code for the fake image as in the article, and now I assume I have to create it in my server. But how?

I’d have understood it to mean you have to apply it to every image on each page, at least on those pages that are very image intensive.

Not quite following this bit though.

I substituted existing code with

 <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="../images/MercureAlbertaBcn.jpg" width="200" height="150" alt="Crowne Plaza"> 

but I have no image/png:base 64 …etc… in the server

I assume I have to get one, but how?

I must admit, I took that as an example, but having read it again, I’m not so sure.

Well, I found an image converter that converts to base 64, but don’t know how to use it.

I used Gimp to produce an empty blank image 1 cmsq and converted it and got this code

iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==

What do I do with it now?

I used it in the html code, but do I have to point that code to the actual position of the fake image?

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==" data-src="../images/RenaissanceBcn2.jpg" width="200" height="150" alt="Crowne Plaza"> 

where do I add the location /Pinto/images/ ?

Like this does not seem to do anything

 <img src="data:image/Pinto/images/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==" data-src="../images/RenaissanceBcn2.jpg" width="200" height="150" alt="Crowne Plaza"> 

Besides, the image in the server is .jpg, not .png…

The original image is both on my Desktop and was also uploaded to the server

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.