The division of formats into raster and vector ones is conditional. Some files may contain both vector and raster elements. And yet each category has its own scope. This is the starting point for understanding which file format is right for your purposes.
Raster file formats
Raster images are made up of a set of dots (pixels), each with a different color. Raster graphics are resolution dependent: we can’t significantly increase the size of such an image without losing quality. If you download a picture with a size of 10×10 cm and a resolution of 72 dpi, and then increase it to a size of 100×100 cm, the image will look bad.
Remember, if you enlarge a bitmap significantly, it will result in a fuzzy, “pixelated” image.
Bitmaps are commonly used for photographs, digital illustrations, and web graphics (such as banner ads, social media content, and email graphics). The Adobe Photoshop editor is most commonly used to create and edit bitmap images, and to add effects, shadows, and textures to an existing design.
CMYK and RGB
Let’s say you realized that you need a bitmap file. Further, it should be noted that all raster files can be saved in one of two basic color models: CMYK and RGB. The choice depends on what the image file is intended for:
CMYK is a four-color scheme that includes cyan (Cyan), magenta (Magenta), yellow (Yellow), and black (Black). These colors represent the four inks that will be combined during the printing process. If your image is to be printed, it must be in the CMYK color model.
RGB is a model that includes red (Red), green (Green) and blue (Blue). These are the three primary colors of light radiation, which are combined into others. If your file is for the web, then it must be in the RGB color model.
Conclusion: use CMYK for printing, RGB for the web. Having mixed up color models, at the output – in a printing house or on a monitor screen – do not be surprised at a completely different color scheme. Be careful!
300dpi and 72dpi
In addition to the color model, each bitmap file has its own resolution. The average user doesn’t have to go deep into all this, just remember two numbers: 72 and 300. 72 dpi is the gold standard for web design. 300 dpi is the ideal resolution for a bitmap file if you are going to print it.
JPEG/JPG
JPEG is the most widely used bitmap format online. It is typically used to save photos, email graphics, and large images such as banner ads.
Use JPEG when:
- You are dealing with collages, art, photos for their publication online. JPEG is ideal for web images that need to load quickly.
- You want to print photos, collages or graphics. High-resolution, low-compression JPEG files are ideal for editing and then printing.
- You need to send an image for a quick preview to the client. JPEG images can be scaled down to very small sizes, making them great for emailing.
Do not use JPEG when:
- You need web graphics with transparency. If you need an image with a transparent background, GIF and PNG are the best options for that.
- You need an editable image with layers. JPEG is a flat image format, which means that all changes are saved in one layer. Take a closer look at the PSD format (Photoshop) if you need a layered document.
GIF
GIF (Graphics Interchange Format) is also a raster format. It is widely used for web images, animated graphics (advertising banners, email images, social media memes).
Use GIFs when:
- You want to create a web animation. GIF images contain all frames and time information in one file.
- You need transparency. GIF images have an “alpha channel” which can be transparent.
- You need a small file. GIF compression techniques can significantly reduce image files. For very simple icons and small web graphics, GIF is the best format.
Don’t use GIFs when:
- You need photographic image quality. While GIFs can be high resolution, they are limited to 256 colors (if you don’t know a few tricks). Photos tend to have thousands of colors and will look flat and less bright (and sometimes weird due to color banding) when converted to GIF.
- You need to print an image. Due to color limitation, most printed photos lack depth. If you need to print photos, use TIFF, PSD or JPG instead.
You need a layered editable image. GIF is a flat image format, which means that all changes are saved in one layer.
PNG
PNG is a bitmap format which stands for Portable Network Graphics. PNG is similar to GIF. It’s like the next generation GIF – the format has the ability to use transparency, but it can also display a higher color depth and convey a million shades. PNG has long been a web standard and one of the most common image formats used on the web.
Use PNG when:
- You need high quality web graphics with transparency. Moreover, you can set the degree of transparency (unlike GIFs, which have only the transparency option: on / off). Also, with more color depth, you will have a brighter image than a GIF.
- You have illustrations with a limited number of colors. Although any image can be in PNG format, a small color palette looks especially good in PNG format.
- You need a small file. PNG files can be reduced to incredibly small sizes, especially those with simple colors, shapes, or texts. This makes them ideal for web graphics.
Don’t use PNG when:
- You work with photographs or artistic full-color graphics. The final files can turn out to be very heavy, which will worsen the page loading speed of the site. If you work with photos on the Internet, use JPEG instead.
- You are dealing with a printed project. PNG graphics are optimized for the screen.