Joseph Bisharat - Blog - Save For Web In Photoshop

What Does Save For Web Mean?

Whether you are writing a Do It Yourself (DIY) article or showcasing a recipe you made, pictures play an important role in visually describing a story to your audience.

Imagine in today’s time if you had to sit and wait for an image to load piece-by-piece as if you were using 90’s dial-up technology. You would exit out of that site faster than the Flash.

Users will typically upload an image to their website with no regards to it’s file size. Yes, that 10MB image might not seem large by itself, but it will burden a website much like wearing a parka burdens a swimmer.

This is where Save for Web comes in. Save for Web in Photoshop optimizes an image for your browser by doing the following:

  • Lowering the image quality to 72 ppi (pixels per inch)
  • Reducing the image’s file size
  • Converting the image to RGB (Red Blue Green) format

Let’s do our audience a favor and learn how to use Photoshop to save images for web.

Using Save For Web In Photoshop

Click on any of the links below to jump to that particular section:

Save For Web – The Long Way

Open up the image in Photoshop.

Joseph Bisharat - Blog - Save For Web In Photoshop 01

Go to File > Export > Save for Web (Legacy)…

You can get to this option faster by using the keyboard shortcut displayed in the dropdown menu.

Joseph Bisharat - Blog - Save For Web In Photoshop 02

The Save for Web popup should have come up.

Joseph Bisharat - Blog - Save For Web In Photoshop 03

There are a lot of options to configure, but we are only going to focus on three sections: The image type and quality, the image width and height, and the image file size.

Image Type And Quality

Here, you can select if you want the image to be saved as a JPG, PNG, or GIF.

With JPG, you can alter the quality percentage.

Joseph Bisharat - Blog - Save For Web In Photoshop 04

Image Width And Height

In this section, you can modify the image’s width/height or the image size percentage.

Joseph Bisharat - Blog - Save For Web In Photoshop 05

Image File Size

This section will update dynamically after each adjustment you make in order to provide you with the accurate image file size information. Use this to gauge how small/large you want your image size to turn out.

Use this with discretion as you should never sacrifice quality for image size.

Joseph Bisharat - Blog - Save For Web In Photoshop 06

Click on the Save… button, save your image, and you’re good to go!

Save For Web – The Short Way

If moving your mouse (or trackpad if you’re using a laptop) is too much of a hassle, here is a keyboard shortcut alternative to quicken the save for web process.

Simply press CTRL+ALT+SHIFT+S (Windows) or CMD+SHIFT+ALT+S (Mac) and the Save for Web window will appear to process your next command.

Refer to the following sections that were listed earlier on the page to understand the options within the Save for Web window:

And That’s It, You’re Done!

Phew, you did it. Your image is now website-ready for upload.

Apply this method for all the images you place on your site. It could make the difference between waiting five seconds for your website to load or five minutes (which in internet land is forever).

I hope you were able to learn something new! If you would like to know more about a certain web-development topic and want me to do a tutorial about it, shoot me a message and let’s make it happen.