1. Formats in web
2. Photoshop settings for saving images for web

Why it is important to optimize images for web:

• lower size of graphic files helps to load web site faster
• right optimization makes web site to look better - avoid or reduce JPEG noise, rough GIF edges
• image optimization considers not only to saving graphic files but also to HTML-coding and SEO what is necesserely if you want web site to be optimized for search engines and different devices

Formats to use in web:

• JPEG – for photographs, images with many colours
• GIF – for images with 256 or less colours palette (logos, icons, menu or any text which is displayed as image), images with one colour transparency or animated images
• PNG – has wider palette then GIF and half-transparency but size of file is bigger and you need to use special tricks to display PNG in Internet Explorer 6 (which is still one of the most popular browsers and its version) and lower. Personally I use PNG only in cases when it’s not possible to avoid using half-transparency.

Photoshop settings for saving images for web

“File – Save for Web and Devices” menu is used for optimization images in Photoshop. Hot keys “Alt+Shift+Ctrl+S”.

I use “Save for Web” menu even when I save photos or previews for photogallery. It’s more comfortable then to play with JPEG options from menu “Save” or “Save As”. You optimize an image, adjust settings of JPEG quality and can see size of the file and also quality of optimized image which you can compare with original file.

“Save for Web” window looks like this:

And has main settings:

1 – Image preview. I prefer to use 2-up settings where can compare quality of original image with optimized copy.

2 – Size of the file. Size of original and optimized files are displayed in preview windows. Also you can see how long it takes to load image on different connection speeds like modems or cable. Type of connection can be chosen by mouse right button click above these parameters.

3 – Optimization settings. This window has different settings depending on file format - JPEG, GIF, PNG-8, PNG-24 or WBMP.

JPEG setting:

• level of quality (Low, Medium, High, Very High, Maximum)
• option Progressive makes an image first to appear with lower quality and then become clearer during its loading
• you can type your own value of Quality on its field
• using Blur can help to reduce JPEG “noise”, better to use it when saving backgrounds
• ICC profile contains colour management information – how certain devices reproduce colours. Because not all browsers support ICC profile it’s better to uncheck this field what also helps to reduce size of file.

Main GIF settings allow to:

• use transparency;
• choose number of colours to use, maximum – 256
• set colour for edges in Matte field if you use transparency and want edges of image to look smooth
• reduce size of the file adjusting parameters in lossy field.

© Sunnieweb.com 2009