Which Image Type Should You Use On Your Website?

Different Formats

There are four primary formats to choose from when optimizing images for the internet. Each format stores and compresses image information differently. These four main formats include PNG-8, PNG-24, GIF, and JPEG. Below we will discuss the different formats and what images they work best with.

GIF

The GIF format is a bit-mapped image format and is the most commonly used format for web graphics. It supports up to 256 colors, transparency, and animation. Typically the PNG-8 format compresses better for most web images, although for really small images, or images that require transparency or animation, GIF is an ideal choice.

JPEG

The JPEG (JPG) format works well for photographs and other large images with many colors because of it’s lossy compression algorithm. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. This often allows large images to be compressed more than any other format with little or no perceptible loss of image quality

PNG-8

The Portable Network Graphics is a bit-mapped image format that uses a loss-less data compression algorithm. It was designed to be a replacement for the patented GIF’s. This format does not support transparency, translucency, or animation. This format is the best choice for most internet graphics.

PNG-24

PNG-8 and PNG-24 are the same format, however when transparency, translucency, or more than 256 colors are used, 24 bits are used to represent each pixel instead of 8. This increases the size of the image and can usually be avoided. If only transparency is required than use the GIF format instead. Also try to avoid translucency by flattening the images so that you can use an image format with less overhead.

Choosing the Right Format

Adobe Photoshop has a nice feature within the “File -> Save for Web” function. It allows a nice 4-up view where you can compare the file size of three different image settings and compare the quality with the original. First compare the different formats GIF (with 256 colors), JPEG (high quality), or PNG-8 (with 256 colors) and decide which format is best suited for the given image based on the resulting image size. If JPEG is the best choice try to further compress the image by reducing the quality to an acceptable level. For PNG-8 or GIF images, try to compress the image further by reducing the number of colors used by the image. Often times you can reduce the number of colors down to 128, or even 64 colors, without any noticeable effect to the human eye.

Above content borrowed from: https://www.getsnappy.com/web-optimization/improving-page-load-times.html

Crop and Size Your Images Before Uploading

Image Resolution

One of the best things you can do to optimize your images is to save them as 72dpi before uploading them (72 dpi or ‘dots per inch’ is computer screen resolution). Images above 72dpi have no visual improvement when viewing them on the web, and can create very slow page loads for your website. If you are using a photo taken with a digital camera it becomes very important to reduce the image resolution before uploading them to your website since today’s digital cameras capture very large images that aren’t optimized for websites.

Image Size

It’s also important to crop your images to a reasonable size before uploading them to your website. Sizing and cropping your image to generally no larger than 500px to 600px wide can help your page load speeds. Sometimes you can get away with 250px wide depending on how your are using your image.

If you are using an image at a reduced size on your website, and never reference the full size image, then you would benefit from creating a copy of the image, resizing and cropping it, and saving it as a new file name before uploading it to your website. This will help to optimize your page load speed so that you are only pulling in images at the minimum required sizes.

If you are referencing an image on your website in more than one size than save and upload the image as the largest size required. You can then reference smaller sizes, and since the image is cached on the first view, the various sizes will load quickly.

It also helps to make sure your IMG tags in your HTML are calling out the size attributes to also help optimize page load speed.

Image Optimization Tools We Use

WordPress has its own image sizing and cropping tool built-in, so that is a good option if you need to crop or downsize an image. But often we need to do more image optimization beyond simply sizing an image. That’s where we look to some of our favorite Image Optimization Tools for Macs:

• The Preview application that comes with Macs is useful for quickly downsizing image size, image resolution, and cropping images…and it’s free since it comes pre-installed with every Mac (free).
• EasyBatchPhoto is a very affordable image utility for converting, sizing, and watermarking images, especially when you need to perform image manipulation on ‘batches’ of images ($24).
• EasyCrop excels at screen captures, image sizing, image conversion, and offers full drag-and-drop support ($12).

• ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations (free).
• Photoshop – no list of image editing tools would be complete without Photoshop, but of course, it is very expensive and has a steep learning curve, so it isn’t for everyone. We use Photoshop almost everyday, but if there’s another tool that can get the job done quicker we’ll use it since Photoshop takes a long time to load, and is a huge memory hog. However, Photoshop’s ‘save for web’ function is very useful for sizing, converting, and optimizing images for best results. Photoshop even provides an indication of how big a file will be when saved for web, and how long in seconds it will take to download, which is very useful info for web designers ($700 – $1,000).

Have some good Image Optimization Tools for Mac or PC? Please leave a comment so others can benefit.