News & Knowledge / Optimising Photos for the DP Website

Optimizing JPEGs for the DPChallenge Website The DPChallenge site only allows images of 150KB and under for display on the site. If you upload something bigger it won't let you continue with the upload. People often reduce the pixel size of the image to reduce the file size, but there is a better way - optimize it.   About Optimization Optimization programs Free alternatives Before Optimizing The Optimization Process (using Adobe ImageReady)  Optimizing using Neat Image Conclusion 1. About Optimization Optimization is a process of compressing the file size of an image so that it loads fast and efficiently, while preserving the quality of the display for use on the web. The number of colours in your image will change the rate of compression - e.g. if you are compressing a sepia or B&W image it will be far smaller than a group photo of people wearing different coloured clothes. The trick to optimizing is to maintain the quality of the image, while keeping it at the 640 pixel size (width or height, depending on the longest side of your image) for the DPChallenge site. Trial and error is the best way to learn about optimising images - keep experimenting. 2. Optimization Programs One thing to look for in an optimization program is the ability to compare the original image to the optimized image at all times. This really helps because it allows you to directly compare the two as you work. You need to spend some money to get the best results in optimisation (there are free version, but they do offer as many features as the paid versions). There are a are a lot of image optimization programs available as standalone programs or as part of photo editing programs. Photoshop (using Image Ready) is probably the most popular, followed by Paint Shop Pro and others like Fireworks and Ulead Smart Saver. What you choose will most likely depend on your budget. Neat Image (a noise reduction tool) is an alternative that isn't an optimization program,  but optimizes images as it goes. It isn't as accurate and you can't really specify much, but it works well. More about this below. The standard version of this is free. 3. Online Tools JPEG Wizard is the best free online tool I've found. It doesn't have the same control as a standalone program does, but it gives you three alternative outputs to choose from and is worthwhile if you can't afford to buy something. It has a good help file if you get stuck. 4. Before Optimizing Don't forget that before you start editing you should always work on a copy, not the original file. You'd hate to do all that work and not get it validated! If you have sufficient disk space you should work on the large version of your image. If you want a print of it later you'll have a high quality version to use. Once you're happy with the edits resize the image to 640 pixels in the largest side. Save a version of this too, in case you have trouble optimizing and need to recover the image later. 5. The Optimisation Process (using Adobe ImageReady) Note: I've use Adobe Image Ready to demonstrate how to optimize. Most programs will not be laid out the same way, but they will give you the same options when optimizing. Quality You can choose quality from 0 to 100 (see the red circle on the right of the image). Choosing 100 will compress the image the least, leaving it at a high quality and larger file size. The smaller number you choose the greater the compression and the smaller the file size. 150KB is quite a large file by web standards, so you should try to use the full 150KB as much as possible without going over. Experiment by choosing different sizes and comparing the quality and file size to the original. Start with high numbers and work your way down incrementally. (Note: If you are using an online tool you may have to keep submitting it until you are satisfied.) Format - Standard/Progressive Select Progressive to create an image that displays progressively in a Web browser. The image will display as a series of overlays, enabling viewers to see a low-resolution version of the image before it downloads completely. Choosing progressive can make the image smaller in some instances, so try this out if you really need to reduce file size.   File Size & Download Times In Adobe ImageReady as you change the settings you can see the file size and download time indicators changing. Most image optimisation programs will have similar indicators. When submitting to the DPChallenge website we know that the file needs to be 150KB download times aren't as important for us, but it's useful to know how long it would take something to download on a web page. Saving When saving it's useful to label your image "optimized" so that it's easier to find later on.   6. Optimising Using Neat Image Neat Image automatially optimizes images on output. The free version doesn't allow you to choose the level of optimization, but if you run it through it will compress the image as it saves. You shold do this once the image has been changed to 640 pixels at the longest side. To optimize an image without actually filtering it you need to run it through as if you were filtering the noise, but set the levels and reduction amounts to 0 (see below). Once you've saved it you'll see that the file size has been reduced. If you're lucky it will be under 150KB.   7. Conclusion If you upload an image bigger than 150KB to the DPChallenge website it will be compressed to 150KB, which will lose quality for your image. People often reduce the pixel size of the image to reduce the file size, but there is a better way - optimize it.   Always work on a copy, keep the original file for validation Less colours in the image mean a smaller file Edit the file first, then resize to 640 Save often Reduce the quality of the image incrementally, checking the file size as you go Try to stay as close to 150KB as you can The final optimized image. Final Size: 146.86 KB Tutorial created in Acuity CMS Written by: Mandy Hall, Creative Director, DDSN Interactive, email: mandy@pixels-bandwidth.com Links to learning more about Image Optimization & Management: Optimising Images: http://www.yourhtmlsource.com/optimisation/imageoptimisation.html Optimising JPEG files in Paintshop Pro: http://www.lemony.co.uk/Optimisation/jpgspsp.htm The JPEG Format Explained: http://www.westendweb.com/usability/optimize/jpgexplain.htm You should also look at the help file in your software, this often contains valuable information.