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.
• The file should be between 100KB and 600KB. If there is a small icon or thumbnail, it can be smaller.
• See below for specs for each type of work.
• If you are asked to give us files, please make sure your files have your first and last name in the file name so we know what student made what artwork.

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 a logo that needs transparency, you can use PNG. If the image will be used on our website, please ask. We might need the image to be on a white background.
4. If you website will use a “lightbox” you might want to have your image on a white background with some extra white space around the image.
5. If you can’t get the image below 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 then the design program should automatically change the other 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.
8. Make sure to name the file correctly with your name so we know who made the image.

Here is an example of a lightbox:

How to Create a Placeholder Image with InDesign

Some web pages, like our Student Show, 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.
4. Make sure to name the file correctly with your name so we know who made the image.
   

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 a 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.
6. Click Save. Choose where you want to save the image.
7. Make sure to name the file correctly with your name so we know who made the image.