Today I want to take a few minutes to cover the differences in the GIF and Jpg file formats, and explain when it is appropriate to use each when optimizing your images. There are a couple of reasons this is important, image quality for one and file size for another. This article will explain which is the right format to use in each of these cases.
Note that I am referring to web use only. Formatting images for print is a whole other can of worms. Let’s get started.
I’m not going to go into a big history of the different file formats, but it’s important to understand a few things:
Images contribute to the load time of your web page. Using them sparingly and formatting them correctly will ensure the load time of your page is impacted as little as possible.
Images for the web should be formatted at exactly 72 dpi. Using a dpi in excess of 72 will add unneeded file size without improving image quality.
Because all computer monitors use RGB, you want to start with 24-bit RGB formatted images.
Now if you are creating or otherwise acquiring graphics and putting them on your blog you should be properly optimizing them for the web. We already know to use either GIF or Jpg, but which one?
Here’s a very simple rule of thumb you can use:
Use Gif for graphics or other images with solid blocks of color, and Jpg for photographs or images where colors blend together.
Use gif for solid colors, graphics, etc.
The GIF format supports a 256-color palette while the Jpg palette supports 16 million colors.
The Jpg format applies lossy compression to the new file. This means that jpg images quality is degraded every time you resave it. This isn’t ideal but it’s the best option for photographs and other images that contain complex colors.
Use Jpg for images/graphics with color gradation
On the other hand files formatted as Gif use lossless data compression. That means you can reuse and save files over and over without a loss in quality.
In a nutshell, to reduce the file size of a gif, you remove colors from the palette. To remove the file size of a Jpg, you decrease the image quality.
Pro Tip: If you’re not optimizing images but simply pulling them from the web, consider using a wordpress plug-in like wp-smushit to do server-side image optimization. Depending on the amount of images you use, this could help considerably with the load time of your website.
PNG is another popular option that includes support for transparency. These files are typically large and for that reason gif or jpg is typically preferred for a blog article or something similar.
Now if you are using images from external sources in a design, PNG is a decent, high-quality format to choose. I would prefer to start with PNG vs. a JPG or Gif if I was designing something in Photoshop, for example.
To optimize Gifs, Use the save for web setting in Photoshop and try 64, 128 and 256 colors. Use the lowest amount of colors that still preserves the look of the original file.
Also, If you are trying to use a transparent gif and have “fuzzy” borders when there is a large contrast between the border color and background, try using a PNG.
To optimize a jpg, try setting the quality between 70-85% Use the lowest percentage that still preserves the look of the original file. You can see the estimated file size on the bottom of the window. Finally, tick the “progressive” box and hit save.
Jpg can reproduce a wide range of color more accurately, if your optimized image has color bands instead of a smooth transition of color, you should be using a jpg.
In short, use jpg for images and use gif for graphics, copy and other items where colors don’t vary.
That’s all there is to it. Now you’re a web image optimizing pro! Please share this article if you found it useful, I’d appreciate it.
