Digital images are built up on your screen from either pixels or vectors. There is a huge difference between pixels and vectors that are not always noticeable by just looking at the result.
Does this difference matter to us? Well, it depends on the intended use. When you browse a website and look at the pages, it doesn’t matter how the images are constructed.
However, if you have your own website and create images, you should be aware of the differences.
Some of the links are affiliate links. As an affiliate associate, I earn a small commission when you purchase any of the products offered through the shared links at no extra cost to you. This helps me to maintain this website and I thank you for supporting me.
Table of Contents
Pixels and vectors
A pixel is a single coloured point on the screen of your computer, tablet, or phone. A vector in digital images is a line that has a starting point, a point at the end, and a direction in between.
The use of images on your website
We use mostly photos on our websites, even when we are artists. Our art can be a drawing, a painting, or a piece of needlework. Occasionally you may post an infographic or cartoon. Your logo can be text-only, an illustration, or a photo.
Knowing the differences between formats and whether you should create the image with vectors or pixels will improve the quality of your website. The gain will be through speed or sharper images.
Photographs are pixels
The smallest element of an image is a pixel. If the image has a lot of pixels, a lot of information is stored, and the quality will be good. The trick is to use the required size and no more. At some point, more pixels don’t enhance the quality.
If the column on your website is 800 pixels wide, it’s best to use a photo with a width of 800. It’s not necessary to put a picture of, for instance,1200 pixels in width. It would take up unnecessary space and reduce the speed of your website.
The most commonly used format is JPG. All cameras can at least save in JPG format, although some call it JPEG.
With JPG, an image is compressed, making the file smaller. The advantage is that the file uses fewer bits. The disadvantage is that the compression comes at the expense of quality. What is lost can’t come back.
This loss of quality is not noticed when an image is displayed on a computer or phone screen. Unless you enlarge the photo. In the example here, you can see from left to right, how that quality loss shows.
Other formats for photos
Professional cameras and even some smartphones can save pictures in RAW format. This format holds the original, pure and unprocessed data. You will need a special program to edit these images and it is not a format you can use on a website.
RAW files are huge. To give you an example: an image of 5616×3744 pixels will be 26 to 27 Mb in RAW and 8 to 9 Mb in JPG (saved in very high quality 80) or 4 to 5 Mb when it is saved in quality 60.
In addition to JPG and RAW, other formats that can be used are TIFF, EPS, PNG, or GIF. TIFF and EPS can be used on a website but I would strongly advise against it. PNG and GIF are suitable for websites and I will explain about those formats later.
If you edit your images frequently, it’s best to save them to your computer in a format that does not degrade quality, such as TIFF or a programme’s own format, like PSD in Adobe Photoshop. Then save only the last version which you intend to use on your website in JPG format.
Related: Photography is my Passion, why is Taking Pictures Important?
Vectors are for texts and logos
Rasterized images are built pixel by pixel. Vector images are defined by points connected by either a straight or a curved line. Fonts are created this way.
A vector line is called a Bezier curve and is defined by pulling the handles in a certain direction.
The advantage of vector images is that you can enlarge them without losing quality. Nevertheless, vector images are hardly ever used on a website. A logo created as a vector drawing is usually saved as PNG or GIF. A web-based vector format is SVG, which is not (yet?) used very often.
Logos, drawings and texts
Monochrome parts of an image, such as those found mostly in logos, look very bad in JPG.
In the example, I created both a PNG and a JPG of part of my name. Then I enlarged it. This is not a good practice, of course. You should only use PNG and JPG at a size of 100% or less, but this way I could show the differences best.
As you can see, the red colour in the PNG version is completely preserved except for the edges. But the red in the JPG version shows a large amount of “noise”.
Related: Is it Important to Identify Different Drawing and Painting Techniques?
The difference between pixels and vectors
As you have read, vectors and pixels give different results. One format is not necessarily better than the other. It highly depends on the use of the image after it has been created.
What is the optimal format for a specific application?
- Save photos for your blog as JPG with the optimal sizes;
- Save photos for Facebook as PNG. Facebook makes a JPG of it 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 TIFF cannot be enlarged. If you can’t avoid enlarging the images in these formats, try to limit it to a maximum of 125%;
- SVG can be enlarged without quality loss.
Do you miss anything in the explanation? Please put it below in the comment box.
