How to decrease the file size of this page?
Here is the link to the site:
My client is happy with the design, and I am happy with the code, as I have not resorted to the evil of table based design
But as you can see, it takes eons for the page to get completely loaded, as it has a total size of 3 MB!!!
I tried my best to decrease that, by converting ultra heavy images like the cloud background into flash, but still, it is heavy.
Friends, do you have any suggestions to make as to how I can make the page lose some weight?
Well how large are the Flash movies? Additionally, you have images that are PNG, that probably aren't optimized for the web, what's their file size?
The page loads really quickly without the flash so that is where the problem is.
Thank you for the replies, and sorry for my late response, I just joined Engineering College 3 days ago, and I was pretty messed up with all the admission stuff...
ryan, here's the stats for the flash movies:
The Clouds background in the background: 971 KB
The header animation:1.33 MB
All the Gifs and PNGs together: 505 KB
I tried every optimization stuff, like deleting unused elements from the library, and using 'save and compact' feature...
Any other suggestions as to what I can do?
I don't know anything about Flash, but 971KB for that picture of some clouds??? That's about 10x what I'd expect. Makes me wonder what's up with the other image sizes too.
Seems like you are burning a lot of calories with that background image. It’s HUGE, 1280 X 1580. While it does add an extra flare, can you really afford the bandwidth? Seems like you should be able to do better than 1MB for that image. I agree with Tracknut, that’s very heavy, even for such a large image. Flash may not be the best way to present that image. Since clarity is not paramount, have you tried various .jpg compression to see what you’d get?
Or, just using a jpg image, cut it in half, fade the bottom edge to white (the bottom half of the page is almost white anyway) and set the CSS to norepeat for the image. Or, perhaps with a little imagination you could create an image 20% that size (and edges that look alike) and just tile the background instead. That would cut nearly 750KB.
Then as far as your Flash banner goes, how much of the graphics are bitmaps and how much are vector? For example is that airplane a bitmap that’s being scaled or is it vector? What about the wispy clouds? You are also using an image as the background for the Flash document (the clouds), this I’m sure is a bitmap, right? Since you are striving for a transparent look anyway, no need to duplicate the clouds, they are already in your <body> background. Leave a white stage and then set all your animation on that (vector graphics only).
Then when you place the <object> on the html page, you already have
<param name="wmode" value="transparent" />
so the background clouds will show through.
As it is now, because you are using a background image in the “planeflash3.swf”, there’s a visable edge to the banner, which distracts from your transparent look.
You are also loading 5 small images in the gallery. For starters, they may not be visible when the page loads because they are down at the bottom (but they load anyway). Then even when a viewer scrolls down, 3 of them are hidden. A small Flash gallery using dynamically loaded images will not load the image until the viewer clicks a thumbnail.. or description.. or something. Saves you a little anyway.
But you’ve got a huge background image and a very large banner. Because of that you are using up nearly all the bandwidth to download those.
Eye for Video
There is no doubt left that this is the most helpful forum in the world. Thank you so much for looking at my problem with such detail!
I have to read it all completely and understand what you've said, eyeforvideo, and I will post as soon as I have re-read, understood and tried out all the potential solutions that you have suggested...thank you, again...
I have a followed a lot of the gr8 suggestions, and finally, I could decrease the page size by half... Here's the link: http://www.aviatorsworld.in/home.html
Glad to hear the good news!
Now how about a quick rundown of how you were able to accomplish that. That may be helpful for other viewers in the future.
I first decided to take a critical look and decide which images really needed to be transparent and which didn't. I decided that the clouds and the blue gradient behind could be easily merged into a low-size jpeg, and that nearly saved an MB of space. The next thing I did was to merge the flash effect and the jpeg, so that my transparency issue was solved and also this resulted in even smaller a file size than before. I also let go of a few clouds in the effect, and twisted and warped only 2 shapes again and again till I had different-looking clouds. Then I turned off interlacing on all the .png's and this also led to a phenomenal decrease in the file size...
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)