05-23-2009, 10:33 AM
So I have a website that I am doing for a client, however I am a bit worried about the loading times. I have an intro page, which contains a 1.3mb animation on it, and of course takes a while to load. What I have done so it doesn't ruin the anim (you will see why) is created a loading page with a 1px version of it, so it loads into the users cache, so that when they come to see the anim it will be fine.
However on the main site I have an image slideshow with about 9 images, and these look horrible while they are loading. So my question is what is the easiest way to overcome these loading times?
The site can be found here: http://lordtopcat.com/ilminster.
05-23-2009, 10:54 AM
Honestly, I would question the use of the intro page at all. Every web design tutorial will tell you that splash pages and Flash intros are just useless because you’re adding one needless step/action to access that site.
When people visit a website they are usually looking for information, not for some funny animation or whatever (except if they are actually looking for a funny animation but your site’s subject doesn’t look lik that’ll be the case). So, as far as the design of a website goes you should do everything to make the information look appealing but not add more stuff that doesn’t have any informational purpose. As Antoine de Saint-Exupéry once said:
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
As to the images at the top: You’ve definitely got some room to optimize them (in terms of file size)!
You have saved photographs as PNG. Don’t do that. That’s what JPEG is for. PNG is only for graphics. If you save photos with millions of colors as PNG the file size becomes too big (as you see).
Keep the file size of images below 50KB (except you specifically have an image gallery with high quality photos). If they are as large as on your site it won’t hurt if they are 60KB but still, at least try to keep the file size as small as possible.
You can save JPEGs (and PNG as well) to be “interlaced” or “progressive”. This means they aren’t loaded from top to bottom but from “blurry” to “sharp” so when they are first loaded the complete image is shown but very blurry, and then it’s becoming more sharp everytime until it reaches its final state.
05-23-2009, 11:04 AM
Thanks Stephan, however the client has requested that introduction page. Any suggestions what I can do for that?
Also thanks for the information about the photographs, I will re save them as JPEGs :)
Edit: Thanks for the advice about the images, I've resaved them all and the combined size is 508kb whereas the combined size before was over 3gb, and they loaded almost instantly!
05-26-2009, 01:14 AM
Your intro is made up of a series of frames or pictures, if you made the intro, go through and resize the graphics to a lower DPI, you will decrease the overall size and have a faster load, most people will NOT notice the diference in pix quality.