Geek Answers Handbook

Handling heavy image web pages

I have a list of TV shows that show about 200 shows. Each of these shows has a small image, 40x60 pixels and 3 kB, and all of them are displayed on one page at a time.

Now I'm starting to think that it might not be such a great idea to have about 200 server requests each time a page is viewed.

What is the best way to solve such things without distracting from the graphic design of the page? Should I use some kind of “lazy loading” using JavaScript? Should I stick to all of this in one large image and use a bunch of hacker CSS to make it just one request?

+5
source share
7 answers

I think you can have several options

  • paginated
  • Lazy load via JavaScript
  • CSS sprites
  • and / or CDN

Markup is very common, and I think it works well with users. Lazy downloads for every JavaScript user (almost all).

Sprint can be achieved by capturing 20 at a time, for example, and creating one large image. I would say use 20 at a time, so the user does not need to wait for the super large image to load before they can see it.

You can use PHP and GD to capture each image in groups of 20, and then stitch them together, write their offsets, and then print them in the stylesheet.

CDN , cookie ( , www). .

Wrikken (!). - , .

+8

nginx static.example.com, -, , "" -. , , , -, , .

+8

- .

, , (.. ).

+3

: URI css. , base64 css. css , gzipped .

? IE 5-7 data-uri (IE 8+ ). , ( , ), apache , . javascript-, -uri IE.

http://www.websiteoptimization.com/speed/tweak/inline-images/

Rails Jammit, . -uri , .

+1

200 div , , , , ala css sprites

+1

CSS divs, -10px 30px. - CSS http://spritegen.website-performance.org/

+1

Use CSS sprites. The total image size for all your sounds images is about 600 kilobytes, which is probably too large to load at a time, so you can split the images into several sprites, each ~ 100k. Then you can set the boot order depending on what is being viewed.

0
source

More articles:


All Articles