Photoshop - Saving Images for the Web
22 Feb 2010 - tips-tutorials
One of the frustrations when receiving images from clients is that they are often in the wrong format or not suitable for use on the web. So we decided to produce this easy to follow guide to ensure your images are saved in the right format.
There are three main formats of images that are used on the web. These are :
JPEG Images
JPEG stands for 'Joint Photographic Experts Group' and should be used for multi-coloured photographs or realistic scenes. It SHOULD NOT be used for solid colour artwork like logos or images that only contain a few different colours.
When saving jpegs for the web, there is often a 'File Size v Quality' issue. Basically, the higher the quality of the image, the larger the file size will be and therefore will take longer to load.
Us wise folk at Candeo Media use Photoshop to save images for the web. This can be done simply by selecting File > Save For Web & Devices (Shortcut ALT + SHIFT + CTR + S). Make sure the file format is set to JPEG and we then set the quality level to 75. This ensures the pictures are still high quality and the file size is manageable.
If you dont have Photoshop installed, a good free photo editor is called GIMP, which is downloadable at www.gimp.org
GIF Images
GIF stands for' Graphics Interchange Format'. It is an 8 bit format which means the maximum number of colours supported by the format is only 256. GIF's should therefore NOT be used for muticolour images. GIF's support transparency, so can be used for images with no background colour, or solid colour images like logos that only use a few colours.
To save a GIF for the web on Photoshop, simply select File > Save For Web & Devices (Shortcut ALT + SHIFT + CTR + S) and make sure the file format is set to .GIF
PNG Images
PNG (Portable Network Graphics) are similar to GIF's in that they support transparency, but are far more supperior as they support multicolour transparency. PNG's should therefore be used on images that have an outer glow or a drop shadow on them.
One problem with PNG's is that they are not supported on older Internet Browsers like Internet Explorer 6, so a GIF alternative should be used for these Browsers with the glow or shadow switched off.
To save a PNG for the web on Photoshop simply select File > Save For Web & Devices (Shortcut ALT + SHIFT + CTR + S) and make sure the file format is set to PNG-24
Emily Mansfield
Web Designer, Candeo Media
Your Comments
Comment on this Post
There are no comments for this post yet.