Images for the Web: Guidelines for MIT Libraries: Optimize image size

Every time you upload a photo to the web, do these things:

Use the smallest possible image file size. Here's how:

1. Use Photoshop's "Save for web" feature. (If you don't have Photoshop, skip this.)
2. Run the image through an optimizer, like the Smush.it Uploader.
3. Choose file type wisely. Save as jpg when possible. (In Photoshop, the "quality" should be no more than 85. 75 is better, if it looks ok.)

Use file names that make sense.

• Bad: asd98yfbjHYWF.jpg
• Good: students-studying.jpg

Page load benchmarks

• Page load in < 1 second
• 300KB total for the page, so you want your image size to be much smaller than that.

File Types

JPG

• Lossy compression
• Best for photographs
• Does not support transparency
• If saving in JPG in Photoshop: if quality > 85, reduce to 85, or consider 75 if it saves more than 30%. If pixel area < 10,000, always reduce to 60, or lower if possible.

PNG-8

• Allows for transparency
• Smaller file size than GIF
• Okay for small icons, line drawings, etc.

PNG-24

• Lossless compression
• Highest quality image format
• Supports transparency

JPG vs PNG-24

• The safest formats for web use.
• PNGs are a higher quality, but larger file type.
• JPGs are a lower quality, smaller file type.

SVG

• If you are working with a line drawing, logo, or simple image with only a few colors, SVG may be a good option.
• SVGs are vector images, which means they can be scaled infinitely bigger with no increase in file size or decrease in image quality.

BMP/WMBP (Don't use)

• This is an old file format. If your image uses this file format, convert it to something else.

GIFs (Don't use)

• GIFs used to be a very common file type for simple line drawings, logos, etc.
• Unless you're animating something, GIFs are probably the wrong choice.
• Use PNG-8 instead.

Lossy vs. Lossless

• Lossless file types can be made smaller without detriment to image quality.
• Lossy file types can be made smaller still, with detriment to image quality.

Losslessly optimize all images. Do this every time.

Tools to compress file size

• Lossy compression: Adobe Photoshop
• Lossless compression
  • http://imageoptim.com/ (Mac)
  • http://pnggauntlet.com/ (Windows)
  • http://www.smushit.com/ysmush.it/ (web based)

"Retina" displays

• A pixel is an artificial unit of measurement, relative only to the display.
• Newer computers and mobile devices may have two or three times (or even more) the pixel density of older machines.
• This means that images that look fine on older displays may look blurry and distorted on newer ones.
• Whenever possible, check your image on a newer device to see how it looks.

Contact: UX/Web Services