8

this may seem like an odd question, and I don't know the formats of images so I'll just go ahead and ask...

I'm making a minesweeper game (relevant to different things too) which utilizes a grid of buttons, then I'm adding a sprite to the buttons using backgroundImage. If the grid is 9x9 it's fine. 15x15 it slows down and 30x30 you can visibly see each button being loaded.

That raises me to my question: Which image format would load fastest? Obviously, file size takes a part in the loading speed, however, I am enquiring as to if, say, a jpeg - with the same filesize as a gif - will load faster. or a bmp, png, etc.

I'm asking this as to see if I can get my grid to load faster using a different format.

Thanks!

Hans Passant
  • 922,412
  • 146
  • 1,693
  • 2,536
Anteara
  • 729
  • 3
  • 14
  • 33
  • 4
    Have you tried running a profiler against your code to determine what the cause of the slowdown is? It may not be the rendering of the image that is causing it. How are rendering your UI? – Jamie Keeling Nov 01 '12 at 11:37
  • Have you tried including the images in the application as embedded resources? – Ash Burlaczenko Nov 01 '12 at 11:38

4 Answers4

8

You want an image format that paints faster. There's only one, the one whose pixel format directly matches the video adapter's setting so that the pixel data can be directly copied without needing format adjustments.

On most any modern machine, that's PixelFormat.Format32bppPArgb. It draws ten times faster than all the other ones.

You won't get that format when loading an image from a resource or a file, you have to create it.

Do note that this still won't give you stellar paint speed if every cell in the grid is a control. Particularly if it is a button, they are very expensive to draw since they support transparency effects. You'll only get ahead here if you draw the entire grid in one Paint event handler. Like the form's.

A completely different approach is to cover up the visible delays with this hack.

Community
  • 1
  • 1
Hans Passant
  • 922,412
  • 146
  • 1,693
  • 2,536
  • Good, informative answer. I tried the hack you linked, and it works, however - only for the initial controls being created upon program execution. For example, if I create my grid buttons on startup, it will work flawlessly. But if say, I change the grid size from medium to hard, and create the additional controls needed to go from medium to hard ( a further 15 x 15 controls) it will still flicker. Do you have any idea as to why this would be? Also, that PixelFormat.Format32bppPArgb seems very interesting. I'll research that. – Anteara Nov 01 '12 at 13:04
  • You'll need to focus on the "you'll only get ahead" advice to get ahead. The reasonable upper limit on the number of controls in a form is 50. That creates about as many windows as, say, Microsoft Outlook. – Hans Passant Nov 01 '12 at 13:14
  • Alright, I suppose the hack really is just a hack n' slash method of putting a bandaid on the problem. I'll try and see if I can figure out how to only utilize one paint event handler in the grids drawing. I'm searching to find something but probably am using the wrong keywords. Could you send me a reference for allowing controls to all be painted at once, as opposed to being panted on a control-per-control basis? Thanks. – Anteara Nov 01 '12 at 13:19
  • There isn't much to it, just use the methods of the Graphics class. Press F1 if you need a reference. – Hans Passant Nov 01 '12 at 13:30
3

use the 8-bit PNG or GIF format and reduce the number of colors in the palette. Some image programs such as PhotoShop allow you to save the image for the web and fine-tune the image settings. By reducing the color palette from 256 to something like 32, you greatly reduce the size of the file. The less colors that the image has, the smaller the file size is going to be.

PNG has a similar feature called "Interlaced". You may want to turn this feature off so that the full image downloads quicker.

Because the 8-bit PNG and GIF formats have the potential to result in much smaller image files, try to keep this in mind when creating graphics and illustrations for your application. Try to keep the amount of colors to a minimum and use flat graphics instead of photographs. This way you can create images with palettes of 16 colors, keeping the file size extremely small and fast to load.

Best Regards

Ibrahim Oudah
  • 96
  • 2
1

Are you reloading the image every time you paint a button? If so, there's your problem - solve it with a cache.

Are you painting the image at its native size? Runtime resampling can create a performance hit.

plinth
  • 48,267
  • 11
  • 78
  • 120
0

use PNG or GIF it's faster types of images

alaa yacoub
  • 102
  • 6