It sounds weird, but many people don't understand what an image is, so they don't use it properly. Later on, I will give you inexpensive resources to edit you images, but first, I want to explain what an image actually is. Knowing this can help you when working with printers or web designers, because they will be using and will require different types of files.
There are two types of images: Raster and Vector
Today we will talk about Raster Images, because you will most likely use those.
A raster image, is a file that contains "dots" or "pixels." Remember Super Nintendo games that had those blocky shapes and big squares of color? Those are pixels.
Every image used for printing or design work on the web is going to have pixels in them. The printer needs to know what color ink dots to put on the paper, and the computer needs to know what colors to show on the screen. Printers use CMYK (Cyan, Magenta, Yellow and Black), while computer screens deal with RGB (Red, Green and Blue).
The main confusion that happens with images is what images to use in web design and what images to use for printing - they are NOT the same thing!
We now know what pixels are, but how many pixels should there be? First, pixels are measured in DPI, which stands for "dots per inch." So, the more dots per inch, the better quality the image, right? Web does not need as many dots to show a high quality image. A 72dpi image will be crisp and clear on a web page, but the same image will be blurry if printed. This is why web uses 72dpi and the printer uses 300dpi.
Why not just use 300dpi on a website to make everything easier?
Easy. You could.... buuuuuuuuut.... your page will never load. Each extra dot in the image makes the file heavier. As an example, a 300dpi image can weigh 1MB, while the 72dpi can weigh 100KB, which is less than 1/10th the size, therefore the lighter image loads 10x faster on your web page!
Here are the 3 top types of image files that you will run into:
- This type of image in compressed to give you maximum color, but keep the size down. It is a go-to type of image, but be aware that the background will not be transparent. This type of image is also prone to "artifacting" which is a bit of fuzzy pixels at the edges of colored parts of the image.
- This file type may be a big larger than JPG because it isn't as compressed, however the image is crisp since there is rarely any artifacting.
- A PNG will let you have a transparent background. Web designers will often ask for this of your logo, etc. so they have more flexibility in their online designs.
- This is an older type of image and is being used less and less. The quality can be good for some images, but not for others, because the number of colors used in a GIF is limited.
- A GIF can be used for simple animations
In the next article, I'll show you how to crop and do simple edits to your images inexpensively, so you have more control over your own images and can more easily work with designers. Stay tuned!
RASTER VS VECTOR - "Bitmap VS SVG" by Yug, modifications by 3247 - Unknown. Licensed under CC BY-SA 2.5 via Wikimedia Commons.
CAVE DRAWING - "AltamiraBison" by Rameessos - Own work. Licensed under Public Domain via Wikimedia Commons.
PEAR - By Nickpick910 (Own work) [CC BY-SA 3.0], via Wikimedia Commons