How to Save Images for Web in Illustrator

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

There are two different ways to save images for web correctly in Illustrator.

Option One:

Save for Web

With this option, you can only save out one artboard at a time. However, you will have more control over the quality of the photo.

1. Select the artboard you would like to save out by selecting the artwork on that artboard.
2. Go to File>Export>Save for Web (Legacy)
3. 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.)

4. 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%.

5. Click save. Choose where you want to save the image and then click save again.

Option Two:

Export for Screens

This option allows you to save more than one artboard at a time, which makes saving out the desktop/mobile versions of banners or multiple icons more time efficient. You will have less control over the quality of your photos.

1. Go to File>Export>Export for Screens…
2. A dialogue box will appear. If you do not want to save all of the artboards in your document, deselect the artboards you do not want by clicking on their preview on the left.
3. Select where you would like to save the images by clicking on the folder icon. Under format, select JPG 50. Next click on the settings icon.
4. When you click on the settings icon, another dialogue box will appear. Again, select JPG 50 from the list on the left and then change the Compression Method to Progressive. Click Save Settings.

   (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.)

5. To save, click Export Artboard and the location where you saved your images will automatically open. If you use Export for Screens again, your save location and settings will save for next time.