Menu Close

Saving Images for Web

Why does this matter?

Optimizing images for the web is an essential skill for both designers and photographers. Here are the main reasons someone needs to know how to save images for the web:

Faster Load Times – Large image files slow down websites. Optimized images load quickly, which keeps visitors from leaving out of frustration.

Better User Experience – Fast, smooth pages feel more professional and keep people engaged longer.

Mobile Accessibility – Many users browse on phones with slower connections. Smaller files make sites more mobile-friendly.

Improved SEO – Search engines like Google reward faster websites with better rankings, and image optimization plays a big role.

Consistency Across Devices – Saving images in web-friendly formats ensures they look good on different browsers, screens, and operating systems.

Aim to keep your file sizes small, ideally between 100KB and 600KB. Icons and thumbnails can be even smaller to help your pages load efficiently.

Side Note: If you are asked to give us files, please use your first and last name in the file name so we know which student made what artwork. You can name your files like this: Jane-Doe-Basic-Photography-Window-Light.jpg

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 200KB – 600KB.
  3. If you have an image that needs transparency, you can use PNG. If the image will be used on our website, please ask if we need it as a PNG or JPG.
  4. If a website will use a “lightbox” to display the image, you might want to have your image on a white background with margins. See an example of how a logo can be presented with white margins in a light box.
  5. If you can’t get the image under 600KB, you might need to change the width or the height of the image to be 2,000px or smaller. If you adjust the height or width, make sure to keep the original ratio. If you change both the height AND the width, you risk the image being skewed.
  6. Make sure you have the checkbox for “Progressive” selected.
  7. Click Save. Choose where you want to save the image.

Click the images below to see an example of a lightbox. The first image is a JPG with a white background with plenty of white space around the logo, the second is a PNG with a transparent background.

Having a dark image with a dark background isn’t always the best idea, so knowing how an image will be used makes a difference.

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 a PDF file. Usually, a new window or tab will open showing the PDF file, or it might be downloaded to a user’s computer. Below are the steps to create a placeholder image.

  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.

How to Create a Placeholder Image in Animate

For a good user experience on a website, users usually want to click on a placeholder image before a video plays. Most browsers no longer support SWF files so 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 200KB – 600KB.
  4. Make sure you have the checkbox for “Progressive” selected.
  5. Leave the height and width alone to ensure it will have the same dimensions as your animation. If the placeholder is larger or smaller than the video, you run the risk of the interaction looking like a glitch when clicked.
  6. Click Save. Choose where you want to save the image.

Artwork by Jax Moore