Optimize Images for web – Interlaced and progressive image export option in Photoshop

When optimize images for web based applications, Its important to take care of the image optimization. Simply a fast loading website gets more hits.

In web development we use the following type of images

1. SVG – really nice and neat when rendering one mobiles / retinas
2. GIF – little old file format but still using for animated images (animating SVG will kill this file format in near future 🙂 )
3. JPEG – less size , fast loading and able to compress more..
4. PNG – can generate transparent images low files size and fast loading but having less compression options

Lets get in to the topic

Interlaced image option with PNG

When you optimize a PNG image for the web its important to select Interlaced image option when you exporting in Photoshop its very simple. see the attached image bellow

Interlaced image loads an early degraded version of the whole image as soon as possible and then progressively renders the image to clear state.

Non-interlaced image will load up in tiles showing clear image in each tile as it progresses to load in the image.

see the example in the bellow

Progressive image option with JPEG

lets see how to optimize a JPEG for web

when you exporting an jpeg for web its recommended to have selected progressive option like the bellow screen

You can adjust the quality level for a good balance of quality and file size.

Read the bellow links if you need to find more about image optimization

optimize images for web 
image-optimization from google