Display page content immediately

Question

I have a website containing some images in index.php
The problem I ran into is that the whole page does not load right away, I think the images take some time to load
So, what I did, I first show the boot image, and then after a while I show the page that fixes the problem. But I'm curious to know if there is another better way to do this?

Answer 1

I prefer to optimize the hell out of my images.

PNG images

You can use pngcrush to optimize your PNG files for you, but I personally think that as soon as I finished with it only pngcrush manages to make it bigger.

• Use Indexed-PNG wherever possible. This will limit you to 256 colors, and most image editors will not allow partial transparency in Indexed-PNG (but it is possible - you just need the right editor. I use my own PHP script with the GD image library), but you can expect the file size to be reduced to a small fraction of what he was.
• Reduce the number of colors in general. PNG compression works best with blocks of the same color, so reducing the number of colors improves compression.

GIFs

Especially for animations, you can do a lot.

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

Using the above methods, I once managed to stick 8 MB of raw image data into an animated GIF with 125 KB.

Jpg images

JPG is great for photos, but cameras tend to write MASSIVE files.

• Play with a compression ratio. Start at a speed of about 40% and slowly lift it until it is acceptable. GIMP will show you the preview and the resulting file, so use this to find an acceptable compromise.
• Zoom out image. You do not need 9 megapixels or cameras with massive resolution now ...

---

The above should help you reduce the size of your image. Obviously, you should also cache images accordingly, so you only need to retrieve them once. Also make sure that you specify width and height on the image elements so that the browser can reserve a place for them and not skip on loading ...

And you should be very good.

Answer 2

It is hard to say what other options are available without knowing what the page looks like, but one of them is to reserve a place for the images so that the page text is quickly displayed in the correct position and then the images are loaded later.