It has come to my attention that a lot of people with a passion for art don't fully understand the difference between different image file formats, color modes, resolutions, or a lot of other technical aspects of digital artwork. Since I've been learning a lot about this stuff, I thought I'd share some basic tips and information that might help anyone who wants to make the best of their artwork. For all the skimmers out there, I'll put the important points in bold.
First off, most image files are raster graphics (also referred to as "bitmap images,") which means that they are represented by pixels of varying color and tone. The file size of an image is based on the amount of pixels and the amount of bits per pixel. That's where we get terms like "8-bit," "24-bit," et cetera. Each bit represents a level of color data for that pixel, which means that a higher number of bits allows for a higher number of possible colors represented in the image. High bit numbers can also allow for alpha channels, which can give an image transparency.
Most people know the term "resolution" in regard to the display resolution of their monitor. Resolution also applies to the amount of pixels in an image, as well as the amount of pixels per inch of that image. Image resolution is referred to as "ppi" or "dpi" (pixels per inch/dots per inch.) My monitor has a resolution of 1920x1080 at 127 dpi, which means that an image file of that same resolution would fill my screen, but it would not fill the screen of a monitor with a higher resolution. An important thing to remember is that a high resolution does not necessarily mean high quality. A raster image may be upscaled to a larger resolution, but because it does not have any data to fill in the fine details at a larger size, it will appear fuzzy or pixellated. More on that later.
The resolution of your digital artwork should depend on what you intend to do with it. There is no one "catch-all" resolution. Generally, digital design teachers will tell you that images used for web should be 72 dpi, while images to be printed should be 300 dpi. While this is true in some cases, these resolutions should not be used for all web or print images.
Most computer monitors today display much more than 72 dpi. Mine is 127 dpi, which means that a 72x72 dpi image would appear little more than half of an inch on my computer. The problem is that there are many different devices today with many different displays, so if you are designing for a website or mobile app, you should do some research to see what dpi your images should be. Keep in mind that your image, whether it's a logo, a photograph, a painting, et cetera, will appear differently at its full size on different devices.
The same goes for images which you plan to have printed. 300 dpi is a good starting point, but keep in mind that for the highest quality printed image, the dpi should be 1.5 to 2 times the "lpi" (lines per inch) of the device it will be printed on. Lpi refers to the distance between halftone dots the printing device is capable of producing. 150 happens to be a common lpi for printers, which is why 300 dpi is often said to be the best resolution for printed images, but that is not always the case. Very high quality printers can go up to 300 lpi, which would require an image with a resolution of 450-600 dpi for the best quality printing.
In general, digital art should have a high resolution at the start, then it can be scaled down to the appropriate resolution for uploading to a website or whatever it is you plan to do with it. Always avoid scaling up a raster image if possible. There is no way to upscale a raster image without losing quality. Some software allows images to be enlarged with little loss of quality, but as previously stated, there still will not be pixel data for the software to fill in fine details. To avoid losing quality in my artwork, I scan all of my drawings at 600 dpi. That makes for very large filesizes, but it means that I have high quality digital backups of all of my artwork, and I can easily downscale it to any size I might need.
Always duplicate a file before editing and saving it. This goes for everything from a JPG you're color correcting, to a PSD you're working on with layers. If you save over the original image file, it will be lost. I can't stress this enough. You will always benefit from being able to access the original image data, whether it's for a personal artwork, a commission, or something you do for your job.
When an image file is saved, whether in Photoshop, MS Paint, Gimp, et cetera, it is usually compressed. That means that certain pixel data is discarded to avoid redundant data and allow for smaller file sizes. There are two types of compression: lossy and lossless. Lossy means that the image is highly compressed and lots of pixel data is discarded the process, while lossless means that only useless or redundant data is discarded and the image quality is not compromised. Except for some file types which are not compressed, most raster image files fall into one of these categories. I will explain a few common formats and what they mean for the presentation and storage of your artwork.
JPG is the most common image format online. They are 24-bit files capable of representing 16 million colors. However, it is a lossy format. JPGs have small file sizes, but editing and saving them over time will visibly reduce the quality of the image. JPGs suffer from distortion known as "artefacting," which may appear as noise around the edges of an object in an image, or as blurry squares throughout the image. This file type is best used when a smaller file size is more important than higher image quality (such as web use,) but it should not be used for images you plan to edit and save repeatedly, or for artwork you wish to preserve at high resolution.
GIF files allow multiple frames, making them capable of animation. However, GIF files are only 8-bit (256 colors.) Because of the small amount of colors, they can not represent smooth gradients of color, as a photograph or artwork requires. GIF format should not be used for artwork except for animations and simple graphics. On the positive side, GIF files are lossless, which means that you can edit and save one repeatedly without losing pixel data.
BMP is a simple, uncompressed file format. BMPs are compatible with many operating systems and image editing programs. The lack of compression means that BMP files are very large, but also that they lose no image quality. They are not good for online use because of their size, but they are good for images which will be printed. If compressed in a ZIP or RAR file, BMP format can be a great way to store artwork without loss of quality.
TIF format is lossless, capable of 48-bit color, and has large file sizes. TIFs are the standard for digital images among most professional photographers and printing businesses. The main downside to TIF files is that they can not be viewed in web browsers, so a TIF image must be converted to a different format before uploading online, such as JPG or PNG.
PNG files were originally intended to be an upgrade from GIF files. PNGs can be up to 48-bit and have transparency. They use lossless compression, which means that compared to JPGs, they have larger file sizes with higher image quality, and compared to BMPs, they have smaller file sizes with nearly equal image quality. They preserve image quality by only discarding useless data. PNG files are good for storing and editing artwork without worrying about loss of image quality after many edits. I keep all of my artwork in PNG format, as it is a very flexible middle-of-the-road format.
The last thing I want to comment on is color modes. There are two primary color modes which an artist should be concerned with: RGB and CMYK. Images are displayed on a monitor as RGB, which means that colors are created with red, green and blue light. Images intended for web use should be kept in RGB mode, which is the default for most editing programs. However, if you plan to have the image printed, it must be converted to CMYK (also known as "process color.") Printers use cyan, magenta, yellow and black ink (the K actually stands for "key color," as it isn't always true black) to create the spectrum of colors. When creating artwork or editing a photo, there can be a visible difference when converting to and from RGB and CMYK, so always make sure that you're editing in the proper color mode for the intent of the image.
This is also true for the Grayscale color mode. An image may be desaturated or turned black and white, but it will not truly be a black and white file until the Grayscale mode is selected. However, you should always convert an image to black and white before making it Grayscale, so that you can edit color curves before removing all color data except black.
Anyway, that's just a few things I thought might be worth sharing, for anyone who could benefit from it. If you have any questions feel free to ask me! I'll be glad to explain things as I understand them.