CODEWITHSUNDEEP
javascriptcssperformancecross-browserrendering
Lis
Lis

Reputation: 624

How much does image size affect CSS rendering / painting performance?

I'm working on JS / HTML game, where all objects are HTML elements (mostly <img>). Their top and left CSS attributes (sometimes along with others, like margins, transformations etc) are dynamically modified by JS code (every frame, basically). I noticed a huge performance improvement, when I switched from using .png files to .gif (22 fps -> 35 fps), but still:

Can further reduction of files' size (by 10-30%) actually noticeably improve CSS transformation performance? I would just test it, but I'm talking about ~250 gif files; and I don't want to loose too much quality, too.

Upvotes: 1

Views: 1377

Answers (2)

Reto
Reto

Reputation: 76

Reduction of the the amount of data(=file size) which will have to be processed, will normally have a positive performance impact, but how much impact it will have has always to be tested and measured, as it depends always on how well your code works together with all surrounding frameworks, the browser and even how the underlying hardware does calculations. In a worst case where you have to create a lot of resizing an recalulate new pixels, especially if you have to increase the display size of your image again, you might even create a loss in performance. There is no absolute answer to how good or bad your change will be, until you have tested and measured it in your system yourself.

About Reducing GIF File Size:

  • A positive factor here is when you cut the width and height of the image by half, the actual file size can be reduced by around 75%.
  • When using GIF images, reducing the number of different colors used in the GIF image will reduce the size as well. Often you can select the number of colors when exporting gifs from image editor tools. In Photoshop you have an option "Export for Web" which will try to set the optimal settings for usage in web pages.

Regarding Game Performance and Images:

  • If you already know how you will resize the images(fixed sizes like +50% and +100%), using CSS Image Sprites with pre-resized images can create a good improvement, as you won't have to resize the image, but just use an existing part of the sprite sheet. This will reduce the amount of processing for image manipulation, and therefore increase the performance.
  • If you want all at once, performance, quality and small file size, the best way to go is replacing as much raster graphics with vector graphics as possible. Most of modern 2D Games use a lot of vector graphics.
  • Vector graphics are easier to resize, as only the splines have to be recalculated and filled, resizing raster graphics causes calculation for each new pixel.
  • All common modern browsers support the svg format and can be sized through css. If you want try it out, a free open source tool to create vector graphics is InkScape.

Hope this helps.

Upvotes: 2

Ramesh Navi
Ramesh Navi

Reputation: 773

Why don't you use JPEG? It's compact. Yes, Image sizes affect performance.

Also, check "CSS Image Sprites", You can have a single image with all your possible icons/images and can handle view using CSS. You'll get better performance as you'll be loading a single image.

Below graph may help you to decide.

Upvotes: 0

Related Questions