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

interlace-image

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

  none-interlaced

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 

Add a Comment

Your email address will not be published.