What is the Difference between Pixels and Vectors?

1.1K followers

Updated 3 years ago

Is there a difference between pixels and vectors and why would it matter to us?

You will probably use photographs on your website the most. Your logo can be either an illustration or a photo. And occasionally you might post an infographic or a cartoon.

When you are aware of the differences in the formats and whether an image is made by vectors or pixels, the quality of your website improves. Either by speed or by sharper images.

Photographs are made of pixels

A pixel is the smallest element of an image. The more pixels, the more information that is stored, and the better the quality. The trick is to use the size that is required. At some point, more pixels don’t enhance the quality.

When the column on your website is 800 pixels wide, it’s not necessary to put a picture of 1200 pixels in width. It would take up space and reduce the speed.

The most used format is JPG. All cameras can at least save in JPG, although some call it JPEG.

JPG compresses an image, making the file smaller. The advantage is that the file takes up fewer bits. The downside is that compression comes at the expense of quality. What is lost, does not come back.

The loss of quality is not noticed when a picture is displayed on a computer or telephone screen. Unless you enlarge the photo. In the example, you can see on the right how the pixels are placed in a grid.

Other formats for photos

Apart from JPG, the formats can be TIFF, EPS, PNG, or GIF.

If you edit your pictures often, it's best to save them on your computer in a format that won't cause any loss of quality, like TIFF or a program’s own format, for instance, PSD in Adobe Photoshop. Then save only the last version you will use on your website in JPG.

I use PNG for pictures that I am going to publish on social media. The social media platforms make JPG from your images. By using PNG, there will be less quality loss than a JPG would have.

Vectors are for texts and logotypes

Rasterized images are built pixel by pixel. Vector images are defined by points that are connected by either a straight line or a curved line. Letter fonts are built this way.

The advantage of vector images is that you can enlarge them without loss of quality. Yet vector images are hardly used on a web page. A logotype that is made as a vector drawing is usually saved as a PNG or GIF. A web-based format is SVG which we don't see used very often.

Logos, drawings, and texts

Solid colored planes, such as those that mainly occur in logos, look very poor in JPG. In the example, I made both a PNG and a JPG of my name. Then I enlarged it. Of course, that is not good practice. You should only use PNG and JPG at 100% or smaller, but otherwise, it wouldn't show clearly enough what happens in these formats.

As you can see, the purple in the PNG version remains solid, except for the edges. But both the purple and surrounding white in the JPG version shows a huge amount of ‘noise’.

The name is made in Adobe Illustrator. Then I have saved it as a PNG and a JPG.

What is the optimal format for a specific application?

Save photos for your blog as JPG;
Save photos for Facebook or other social media as PNG. Facebook turns the image into a JPG and the loss of quality from PNG to JPG is less than from JPG to JPG;
Logos, cartoons, infographics, tables, and texts are best saved as PNG when they are going to be used on the web;
JPG, PNG, and GIF cannot be enlarged;
SVG can be enlarged without quality loss.

Do you miss anything in the explanation? Please put it below in the comment box.

Take care,

xxx

Hannie