I’m currently developing a web that is all made from images (an HTML version of a Flash web).
The client provided me with a big PSD which I had to export each layer as a PNG to keep transparencies. There are some layers that are heavy in detail, and of course, in size, like 5MB each (mainly the background, it’s like 6 PNG, 4-6Mb each). Loading them with CSS3 renders them great, but I’m having performance problems in the browsers (Chrome lags, Opera reloads images each time I scroll down/up, Firefox lags, IE obviously lags, etc) and in a future when I upload the finished page to a server, it will suffer from heavy image load, a lot to download from the client.
My client knows this and I’m waiting for them for a possible solution (lower the PSD resolution for example), but meanwhile I’d like the go ahead on this problem and try something else, do you have any tips for this situation?
I tought in the basic solutions for this, like compression and other things, but if you have any other tips it will be great.
Oh, and another “detail”, this HTML version is primarly focused at iPad/iPhone devices.
1
Those big image cluttered designs are most often an relict of of older times to accomplish styles which are now available with newer standards like CSS3
I am currently rebuilding an skin for a web application and was able to achieve a size of about 20% of the old one. I tried the following, which might be also possible in your case:
- Got rid of border images and used CSS to style those
- Rebuilt many images as SVGs
- used CSS gradient backgrounds instead of images
1