Showing a page content at once

Question

I have a website which contains some images in index.php
The problem I am facing is the whole page is not loading at once, I think images are taking some time to load
So what I have done is, I am showing an loading image at first and then after some time I am showing the page, that resolves the problem. But I am curious to know is there any other better way to do this?

Answer 1

I prefer to optimise the hell out of my images.

PNG images

You can use pngcrush to optimise your PNG files for you, but personally I find that once I'm done with it pngcrush only succeeds in making it bigger.

• Use Indexed-PNG wherever possible. This will limit you to 256 colours, and most graphics editors won't allow partial transparency in Indexed-PNG (but it is possible - you just need the right editor. I use a custom PHP script with the GD image library) but you can expect to drop file size down to just a tiny fraction of what it was.
• Reduce the amount of colours overall. PNG compression works best with blocks of the same colour, so reducing the number of colours improves compression.

GIF images

Especially for animations, there's a lot of things you can do.

• Reduce the number of frames. Avoid duplicate frames at all costs, and just set the previous frame to have a longer display time.
• Use combine rather than replace if possible. You will again have problems with transparent areas, but by using combine you can have each subsequent frame only change the stuff that... changes. This avoids the redundancy of re-writing the entire image if only a small part changes. GIMP has a useful filter "Animation > Optimize for GIF" which will do this for you.
• Reduce colours as much as possible. GIF is limited to 256 colours, but if you can limit yourself to 32 or so, you'll get a much smaller file.

Using the above techniques, I once managed to shove 8MB of raw image data into a 125kb animated GIF.

JPG images

JPG is great for photos, but cameras have a tendency to write MASSIVE files.

• Play around with the compression factor. Start at around 40%, and slowly bring it up until it looks acceptable. GIMP will show you a preview and the resulting filesize, so make use of that to find an acceptable compromise.
• Scale the image down. You don't need 9 megapixels or however massive resolution cameras take now...

---

The above should help you reduce the amount of size taken by your images. Obviously, you should also cache images appropriately, so they only need to be retrieved once. Also make sure that you specify width and height on image elements so that the browser can reserve the space for them and avoid jumping around as they load...

And you should be pretty good.