Why Use “Save for Web and Devices” for the Web in Adobe Photoshop

pi-articles-saveforweb
  • 5 Read Time(minutes)
  • 1/5 Difficulty
  • Ps Application

Image compression is a major factor in speeding up your website. If you’ve used Adobe Photoshop’s default Save feature, you might have added some extra bytes to your images, resulting in huge image sizes. By using the Save for Web and Devices option, you can generate smaller size images. Smaller size images = faster loading time (and reduced bandwidth) on the server-side. Faster loading time = increased user experience.

Why Compress Images for the Web?

Photos you download from the Internet, or images you produce with your photo editing software may contain data that has no real value to web designers. These data include information like camera type, exposure time and focal length for photos, and program name, author and copyright information for all file types. We really don’t need these information when creating our web designs.

How to Save for Web and Devices?

You can find the “Save for Web” option in Photoshop in the file menu, just under the usual “Save As” command.

In previous versions of Photoshop (CS5 and below), “Save for Web” is called “Save for Web and Devices” – which doesn’t make a difference, just to point out.

Why Use Save for Web and Devices for the Web in Adobe Photoshop

There is also a very handy keyboard shortcut which designers should definitely learn. It is Control+Alt+Shift+S for Windows users. On the Mac, it is Command+Option+Shift+S.

After hitting the keyboard shortcut, you’ll be greeted with this window, where you can do magic. The image preview you can see is a snippet of a special Szaboka’s Blog edition of my November Calendars.

Why Use Save for Web and Devices for the Web in Adobe Photoshop

First of all, you can toggle views in the topmost bar.

  • Original will save the original file. No point.
  • Optimized is the default view. You can start selecting Presets on the right.
  • In 2-Up mode, you can compare multiple setups of your image with different compression settings and extensions. Click on the left side preview, set up one preset; then click on the right side preview, and set it up too. You can then see how they compare in image quality and final image size under each of the preview blocks.
  • Yep, you guessed it! 4-Up mode is the same as the 2-Up mode, only this time, you can set up 4 different versions and compare them all against each other. The picture above shows how the 4-Up mode looks.

Tip: Under “Preset”, you can select the file extension. If you choose JPG, you can set its Quality to the right. You should also try out what Optimized and Progressive can do to your images!

Why Save for Web and Devices?

Let’s look at some image comparison on what you can achieve with Photoshop’s Save for Web and Devices option. I’ll be using a graphic of my Blog viewed on the new iPhone 5C.

Original Image, Normal Save Mode, 100% JPG

Just to have something we can compare to, here’s the original photo. This is the result you get when you hit Ctrl+S (Cmd+S on the Mac) and choose JPG as the file type (with the quality slider to the maximum value, 12).

Why Use Save for Web and Devices for the Web in Adobe Photoshop

The size of the original image is 128 kilobytes.

Save for Web, 100% JPG Quality

The next picture was “saved for web and devices” with 100% JPEG Quality.

The new size is only 118 kilobytes, because saving for the web removes some unneeded meta information. Can you spot any quality difference? No, because there is no difference at all in terms of quality.

Why Use Save for Web and Devices for the Web in Adobe Photoshop

Save for Web, 80% JPG Quality

The third demonstration image was saved using the web-way, but this time, with JPEG Quality set to 80%. Sharp-eyed people can see some rasterization in the image because of the compression.

This is the JPEG Compression you should use in order to save up a lot of file size, while still not compromising image quality too much.

Why Use Save for Web and Devices for the Web in Adobe Photoshop

The new image size is only 71 kilobytes.

Save for Web, 60% JPG Quality

This last image was saved with 60% JPEG Quality. We can clearly see the JPG rasterization here. Images of any type will get pixelated at this level.

Use 60% or less only when file size really matters!

Why Use Save for Web and Devices for the Web in Adobe Photoshop

The file size is only 41 kilobytes in this case.

TL;DR

  • Use Save for Web and Devices (Ctrl+Alt+Shift+S / Cmd+Opt+Shift+S) every time you don’t need camera information.
  • Use PNG file extension if you want a transparent background.
  • Use PNG when you don’t have gradients. Only use JPG for photos and textured graphics.
  • Use 100% JPG when quality (really) matters.
  • Use 60% or less JPG Quality when file size (really) matters.
  • Use 80% JPG for the rest of the time.

Thanks for reading through this quick-tip. If you happen to have any questions regarding the article, feel free to ask in the comments!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

5 Responses

Comments

  • Conetix said on 2013.11.11. at 6:45 Reply

    This is great

  • Jean Olson said on 2013.12.22. at 17:39 Reply

    When preparing images for the web and other online media, you often need to compromise between image display quality and the file size of the image.

  • JPHILIP said on 2014.03.23. at 5:25 Reply

    I always click the Ctrl+Alt+Shift+Enter to save for web, but it shows in 100% and sometimes take a long while to show the image. Then I have to scale down to 25% to see the entire picture. Is there a way to let the default show in 25% when saving?

    • Szaboka said on 2014.03.23. at 10:23 Reply

      Hello! Ctrl+Alt+Shift+Enter doesn't work here, it's Ctrl+Alt+Shift+S... must have been a typo. Anyways, I unfortunately don't know of a solution to set 25% as the default view in the Save for Web window. It's indeed a bit annoying when it takes a lot of time to render the preview.

Join the Conversation

Captcha: 7 × four =