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
- SVG – really nice and neat when rendering one mobiles / retinas
- GIF – little old file format but still using for animated images (animating SVG will kill this file format in near future 🙂 )
- JPEG – less size , fast loading and able to compress more..
- 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