Learn how to save JPG for web in Illustrator in this quick and easy step-by-step tutorial, helping you optimize your JPG files for use on the web – low file sizes and quick loading, here we come!
Video Tutorial
Want to follow along as I go through the save for options in Illustrator? Feel free to watch the video tutorial below at your own pace.
Step-by-Step Tutorial
Step 1 – Below I have a 1280x720px image in RGB mode. Once you are ready to export and you are happy with the artwork, go to File > Export > Save for Web (Legacy) (in older versions of Illustrator, you will find the ‘save for web’ option underneath the ‘save/save as etc’ options).
Step 2 – Once selected, your ‘save for web’ options box will appear. There are several options to choose from, so below this screenshot, I will go through the options you need to address and the ones you can ignore.
Save for Web Options
At the top, you’ll see ‘original/optimized/2-up’ – if you select ‘2-up’, it will show you the original file compared to how the file will look once optimized. More importantly, in the bottom left of each window, it will show you the file size (my image will be exported at 213k in this example). By having these two windows open, you can adjust the settings and see what your end file size will be.
Preset Options
In the ‘preset’ options, you can leave ‘name’, as you will set a file name once saved.
Below, you can select from 3 file types with various presets: jpeg, png, and gif. For the purpose of this exercise, we will select jpeg.
To the right, you can check the ‘optimized’ box to further optimize the file size once you have set the image quality.
Below, either use the ‘quality %’ to reduce the file size, or use the ‘maximum > minimum’ presets. You can keep an eye on the jpeg export in the 2-up panel and see the file size increase or decrease accordingly.
Checking ‘progressive’ will allow the jpeg to load progressively on the web, which can help with low internet speeds. However, in today’s era of fast internet speeds, this option isn’t as important as it used to be.
Checking ‘ICC profile’ will try to keep the colors used as close to their originals as possible. This option can be used if you’re, say, doing artwork for a brand that has a specific color palette, but remember that by saving to web you are automatically restricting the number of colors the jpeg can use.
If you have transparent areas of your artwork, jpeg will automatically fill them which the selected ‘matte’ color. If you wish to keep transparency, you will need to switch to png or gif, as jpeg will not allow transparency.
Image Size Options
Under ‘image size,’ you can double-check your dimensions and either keep them or change them according to your web requirements. Checking ‘clip to artboard’ will keep your export locked to your artboard dimensions.
If you have more typography or artwork in your file, you can try the ‘art optimized’ or ‘type optimized’ options in the dropdown below the file size options.
Other Options
Below the 2-up previews, you can select ‘preview’ to open the export in a browser to see what the quality would look like on your screen. You can ignore the ‘browser dither’ option.
Step 3 – When you’re happy with your save for web options, click ‘save.’ From there, you ‘save optimized as’ box will appear, and you can set your image name and select where you would like to save the file.
In the video tutorial, I put a save for web jpg and a normal illustrator jpg export side by side, to demonstrate how much the ‘save for web’ options can massively reduce the file size while still maintaining an image quality that is legible and clear for web viewing.
It is very important to take file size seriously when it comes to using JPGs for the web. Not only will this make your web pages and posts far more user-friendly, but it will also help you keep your website load times speedy.
Always use these options to make sure your web JPGs have a low file size while maintaining a perfectly acceptable level of image quality.