For someone who is new to media design, they’ve probably heard the term raster graphic/image and not been entirely sure what that means. Raster is the most common form of digital image file formats on the internet and there are a couple reasons why. The only other digital image type is vector graphic/image which we will discuss more in-depth in another resource article. Knowing the different advantages and how to properly use raster images can immensely increase your digital image quality while decreasing web load times.
.png | .jpeg | .gif
This is another name for raster images but it also refers to the data structure used to store raster image data. A bitmap image maps bits of data per pixel to a corresponding image being displayed on a screen. Higher quality raster images require more bits per pixel which allow for more color depth. This means once a raster image has been created its image data is saved to a predetermined pixel dimension and quality. With these ground rules being set we can take a deeper look into what this all means.
In design software depending on what digital image file format is being created will determine its Color/Bit depth. Obviously, the higher bit depth a digital image has the more image detail it contains. Nearly all computers and other display devices use a color depth of 24-bit known as True color. A 32-bit color depth image is typically a “true color” (24-bit) with 8 extra bits that refer to an alpha channel that allows for transparency.
- PNGs by default save to a 24-bit color depth but can be scaled to any desired color depth.
- JPEGs are only available in 8-bit color depth.
(Compare these examples saved to different color bit depths)
Efficient File Size
In design programs like Adobe Photoshop when saving out to a digital image file format there are options for selecting image quality. These options determine the amount of compression applied to the raster image. Lower quality means higher compression which can result in degraded image quality because of the lost data. On a simple image, it’s possible to save to a medium quality (typically about 70% compression) without much impact to the image’s quality. More complex images may need to be saved to a high quality (typically about 40% compression) because they need to contain more data to avoid detail in image quality from being lost.
Raster images tend to have a smaller file size than vector images. That is why most consumer grade digital applications store and render raster images such as JPEGs. When creating media design projects it’s important to always keep an edible design file in case you need a new raster image at different dimensions.
Always have Proper Image Scaling
Since raster images have a predetermined pixel dimension designers must be aware of a project’s required dimensions to get the best image quality. Enlarging a raster image will cause image quality to degrade as colors become blocky. This is known as pixelation. This is because when an image is saved to a specified size all excess data is lost. To compensate for the lost image quality raster images enlarge pixels which became visible as squares the more pixelated a raster image becomes. It’s important to keep editable design files and save out correctly scaled image files to get the best image quality out of digital files.
(check out these examples to see how a raster image is effected by pixelation)
Can pick a trade-off between image quality and file size.
Smaller File Size
Makes for more efficient file storage and easier to send.
Quick Page Load
Web browsers will load images with smaller file sizes more efficiently.
Hard to make changes to an image at a later date.
Increasing the size decreases the image quality.