How to compress website images in Adobe Fireworks and Photoshop

Let’s be honest, most of us don’t have much patience with slow-loading sites. Give it a couple of seconds and we’ll be back on the search results page clicking the next link down.
So, what can you do about those slow-loading images?

You have probably heard people use terms like ‘image compression’ and ‘image optimisation’, but perhaps don’t really know how to go about compressing or optimising your own images. If this sounds like you, read on!

Adobe Fireworks

Fireworks has a great feature called ‘Image Preview’ which allows you to adjust the size and quality of the image you’re exporting, and also gives you a preview of what the exported image will look like. With your image open, go to File > Image Preview. Alternatively you can use cmd+shift+x on a Mac, or ctrl+shift+x on a Windows PC.
Screen Shot 2013-08-02 at 11.16
Here you can choose the format (file type) and experiment with various quality settings. You can also alter the actual dimensions of the image by clicking ‘File’ in the top left-hand corner.

For web images, generally speaking, it’s best to stick to JPGs if you can as this will usually result in smaller file sizes. If your image has a transparent background, though, you will need to use a PNG and use the transparency options. Also, if your image is a flat graphic with just one or two colours in, you may find that a PNG version will be smaller than a JPG.

You can view the file size of your image just above the picture preview. You’ll notice this increasing or decreasing as you change the image settings. Really, the best way to optimise your image is by just experimenting with various settings and keeping an eye on the file size and quality of the preview image. Once you’re happy with the file size and image quality, click ‘export’ to save your file and you’re done!

Related articles:

Adobe Photoshop

Photoshop works in a similar way. This time go to File > Save for Web & Devices and a similar box to the Fireworks one will open.
Screen Shot 2013-08-02 at 11.29
Again, the best way to work is just by tweaking the size and quality settings until you’re happy with the file size and image quality.

Click ‘save’ and your optimising is done!

Written by Craig Farrall