4

I am currently developing a site in PHP where in a page 1000 of images is loading through AJAX. So it is taking a lot of time. Is there any Optimization Technique that can decrease load time. I dont want to change our image quality.

Image encoding will be helpfull?

Mrinmoy Ghoshal
  • 2,804
  • 1
  • 19
  • 17
  • 3
    Is there a particular reason that there's 1000's of images loading? Couldn't you limit it to say, 50, and then have the user scroll down and click "more" like Youtube, Facebook, etc. etc.? – h2ooooooo Dec 12 '12 at 10:38
  • 1
    by default, your browser will only load 6-8 resources from each domain at a time, see here http://stackoverflow.com/questions/5751515/official-references-for-default-values-of-concurrent-http-1-1-connections-per-se - You can get around this with multiple subdomains pointing to the same place – Jamie Taylor Dec 12 '12 at 10:43
  • 2
    If you are loading many small images for displaying, you can combine them into a single one and then use CSS to show the one you want. That doesn't have anything to do with PHP though. – Ranty Dec 12 '12 at 10:45
  • Your concept is great but here we need to show 1000 image at a time browser loads..I am trying to sending data:image/png,base64;fgkajhkadfkkhakdjhkhkjhkjadfjhkj like encoded image for every image request. Have you any idea @h2ooooooo – Mrinmoy Ghoshal Dec 12 '12 at 11:02
  • i didnt understand what is lazy load..Please provide Code.@Daya – Mrinmoy Ghoshal Dec 12 '12 at 11:05
  • 1
    @MrinmoyGhoshal My question was *why* you needed to show 1000 images at the time the browser loads. Is this a huge product page, or are they all icons/smileys/small images that could be converted into a sprite? Why are you loading it with ajax? If you told us more about your problem we could help you find a better alternative way. – h2ooooooo Dec 12 '12 at 11:23
  • @h2ooooooo Its a portfolio page and we have total 20000 images to show on that page. I am also think about youtube or facebook like show more option. Any better idea? – Mrinmoy Ghoshal Dec 12 '12 at 11:28
  • @MrinmoyGhoshal **Change. The. Design.** <- That'd be my main tip. Apart from that, the accepted solution will limit the amount of images loaded until you scroll. But 20,000 images is still way too much on *any* page to be loaded at once. Are all these things you've done? Are all images split into 500 parts? Is it because you're using an animation on every picture, and therefore they're split up? Could you this first if the image is hovered upon instead, or limit the amount of pictures drastically? Do you have a working cache system, and does it cache the ajax request (as they're static)? – h2ooooooo Dec 12 '12 at 11:31
  • @h2ooooooo Got Your Point. No Actually There are only near about 2000 images. This 2000 images are some texture image (500x350). Project requirement is to make upto 20000 variety of image with some custom text and another small image on it. – Mrinmoy Ghoshal Dec 12 '12 at 11:38
  • @MrinmoyGhoshal - You are not being realistic. I figure that you are not telling the truth. Others can decide for themselves. – Ed Heal Dec 12 '12 at 12:17
  • @EdHeal Why you are thinking that I am not telling the truth. I will use GD to print some different text on those texture. and I am here for learn not for telling all u guys a lie story.. – Mrinmoy Ghoshal Dec 12 '12 at 12:24

3 Answers3

2

Optimization and micro-optimization thoughts:

Decrease Image FileSize

This is probably the most important factor to really decrease the loading time (less to download -> faster to finish)

  • use some image optimization service like SmushIt or some local software like IrfanView
  • find out which is the best format for converting your images
  • try to lose some quality, you'd be surprised to see what 1% does sometimes with little to unpercievable loss
  • strip image MetaData/EXIF if you don't need it

WebServer & Hardware

Access times are another important factor

  • Apache is great but others might perform better for serving image files or small files (eg. Nginx/lightHTTPd)
  • tweak the webserver's config to suit your needs
  • pick a very fast storage (use RAM if possible)

Webpage

  • use a NeverEndingPage/load-on-scroll or "Click for more"
  • paginate your image sets (maybe by importance)
  • make your image containers and links shorter, strip the extension because browsers will get the filetype from the file's header, rename your files as a base(62) counter vs. the regular 1.jpg...20000.jpg (eg. <img src=Q8U>)
CSᵠ
  • 10,049
  • 9
  • 41
  • 64
1

Look into the caching logic for the pages. The images might be able to be cached by the web server. Do you use Apache or IIS?

Eugene Roeder
  • 219
  • 2
  • 7
0

better to display initially 50 images and load the remaining when page scrolled. here is an example of loading page at the time of scrolling

Daya
  • 1,170
  • 10
  • 22
  • better way to improve this "lesson" is to make all html loaded as normal, but images that you cant see - are without "scr" tag. and jquery script fills "scr" tag when u scroll down. – stasgrin Dec 12 '12 at 11:06