Menu Close

How to Save Images for Web

Large image file sizes over 2MB can significantly increase webpage load times when there are a lot of images on the same webpage. Even if a page with large images seems to load quickly on campus, these same pages may take much longer to load on someone else’s computer. That’s why a lot of web designers need optimized files for the web.

Keep your image file sizes relatively small by:

  • Following the steps below for each Adobe program.
  • Make sure the file is between 800KB and 1.5MB.
  • See below for specs for each type of work you will be submitting.

How to Save for Web with Photoshop and Illustrator

  1. Go to File > Export > Save for Web (Legacy)…
  2. A dialogue box will appear. Select JPEG and adjust the quality to make sure the file is between 800KB – 1.5MB.
  3. Make sure the width is 2,000px and the program will adjust the height for you, so leave it alone.
  4. Make sure you have the checkbox for “Progressive” checked.
  5. Click Save. Choose where you want to save the image.
  6. Make sure to name the file correctly.

How to Create a Placeholder Image with InDesign

Some web pages will have an image to preview a magazine layout or a book cover. We can call this a placeholder image. Website users can click on this placeholder to see the PDF file. Usually, a new window or tab will appear with the PDF file loaded or it might be downloaded to a user’s computer. Below are the steps to take to create a placeholder image a user can click on.

  1. Go to File > Export…
  2. A dialogue box will appear. 
  3. Make sure to change the format to JPEG or JPG then choose where you want to save it.
  4. Make sure to name the file correctly.

How to Create a Placeholder Image in Animate

Many web pages will have an image to preview a video. This is the case on YouTube. For a good user experience on a website that has a lot of videos or animations, it is nice to have them play only after a user clicks on the placeholder image. Once the image is clicked the animation can play.

Since most browsers no longer support SWF files make sure to get help from your teacher on how to export your animation to an MP4 or MOV file.

To create a placeholder image, follow the steps below.

  1. Go to File > Export > Export Image…
  2. A dialogue box will appear. 
  3. Select JPEG and adjust the quality to make sure the file is between 800KB – 1.5 MB.
  4. Make sure you have the checkbox for “Progressive” selected.
  5. Leave the height and width alone to ensure it will be the same size as your animation.
  6. Click Save. Choose where you want to save the image.
  7. Make sure to name the file correctly. DO NOT use spaces, use hyphens when naming the file. This will ensure the file will display properly online.

Artwork by Jax Moore