Best Image Format for the Web: JPEG vs PNG vs GIF

Other than shooting a spectacular photo or creating an awesome design, saving your work in the right format is vital. 

You don’t want the white background on your logo when you put your logo on a color background, and for sure you don’t want to have a blurry part of your high-resolution photo when you display it on your portfolio page.

This article will show you a quick guide on the three image formats (jpeg, gif, and png) and when it is best to use each method. 

Note: Screenshots are taken from Adobe Photoshop CC Mac Version. Windows or other versions might look different. 

When you save an image in Photoshop to be used on the web, go to the top menu File > Save As. Now in the new version of Photoshop, you’ll have the option to save to Cloud or your computer. 

After choosing the location to save your file, you can choose a format. As you can see here, you can save the image as Photoshop (PSD), GIF, JPEG, and many other formats. 

JPEG (or JPG)

Among the many formats that your image can be saved, jpeg is the most commonly used format for photos and this is no exception when saving for the web. Any full-color image should be saved in this format where the degree of compression can be increased as much as possible to reduce the size of the image without losing quality. 

Tips: A compression of around 60 – 70% normally reduces the file size without losing too much detail.

GIF

This format is well-known for making mini-animations. You can think of a gif as being the opposite of a jpeg. GIF is usually used for type, line drawings, and vector shapes. I would suggest avoiding saving photos or full-color images in this format. 

GIF files are compressed by the number of colors present in the file – the maximum used is 256, but you can save a gif as just 2 colors like an image with just black and white pixels for example.

When saving an image as a gif you can also save transparency in the image, which in web design means that images can be overlaid by other elements. It will not pick up semi-transparent colors like a png file, so you have to have fully transparent areas and opaque colors.

Simple animations can also be saved as gifs, where 256 colors are available for each frame. In the latest versions of Photoshop, the whole animation and frame process can be completed from start to finish. 

You can view the animation frames (Timeline) in Photoshop by opening the Timeline panel from the top menu Window > Timeline.

PNG

If you’re saving a logo for a website, PNG is your best option. PNG can be used for transparency where GIF and JPEG can not. PNG format can preserve areas of color that are semi-transparent. 

This could be used for example to create a button with a drop shadow. With an opaque button, and a transparent background but with a semi-transparent shadow, this button can then be placed on a variety of backgrounds.

Conclusion

Each image format has its own advantages and disadvantages, choose the format based on your use. JPEG is almost always a safe option if your image is high resolution and has complex colors. In this case, GIF is not the best option. PNG is great for vector graphics and when you need a transparent background. 

About June
June is an experienced graphic designer specializing in brand design. Photoshop is the essential tool that she uses every day along with other Adobe programs for her creative work.

Leave a Reply

Your email address will not be published. Required fields are marked *