Optimizing Images for the Web

Larger file sizes mean better quality, but they also result in slower websites. To limit the load on your users’ browsers, we go through a process to downsize these images. There are multiple options for free software that can resize images; however, this tutorial will review how to optimize images using Photoshop and ImageOptim.

  1. Open your image in Photoshop.
  2. Resize or crop your image to the appropriate dimensions. If it’s a logo or icon, crop out any additional white space.
    Screenshot of image resizing in Photoshop
  3. Go to File > Save for Web.
    Screenshot of saving image file in Photoshop
  4. Under preset, select JPEG, very high. Quality should be 80.
  5. Check to make sure that the boxes for Optimized and Convert to sRGB are ticked.
  6. Press save and enter a descriptive file name.
    Screenshot of saving optimized image in Photoshop

Crunch Down the File Size with ImageOptim

  1. If you don’t have it, download ImageOptim.
  2. Open ImageOptim.
  3. Navigate to the image in your file manager (Finder for Mac; Windows Explorer in Windows).
  4. Drag and drop the file into the program window. You should notice that your file size has decreased.
  5. Upload the image to your site as media.