Why is my image blurry?

by Ling Nieh

Most of our clients don’t know the difference between vector and bitmap graphics. Now I know how geeky that sounds but the truth is, if you manage an online shop, dipping your toes in the technical water once in a while really benefits you.

So why do we need to know about vectors and bitmaps? Because once we understand how images display on a monitor, we can really utilize product photography and branding images on the online shop.

Bitmap Graphics

Nearly everything seen on the web is a bitmap. Bitmap graphics are made of pixels. A pixel is a tiny square that contains information about colour. A single image may have thousands of pixels and just like human skin under a microscope; these pixels are only seen when magnified.

Pixels can never change. When saving an image at a certain size, the computer remembers the amount and the placement of the pixels precisely. On the other hand, image size can change. When saving an image at a larger size, more pixels are created to fill the new space. The same goes with saving it at smaller size, pixels are removed to fit in the smaller space.

Think of it like pouring juice into a glass. Only a certain amount of juice would fit into the glass. No more, no less. Extra fluid overflows and it doesn’t stay in the glass. On the other hand, when there is not enough juice, water is added to fill the glass. The juice is diluted, the flavor weakened.

In the same way, the computer must add additional pixels to fill a larger area. When there is no source of information, the computer takes what is currently available in the image. This is why a bitmap graphic looks blurry, sometimes even blocky.

Vector Graphics

Vector graphics are made of points, lines and curves. This mathematical formula allows the computer to remember how the image should be drawn, rather than how it looks.

This is the key difference between vector and bitmap graphics. Due to the mathematical nature, the image can be redrawn at any size, I mean, any size! It can be as big as an airplane, or as little as a grain of rice.

However they also have its drawbacks. Vector images must remain relatively simple in comparison to bitmap images. It is impossible to display photo-realistic images. Therefore vector graphics are ideal for precise artworks, such as logos, which frequently need to be presented in different size and colours.

Now you know the JPGs, next time you can draw with me. Until next time, take care.