Loading Big Images Faster

Question

What are some tips of loading big image faster. I look at this website:

http://vivianoheatingandcooling.com/wp-admin

and this

http://iplanwebsites.com/404

Both of these are fairly large images but they load extremely fast. I've also seen website that will advertise something and have 2 big images on both sides of their content:

http://www.gamefaqs.com/

GameFAQs does this alot. What are they doing to load these big image so fast on top of their page content etc? Is there some trick I'm missing other than saving for web optimization?

Answer 1

Image optimization is one key, the other key is designing so the optimization is effective. That's not so easy with a photo, but you can process a photo to optimize a little better.

In the case of the jumping sheep, the image is actually pretty small, resolution wise. It's 550 x 1900 and weighs in at only 150k. Considering that's pretty much everything that's being loaded, there are very few requests to the server, hardly any overhead... That will load really fast on most decent internet connections.

The other image is an image with very few colors in GIF format. You can have really high resolution images in PNG and GIF and get very small files if your palette is relatively limited. This is where these formats shine - In this case, the image should have been in png. As a png, processed by pngcrush , it's only 40.5kb rather than 62kb.

So yeah, image optimization and reducing overhead (Only load what the user needs in each view) are big steps toward snappy loading of large images.

Answer 2

Let's take iplanwebsites.com/404 as example :

1. it's a big image by size (width X height = 550px X 1900px)

2. BUT it's a low quality image - 141,14 kb - That's why that image loads very fast

   You can use a software tool to optimize your images, but you'll see some differences in image quality.

Same for, other two examples - they use big images but they only have some black simple shapes, and that means a small file size.

Remember : it's not about just the width and height, it's also about picture quality, number of pixels, number of colors etc.

Stefan