Saving images optimized for the web is an important practice for designers in today’s world. Load time is essential—if it takes 8 seconds for images to load to your site, it’s likely some of your customers have already moved on. While the patience level of humanity has greatly decreased over the course of the technological boom, we web-designers have found ways to adapt. Which is why we optimize image for web and devices.

The first thing to realize is that this is not a cut and dry case like Print (CMYK) vs Web (RGB) but requires many considerations. There are two main concepts to optimizing images: Compression and Color.

Compression is address in Lossless vs. Lossy. Lossless means one can shrink an images over and over while still maintaining the quality of the image while lossly means if the image shrinks over and over, so will its quality.

Color is address in Indexed vs Direct. Indexed indicates a specified color palate is inherit in the file (specified by the author) and can only display that set number of colors while Direct offers 1000’s of colors the author has not necessarily chosen.

So with these two components we can create the following combinations:

Lossly/ Indexed: BMP

I’m not going to touch on this because with these options, BMP is never a better choice than any of the following formats

Lossless/ Indexed : GIF

GIFs can be reduced multiple times while still holding their quality, but you will notice a “halftone” style dotting when compressing photographs as they have a maximum of 256 colors. While not great for photos, they are good for animations and simple logos or line illustrations.

Lossy/ Direct: JPEG

Saving as a JPEG is great for photographs because it drastically compresses images by removing details we wont notice, although if you continue to compress, details will be lost and unrecoverable. Therefor, its not the best for logos, but is typically the best way to go when optimizing images for a website. They are small, have most of their original quality, and will load with lightening speed

Lossless/ Direct: PNG

PNGs are the largest of all the file sizes, but allow for transparency. PNG8 has an Indexed color palate of 128, but PNG-24s are Direct. While they are large files, PNGs are great options for logos as they can be saved with optimum quality and can be placed on any color background.

Once you’ve decided which format you would like to use, lets learn how to save specifically for the web.

In Photoshop, FILE > Save for Web…, this screen should pop up.

In the preset Tab, select the file type you’d like to use

In Dropdown Menu, you can select which file type you want to optimize with.

Depending on the file type, you are provided with several other output options. For instance, you may want your PNG to have a transparent background or your JPEG to have an embedded color profile.

Lastly you can optimize individual files to a specific size. This is helpful when there is a maximum upload size.

Click the dropdown in the upper right hand corner and select Optimize to File Size.

In the following pop up you can specify to any size.

Its important to remember, depending on your goals, file types and sizes may be different. But however you chose to optimize, images online should be saved specifically for the web.