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 the leaders in their field they will be using the fastest connection available. Not only that but a graphic designer’s goal is to produce high quality images that look great. As a factor in Google ranking, speed should be taken seriously by SEOs – images are often the largest files on a website so are key to bringing down the load time of a page.
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 you 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.
0.6% file size of the original image without compromising on quality
Photoshop’s Save for Web & Devices Feature
Adobe Photoshop’s ‘Save for Web & Devices’ feature 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’.
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.
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.
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.
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.
For more information on optimising websites for mobile phones including image advice read our article Mobile Web Design – What Developers Need To Know.
If you are interested in learning more have a look at our Photoshop Training Courses or ring us on 01273 622272.