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.

  • This question is a poll and can't be answered with a single correct answer, voting to close. If you would suggest a solution or two and ask if they are appropriate then we could answer correctly with a yes/no and explanation of why, otherwise this question really can't be answered. – Jimmy Hoffa Mar 19 '13 at 17:07

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
  • Thanks Angelo.Hannes for your answer but this is not a "design", it's just a markup of images made in Photoshop, not grids or HTML like design, so I can't reproduce them in CSS, it'd be like trying to reproduce a real life photo in CSS. – MauJFernandez Mar 19 '13 at 18:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.