What are Raster Images and How to Optimize Them

What is a raster image? Raster files are the most common type of images used in the web. In this article, you will learn everything you need to know about raster graphics.

Well, raster files are 2D images with fixed width and height dimensions. These two dimensions create a matrix with squares. But how does this process make a picture?

In this matrix created by the dimensions, each square has its own color. Depending on the file extension and its bits, the number of possible colors varies.

There are also some Great Free Photoshop Plugins that can help you with exporting the final files.

What are Raster Images and How to Optimize Them: Which Files are Raster and why are they so heavy

File size of Raster Graphics

Have you ever wondered about a picture: “Why this image is so big?!”. Well, the filesize of raster images depends on many factors. Let’s explore them one by one:

• The dimensions of the image

If you have an image that is 1000x1000px, that makes 1 million pixels. If your image is 2000x2000px, this file contains information about 4 million pixel colors.

• The image’s file format

Different file formats have different structures, so they contain different information about the image. For example, JPG and PNG image look the same visually but PNG file format is a bit larger. The reason is it stores more information about each pixel. This is the transparency.

On the other hand, JPG files cannot be transparent. They only store a color number information about each pixel, e.g. “Pixel 1: #000” (#000 is the color number).

PNG file format contains the following information; “Pixel 1: #000, Transparency: 50%”. And this goes on for each pixel.

Another example of a file format that makes images really heavy is the RAW format. This file format contains a lot more information than PNGs and JPGs which is really useful for photographers when they are editing the photos. But for the ordinary user, it’s just an unnecessarily heavy file format. If you are not a photographer, switch the default file format on your camera/phone from RAW to JPG.

• Metadata

When you take a picture with your phone, your phone saves some data for your picture. Some of this data is important, such as: When was this picture taken? Where it was taken? From what device? But there is also a lot of unnecessary information that you probably won’t need.

• Bits

You don’t need to know in depth what bits are. Just imagine that “The more the bits, the bigger the file size”.

Let’s say you have a black-and-white picture. It has only two colors, so the file only stores information if it is the first color or the second color.

1 Bit color images can have only two colors. They only contain information “true” or “false” for each pixel. On the other hand, there are 32-bit images, that support 4,294,967,296 colors. They have way bigger sizes because they describe one of these colors for each pixel.

• Lossless Compression

This is something that can make your images smaller file sizes if enabled. To understand this compression, we have to go back to the bits.

Let’s say we have an image with 16 or 32 bits and let’s say that many of the pixels inside are the same color or very similar ones. Usually, the file contains the color for each pixel separately, but here is how lossless compression works. It says: “Hey, computer, these 30 pixels have the same color” instead of “This pixel is this color, this pixel is this color, etc.” when they are all the same one. This minimizes the code of the picture drastically. Remember, that this technique combines identical colors, but sometimes, in order to reduce the file size, it combines pixels with similar colors. So, be careful if you need your picture in the highest quality possible.

What are Raster Images and How to Optimize Them: Most Popular Raster Files

Most commonly used raster files

JPG – this file is the most commonly used raster file format for taking pictures and pictures stored on the web.

PNG – basically the same as JPG but has the option to be transparent.

GIF – it has the abilities of the PNG but supports animation. The animation in this format includes the information for a few images at once. It also has a limitation to 256 colors.

WebP – this is a new raster format created for the web by Google. It has the characteristics of a PNG  but it’s compressed, so the size is around 1/3 smaller than PNG. It can also be animated like a GIF but with a much-reduced size and more colors.

RAW – This file extension is used by cameras. It has the ability to save additional information about every pixel. It’s mostly used by photographers when they edit their photos. This additional information helps the editing software to edit the photos much better.

There are many more raster image formats but they are not so popular and not very often used.

You may also be interested in these related articles:

Top 80+ Sources To Find Design Resources and Assets

Top Adobe Photoshop Alternatives in 2020

What Are Stock Photos and Why You Should Use Them? [Master’s Guide]