0

On my page, I'm populating quite a few images, they aren't SUPER high resolution, but I aggregate the images, so I don't have the stored in smaller sizes. When I start putting lots on the page, it gets sluggish. Is there something I can do to fix this? Like some kind of on-the-fly image compression?

Gordon
  • 312,688
  • 75
  • 539
  • 559
Adola
  • 588
  • 7
  • 21
  • I don't think so, I think it'd take away from the original design too much. Imagine one of those 'infiniscroll' kinda situations. – Adola Jun 22 '12 at 18:45

2 Answers2

2

Have you looked into techniques of lazy-loading your images? http://www.appelsiini.net/projects/lazyload

Looks like the problem happened because you were using the full-res pictures to display thumbnails. This is a performance nightmare! You might benefit from reading:

http://ask-leo.com/why_do_some_website_pictures_display_so_slowly.html

Wex
  • 15,539
  • 10
  • 64
  • 107
  • The problem with this solution, is that once all the images are loaded, which they will be eventually, I'll still get the poor performance. – Adola Jun 22 '12 at 18:46
  • 2
    Are you displaying all of your images at full size, or are you using the `width` and `height` attributes to display them? Maybe look into [TimThumb](http://www.binarymoon.co.uk/projects/timthumb/)? – Wex Jun 22 '12 at 18:49
  • Truthfully, I don't know if they are being displayed at full or not, they div container they are stored in has a limited size. (I don't know if the whole image is still being loaded despite not being full sized). This timThumb might be something I need. – Adola Jun 22 '12 at 18:50
  • 1
    if you could post a link to the webpage in question it would make it easier for us to help you. – edwardmp Jun 22 '12 at 19:08
  • 1
    75.117.215.212/newgameplus/TEST/ Ok, my testing situation: In the SECOND search bar, type in 'Final Fantasy VIII' and 'Final Fantasy VII' Then after a brief loading period, start hitting 'append new items'. As the page fills, you'll notice a performance drop. Yeah, sorry about this being so terribly awkward, but thi si my live testing code. – Adola Jun 22 '12 at 19:33
  • Yeah, it's definitely the fact that you're using full-size images that are being resized by the browser to fit into their smaller containers. You should set width of your image containers to be fixed, and use a server-side script to make thumbnails that have the fixed width you defined. – Wex Jun 22 '12 at 19:37
  • Other than the making a script part, what does fixing the width help here? Or are those not un-related things? – Adola Jun 22 '12 at 19:39
  • Fixed-width containers mean that the thumbnails you create won't need to be resized by the browser. You're almost guaranteed that the browser will need to do work if you're using fluid width. Keep in mind that fixed width doesn't mean fixed height. – Wex Jun 22 '12 at 19:41
  • Ok then, I guess I'll mark this one done. I have so much work left to do! – Adola Jun 22 '12 at 19:43
0

You really need to make thumbs of these images to make it quicker. It makes no sense to download all high-res images at the same time.

edwardmp
  • 6,339
  • 5
  • 50
  • 77
  • I agree, but I don't know how to get the thumbs prior to actually getting the data. And it seems TimThumb script below will at least compress it for performance purposes. – Adola Jun 22 '12 at 19:01
  • Where do these images come from? Are they always random from some other source or do you re-use them everyime? If it is the latter, you could just write some script to make thumbs of them, and you will use them to display on the page. Whenever someone clicks on the thumbnail, the high-res version will be loaded. Problem solved. – edwardmp Jun 22 '12 at 19:07