Skip to main content
Software Engineering

Return to Question

Post Closed as "not constructive" by Martijn Pieters, CommunityBot, Joris Timmermans, Jimmy Hoffa
deleted 4 characters in body
Source Link
Martijn Pieters
Martijn Pieters
  • 14.7k
  • 10
  • 60
  • 59

I'm currently developing a web site that is all made entirely from images (an HTML version of a Flash web site.).

The client provided me with a big PSD andwhich I had to export each layer as a PNG to keep the transparencies. There are some layers that are heavy in detail, and the size of the file is large. Mainlycourse, in size, like 5MB each (mainly the background, it's like 6 PNG files, 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 thea future when I upload the finished page to a server, it will suffer from heavy image load. It is, 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 tothe go ahead and fixon this problem. Do and try something else, do you have any tips for this situation? 

I thought of sometought 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 primarilyprimarly focused at the iPad and iPhone/iPhone devices.

Thanks!

I'm currently developing a web site that is made entirely from images (an HTML version of a Flash web site.) The client provided me with a big PSD and I had to export each layer as a PNG to keep the transparencies. There are some layers that are heavy in detail, and the size of the file is large. Mainly the background, it's like 6 PNG files, 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 the future when I upload the finished page to a server, it will suffer from heavy image load. It is 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 to go ahead and fix this problem. Do you have any tips for this situation? I thought of some basic solutions, like compression and other things, but if you have any other tips it will be great. Oh, and another "detail", this HTML version is primarily focused at the iPad and iPhone.

Thanks!

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.

Fixed multiple spelling and grammar errors and made it more concise.
Source Link
Akira71
Akira71
  • 2.9k
  • 2
  • 21
  • 22

I'm currently developing a web site that is all made entirely from images (an HTML version of a Flash web site.), the The client provided me with a big PSD whichand I had to export each layer as a PNG to keep the transparencies. There are some layers that are heavy in detail, and of course, inthe size, like 5MB each (mainly of the file is large. Mainly the background, it's like 6 PNG files, 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 athe future when I upload the finished page to a server, it will suffer from heavy image load,. It is 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 lie thelike to go ahead and fix this problem and try something else, do. Do you have any tips for this situation? I tought in thethought of some 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 primarlyprimarily focused at the iPad/iPhone devices and iPhone.

Thanks!

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 lie the go ahead 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.

Thanks!

I'm currently developing a web site that is made entirely from images (an HTML version of a Flash web site.) The client provided me with a big PSD and I had to export each layer as a PNG to keep the transparencies. There are some layers that are heavy in detail, and the size of the file is large. Mainly the background, it's like 6 PNG files, 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 the future when I upload the finished page to a server, it will suffer from heavy image load. It is 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 to go ahead and fix this problem. Do you have any tips for this situation? I thought of some basic solutions, like compression and other things, but if you have any other tips it will be great. Oh, and another "detail", this HTML version is primarily focused at the iPad and iPhone.

Thanks!

Source Link
MauJFernandez
MauJFernandez
  • 101

Better performance on web with big PNGs

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 lie the go ahead 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.

Thanks!