Something that comes up a lot in my line of work is finding a happy medium between file size and quality. If you opt for a smaller file size, sometimes your image quality will suffer. With so many options (jpg, png, gif), how do you know which to choose? This short tutorial should walk you through when to use certain extensions.
In both Photoshop and Illustrator, you’ll find in the File drop-down menu an option for ‘Save For Web & Devices’. When you click this, a box comes up with a variety of options. Don’t stress! Make it easier on yourself and in the top left corner, click ’4-Up’. This will separate your image into 4 boxes, which will show you the quality for the size.
You’ll notice in the above screen shot that the drop-down menu on the right, labeled ‘Preset:’ is currently on PNG-24. This is where you can choose the different file extensions and then see their qualities and sizes.
PNG
PNGs are great for transparency when you choose the highest quality, but they are known for their large file size. If you use one or two colors, the size will be smaller than those images with every color of the rainbow. Keep this in mind when saving for web.
GIF
GIFs also do transparency, when you choose the highest quality, but they tend to put a white outline around your object or text.
JPGs
JPG is best for small file size, but you cannot do transparency at all. They are also notorious for pixelating or blurring text if you don’t choose the highest possible size.
These are certainly not ‘The Rules’ – as you’ll see in the comparison below, the JPG ended up being the largest file size, when usually it’s the other way around. When there are more colors in the mix, the JPG will almost always be the smallest size, but again the quality sometimes lacks.
Comparing the End Product
Seeing as my example was only one color, the file sizes are comparable. To show when transparency worked, I put the original image (the purple text) over the orange background.
The PNG file size was 10KB with great quality, and was able to do transparency flawless.
The GIF file size was 12KB, and although the transparency works, there is a white outline around the text. Unless your image will be on a white background, transparent gif isn’t usually the best option.
The JPG file size was the most with 19KB, and transparency was not an option. Here it shows that you are forced to have a white background around your image.
Hopefully this quick tutorial helps to clarify when certain extensions should be used, and what their shining qualities are.
