Which is better? Between using image file and draw vector shape

Question

As I said on the title. I just want to know which is better between using image files and drawing vector shapes (or path). I know that using vector is better for appearance but what about performance.

And if this depends on cases. Can anyone explain.

(This question may include WP7, Silverlight, WPF or even in general cases.)

Answer 1

Here is a general answer to compare pros/cons of Bitmap (what I think you mean by "image file") vs. Vector.

Bitmap-based images (gif, tiff, jpeg, png, bmp) are essentially the concept of mapping colours (and other data such as alpha layer) to a pixel grid. Different file formats offer variations of what is supported and levels of compression but this is the high-level concept. The complete map of pixels and data is stored in the file as a matrix/table.

Vector-based images, as you say, are path based. Instead of storing information by pixels, the file format will store geometric points and data.

The pros for bitmaps are:

• They usually render faster than a vector. This is because there is minimal computation involved in presenting the image (just take the pixel map and display).

• They handle "photographic" content better than a vector.

• They are more portable than vector. GIF, JPEG, PNG, BMP are more standard than any vector format (where usually Adobe has the market)

The cons for bitmaps are:

• They don't scale without degradation (pixelization)

• Manipulation (i.e. resizing, blurring, lighting, etc) of a bitmap is more processor expensive than a vector

• The files are usually much larger than vector-based files

The pros for vectors are:

• Flexible for scaling and manipulation

• Smaller file formats than vector

• Ideal for print and animation (i.e. manipulating a shape to produce the animation effect)

The cons for vectors are:

• Render time, depending on the complexity of the vector, can be longer

• Portability most formats are highly proprietary

• Work for "graphic" based images but not useful for photorealism

Hope this helps.

Answer 2

Jeremiah Morrill gave a great overview of WPF rendering that basically shows a vector will always be more expensive to render than an image. Basically an image gets treated as a directx texture...no matter the size, scaling or whatever, there is a set constant cost for rendering an image. As Jer's overview shows, even the simplest vector image takes a number of operations to render in WPF. The moral of the story is that when giving an option, go for the image instead of vector.