On first glance, this topic may seem extremely simple and obvious. You have to balance quality of the image and file size of the media to suite your site and its audience. Duh. However, this idea in itself is surprisingly not understood or practiced well on most websites. Certain small and unimportant graphics will have too high a resolution and file size while more prominent graphics will appear to not have enough. A lot of this boils down to the small details of file properties and how they are compressed or represented digitally.
Before we even go over saving or file types, I’d like to cover a couple details you should understand about web graphics. Images made to be viewed in browsers should be formatted in RBG. CMYK is traditionally reserved for print. This is because RGB is an additive system (the more colors added, the more the image turns white) while CMYK is a subtractive system (the more colors added, the more the image turns black). Think of CMYK as if you’re working on a sheet of paper; without any colors added, the sheet is just white. RGB is the exact opposite.
Try not to convert between RGB and CMYK as much as possible. If creating images for the web, always start in an RGB workspace rather than working in CMYK and then converting; this conversion process can add “noise” to gradients and mute colors. To check the color mode of a given image, check under Image > Mode.
Also, try to create the image in your intended file size before you try to save it. The “Save for Web” dialog does allow you to change the size of the image there, but gives you less options in terms of cropping, stretching, and scaling images. If you try to “Save for Web” any image that is too large, you may experience out of memory errors and slow performance.
All images can be divided into two file types: Lossless or lossy. For anyone familiar with digital music files, images operate on very similar principles. Lossless images are compressed but do not suffer any loss in image quality or information (like .wav or .flac files in music) while lossy images undergo heavy compression that results in a loss of quality and information (like .mp3 files).
The most common lossy image file is a JPEG while the most common lossless image files are GIF, PNG, and TIFF. In general (although there are some exceptions), lossy image files will be smaller in file size and therefore load more quickly.
Most photographs are saved as JPEGS. Some cameras don’t even allow you to take lossless photos while others allow you to take in the RAW format, which can then convert to TIFF. When you enter the “Save for Web” dialog and select to save an image as JPEG, you will then be able to choose what quality of JPEG to save as. While Photoshop has their own benchmarks (low, medium, high, and max quality), I prefer just choosing from the spectrum of 1-100, using the preview to determine whether or not it’s too pixilated.
While photographs are the most common JPEG image files, often times sites will save headers and icons as JPEGs to keep file sizes small and loading times short. Most of the time, people will not be able to notice the lossy compression of a JPEG unless they blow up the image or it is compressed to an incredibly low measure (like below 40%).
GIF images use a palette of up to 256 individual colors, which makes it great for web graphics that don’t use a wide spectrum of colors. Since GIFs are lossless, you will notice sharper edges and noiseless colors as opposed to those same images saved as JPEGs. GIFs are the smallest sized lossless images that I’m covering; just be sure not to use GIF if your image has a lot of different colors or smooth gradients. Then JPEG (for smaller sizes) or PNG (for sharper detail) would be preferred.
PNG images are the beastly file types of graphic design. They are lossless like GIFs, but support a significantly larger color pool and can even support transparent layers. That’s right, you can use PNG images that are slightly or fully transparent at certain parts of the image!
PNGs are higher quality than both GIFs and JPEGs, but this usually comes at the cost of larger image sizes and slower loading times. For graphics sporting sharp lines or text that must be very clear, PNGs are probably the way to go. Of course, it’s best to experiment, saving an image under multiple file types to see what looks best and at what cost of file size.