Optimizing Images: A Lazy Web Designer’s Guide

Choose your image optimization wisely

Look at your image. Does it have millions of colors like a photograph does? Use JPEG.

Does it have flat color, as in a vector-based drawing with flat colored fills? Use PNG (or GIF).

Avoid using GIF. Use PNG instead. It is the open source equivalent (and even better) that was made to offer an alternative to the proprietary GIF image format.

Wikipedia article

TLDR? Look at this table instead

File Format	Image type
JPEG	Photographic imagery
GIF	Flat color, limited color palette, simple transparency.
PNG-8	Flat color, limited color palette, simple transparency.
PNG-24	Complex transparency

Lazy Web Designer’s Workflow

1. Plan your layouts (mobile, tablet, desktop at minimum).
2. Decide how big your images will in each of those layouts. For example: 800px, 1000px and 1440px. Whatever.
3. Export your image at each of above sizes.
   1. Depending on the type of image, select either JPG or PNG compression (for each image).
   2. If using Photoshop, use “Save for Web” for each export and carefully tune the settings to make the best size vs appearance compromise. This is a one-at-a-time process.
   3. If using Lightroom, export all the files as a JPEG. Look at the image quality in a few samples to see if you can tweak the settings to make the files smaller. This is a batch process.
4. Code your web pages so they use the srcset tag.
5. Optimize your compressed images with ImageOptim (click to see below).
6. Upload to your web site. Enjoy the faster upload time.

Use “Save for Web” for each image

Every time you save an image, make sure to use “Save for Web” (not the regular “Save”) and properly compare the before and after file sizes in JPG, GIF, PNG-8 and PNG-24.

Other tools have similar functions no matter the brand name. Bottom line, don’t just export and think your images are optimized.

Always deliberately set the smallest file size for the best visual quality.

Image Still Too Heavy?
Save complex background images as multiple optimized image files

If you have a background image that has several different types of image information within it (flat color, photographic imagery, transparency) you can slice the image into several parts and select the appropriate file type for that image type.

Once the optimized files are saved, you will add multiple CSS background images to the element instead of one single file.

You will need the CSS background-position property to display each optimized file separately and in the correct location:

 header { background: url(foreground.jpg) center bottom no-repeat, 
          url(background.png) left top no-repeat; }

http://www.css3.info/preview/multiple-backgrounds/

Reoptimize your images with ImageOptim

Once you are done, launch ImageOptim, which is a free & open source image compression optimization program.

ImageOptim will recompress the files you load into it. It will not save new copies. So, you may want to backup your files just in case…

Drag your images to ImageOptim’s window. Wait for ImageOptim to do its thing. It may take a while especially if you have many images.

Go tweak your HTML and CSS while you wait.