Tutorial - Saving Images to use on Your Site

Posted by Richard Rudy on 10 March 2014 | Comments

How to save images for your site

Page load times are increasingly important. One of the easiest ways to speed up your page load times is reduce the size of the images.

The wonderful thing about Photoshop is that it gives you some great tools to help estimate how your images will effect your load times.

Use Save for Web

Most people when they want to save their images they use Save As, and then just change the file type to something web-safe (jpg or png). If they're really keen they'll then adjust the compression on the jpg. A better option is to use Save for Web.

The Save for Web option gives you a bit more control and information when saving images to upload to your site. I'm using the latest Mac version of Photoshop, but there hasn't been much change to this dialog over the last few version. Just go to File > Save for Web.

Intro to Image Formats

There are a few basic image formats you should be familiar with;

JPG or jpeg. Pronounced "jay-peg." This is probably the format most people are familiar with. JPGs are great for photos and other "continuos-tone" images. The format is what's called a "lossy compression format" meaning images are compressed (made smaller" by basically throwing out some data and filling in the blank. This leads to the odd off color blocks you see in some jogs, especially around high contrast colour changes.

GIF pronounced "gif" hard-g or "jif" soft-g (the creator insists on jif, but the world seems content with gif). GIFs are good small images like logos that don't have a lot of colours. They do have the added benefit of allowing transparent pixels and multiple frames (animated gifs), but the limited amount of colours don't make them ideal for photos.

PNG pronounced "ping" come in two flavours: 8-bit and 24-bit. 8-bit PNGs are more like GIFs with a limited colour pallet, but they don't have the ability to be animated. 24-bit PNGs function more like a JPG and are suitable to photos and illustrations. 24-bit PNGs also support an alpha channel meaning you can have varying levels of opacity or transparency to the pixels. This is the fade-out image effect. Also, they use "non-lossy compression" meaning you can create smaller images without the JPG artifact.

Which format to use

If you're saving your logo and its pretty simple, a few colours with out any colour gradients, stick to GIF or 8-bit PNG. You'll get a smaller file with no artifacting.

If it's a photo or illustration it get a little more tricky. You'll be using either JPG or 24-bit PNG, but you may need to play with the settings to find the best balance between file size and image quality.

If you have transparency you need to use 24-bit PNG

The Save for Web Dialog

The nice thing about this dialog is that it gives you a preview of how your image once saved with the options, as well as the ability to compare multiple configurations. Under the preview it shows the selected format as well as the file size as well as download time. It defaults to 56.6Kbps, which is more dial-up and older EDGE cellular data speed.

save for web dialog

To the right of the preview are your image options, including a preset drop-down, a format selector and the options for the selected format. Bellow that is a colour table which comes in handy when using 8-bit formats and Image Size dialog so you can resize your image right in the Save Dialog.

sfw settings

The Left side contains various tools, but for our purposes we only really need the hand tool.

sfw tools

Along the top are the tabs for the various modes. Original, which show you the original image. Optimized which should be the default and shows you a preview of the image with current settings as set in the right side. Then there are 2-up and 4-up which let you compere multiple settings, by dividing the preview pain into sub sections.

sfw previews

Lets get started

File and Menubar

Find a photo you want to put on your website and select File > Save for Web. The size of the image isn't really important at this stage.
Select 4-up from the top bar this will best help illustrate how different settings effect the image. The top right is always the original image and as you use the hand tool all the previews will stay aligned.
Click on the top-right preview to select that configuration.
In the right column select JPG Low in the presets drop-down
Click on the bottom-left preview then click on PNG-8 128 Dithered in the presets drop down. For now leave all the options as is.
Click on the bottom-right preview then select PNG-24 from the presets.
Bellow you can see how it effects Photographic images and Logos.

sfw 4up

Top-Left (jpg-low) you'll see the image is kind of soft an blocky. That's the JJPG artifacting I was talking about

Bottom-Left (PNG-8) you'll notice there's viable pixels and the colour gradations aren't smooth.

Bottom-Right (PNG-24) this one should look almost exactly the same as the original.

From this simple demonstration you might thing PNG-24 is the way to go, but look at the file sizes. In my example the original is 703K, jpg-low is 18K, PNG-8 is 61K and PNG-24 256K.

Remember we're trying to optimize the image for both quality and size. The JPG is smallest file, but the quality is a little too low, let's see if we can change that.

Select the JPG low panel and then click the 2-up tabs the top so we only deal with the original and the jpg. 

sfw 2up zoom

You can adjust the quality slider and see how it effect the image and the size, you'll notice that even at 100% quality the image much smaller than the original, but often that s still too big.

sfw quality

At 55% quality the Image is still pretty good and it's less than 10th of the original size, and if you zoom out to Actual Pixels you'll see they're indistinguishable.

sfw 55 quality

sfw 2up actual

Let's go with that. Another feature in Save for Web is taht any charecters that can't be used in file anme are automtically stripped when you hit Save. "My Awesome Picture.jpg" become "My-Awesome-Picture.jpg".

Bear in mind depending on the image other quality settings may be better. You need to use your best judgement depending on your use.

You'll notice I saved different images on this post differently. Where a comparison was needed I used PNG-24 otherwise I varied the JPG settings to optimize for legibility of the text.

Hopefully this will help you better optiize your photos for use on the web.


comments powered by Disqus