There are three main file types to focus on for saving images that are optimized for web viewing: JPEG, GIF, and PNG. Each file type has its own strengths and weaknesses and it’ very important to know and keep these in mind when saving an image.
GIF (Graphic Interchange Format)
- GIFs are best for images with large, flat areas of color and type.
- That have a max of 256 colors (8-bit) and greyscale (8-bit).
- GIFs support animation and background transparency.
- Lossless LZW compression shrinks the image data without removing detail (reduce more or equal to 60%).
GIFs were most popular many years ago, but are still an option for small image sizes where only a few colors are needed. Much like PNG-8, GIF files are restricted to only 256 colors. Because of this, GIFs should never be used for product photos. GIFs can be used for logos with a limited number of colors and line art. They are also beneficial in adding movement to an advertisement.
JPEG (Joint Photographic Experts Group)
- JPEGs are the best format for photographs and graphics that have a lot of color and gradient blends
- They can have millions (16+) of colors (24-bit) and greyscale (8-bit).
- JPEGs do not support animation or transparency.
- They have lossy compression meaning that some image data is lost after the compression.
JPGs (JPEGs) are the most popular file type for images on the web. JPEGs are perfect for photographs, or complex images containing lots of colors, shadows, gradients, or complex patterns. JPEGs handle these types of images well because they have a huge color palate to work with.
JPEGs can also be saved in high quality, low quality, or anywhere in between. This allows you to adjust and save the image exactly how you want, balancing quality and file size.
JPEGs are the most popular file format online and is commonly used for product images, photographs, and homepage hero banners/images.
PNG (Portable Network Graphic)
- PNGs are recommended for replacing GIFs by the W3C, they support images with large flat areas of color and type.
- PNG-8 has a maximum of 256 colors (8-bit) and greyscale (8-bit).
PNG-24 can have millions of colors (48-bit). - No animation is supported, but background transparency is supported.
- They have lossless LZW compression which shrinks image data without removing the detail. They can reduce file size up to 60%.
PNGs are another popular file format online. In Adobe Photoshop, you have the option to save PNGs as PNG-8 or PNG-24.
PNG-8 has a very limited color palate of 256 colors. While the image size is smaller, this wont be a good option for complex images and photographs.
PNG-24 provides a much higher quality image but comes at the cost of a larger file size.
Most importantly, PNGs can handle transparency. This is one of the biggest differentiation points between PNGs and JPEGs.
PNGs are many times used for logos because they nearly always require transparency, you will likely want a logo to be high quality, and logos are a small part of your website overall (requiring a smaller file size).
Saving Images Properly in Photoshop
- Save the Right Dimensions
You must open your image in Photoshop and view it at 100%. This allows you to view the image at the exact size it will be displayed on a computer monitor when you save the image for web. - Save Images for Web
It’s possible to reduce the file size without significantly reducing the quality of your images.- Use Photoshop’s “Save for Web” function.
- Open your image in Photoshop and go to File>Export>Save for Web (Legacy)
- A window will appear which will allow you to choose your export file format.
You can see the importance of choosing the right format for online viewing, based color, size, animation, and transparency needs. I hope that this posts helps you to better understand the online file formats better and what applications they are best suited for.