Photoshop Tutorial – Save for the Web

Images are the main cause of websites taking an age to load. Slow websites not only annoy users but can affect a website’s Google ranking.

Speed is often overlooked by graphics and web designers because as digital pioneers they are usually hooked up to the fastest connection available. A graphic designer’s goal is to produce high quality images that look great so they want their images to be as sharp as possible. As a factor in Google’s algorithm, speed should be taken seriously – images are often the largest files on a site so are key to bringing down the load time of a page.

This isn’t just something that concerns SEOs but anyone who produces images for the web. We offer a Photoshop for Web Graphics course for a more in-depth look into how to optimise images for the internet.

For advice on SEO for Images read our guide on getting your images ranked on Google Image Search.

Handily, Adobe Photoshop has a feature that allows you to optimise your photos for websites without affecting how an image looks. The tutorial uses a photo as an example but can be used for other images too. I will show you how I turned a 13mb photo direct from a camera into an 86kb photo suitable for the web.

save for web final product

0.6% file size of the original image without compromising on quality

Photoshop’s Save for Web & Devices Feature

‘Save for Web & Devices’ is a commonly overlooked but very useful tool. Most people just use File>Save which does contain resize bar and will tell you the resulting file size. That’s okay but Photoshop has a much better feature that is usually ignored – ‘Save for web & devices’.

save for web tutorial 1

When chosen this brings up a more comprehensive options panel with preview window. Using this tool you can resize the image, change image quality, choose image type, pick colour and more while you can see a live preview of the image along with file size and a predicted load speed.

save for web tutorial 2

This is useful little tool that estimates how long an image will take to load depending on internet connection. You can alter the connection speed by clicking on the drop down menu.

Photos taken on modern cameras are often bigger than monitors, let alone browsers. As you’ll be lowering the size to fit your website you can really lower the quality without and visual difference. The example I have used is direct from camera and so is 13MB. That is far too large for use on websites and would take 142 seconds to load even with a 1mb connection. As you can tell by the preview window the image is far too large for a website so the first step is to get the size you want. This can be done with the image size box.

You can input your own sizes or choose a percentage of original. If you were uploading the photo onto a photography site or blog you would want image size consistency so I have chosen a width of 750 pixels – this is big enough to show off all the detail in the photo but would fit within most browsers.

save for web tutorial 4

This has had the immediate effect of reducing the file size to 566.7kb and the download time to 7 seconds. This is still a long time for an image to load as the average web user wants instant content. You can shave those seconds off by reducing quality without any noticeable change to the image. JPEGs are useful because you can make them progressive. I’d advise this as it will allow the image to load gradually by quality so it will appear immediately blurry but clear up as it loads. If an image is not progressive it will load in horizontal bars which isn’t as attractive.

Photoshop has a list of quality pre-sets from Maximum to Low and also a slide bar to choose a custom quality. I recommend you use this as the most accurate way of checking file size against quality. Your aim is to make the quality as low as possible without having a noticeable change. I recommend gradually lowering the quality until you notice changes.

save for web tutorial 5

As you can I have lowered the quality to 40%. The decrease in quality is negligible but the file size is now only 85.3kb and the download speed 2 seconds! You could even consider going lower depending on the use of images on your website. At the end of this process I have reduced a huge 13mb photo to 85,3kb by resizing it for website browsing and then reducing the quality without any visible effect. That is decrease of 99.4% in file size that has no visible difference in quality to the average web user but gets the image on your site in a fraction of the time.

If you’re a serious photographer and are want people to see your photos in full quality then consider having the photos on your main site as links to the hi-res versions on a separate page. This means that your main website is unaffected but if people want to see the image in full size and quality they can.

If you want to optimise your image for mobile phone web browsers which require even more shrinking then you should make use of the Device Central tool which comes with CS5. This simulates how an image will appear on a number of mobile phone and tablet templates.

Similar posts you may like:

  1. Five Best Free Photo Sharing Websites
  2. Light Field Photos with the Lytro
  3. Different Uses of Contrast in Web Design
  4. What is a Raw File?
  5. Using the Quick Selection Tool

Tags

, , , , , , , , , , , , , ,
Aaron Charlie

Aaron Charlie is a Creative Design & IT expert at Silicon Beach Training. Connect with Aaron on Google+

View all posts by Aaron Charlie

Leave a Comment