How to Save Images for Web in Photoshop

The Web and File Sizes

Large image file sizes over 200k significantly increase page load times. Even if a page with large images seems to load quickly on campus, these same pages may take much longer to load elswehere.

Keep your image file sizes small:

-Save them at less than 100% quality

-Check progressive when saving them for web

-Double check resolution

How to Save for Web Correctly

  1. Go to File>Export>Save for Web (Legacy)...Screenshot of Photoshop Menu
  2. A dialogue box will appear. Select JPEG and lower your quality down to 60%. Make sure you have the checkbox for “Progressive” checked.

    (Progressive means that when you first get to your web page, it will show a low quality version of the full picture that will progressively gets sharper as the page loads. Otherwise, the picture will load in full quality, but only a bar of information at a time.)Screenshot of Photoshop Save for Web Dialogue Box (pointing out Jpeg, Quality, and Progressive Checkbox)
  3. Check to make sure your photo size is around 100K or less before you save it. If it is too big, you might need to lower the quality down to 50%.Screenshot of Photoshop Save for Web Dialogue Box (pointing out file size)
  4. Click save. Choose where you want to save the image and then click save again.