Performance through image optimization

What are different types of Image?

   GIF

• Simple format
• Only supports 256 formats
• Supports animation
• Initially patented

  

PNG    

• Supports 256 formats and true color
• Key innovation was alpha transparency
• Smarter compression technique ex: Delta encoding
• Better then gif
• Takes advantage that nearby pixel often have the same color

JPG

• Starts by splitting the image into 8/8 pixel block
• Takes the advantage that the nearby pixel often have the same pixel
• Uses a technique called as quantization. Pictures that are less significant visually are merged
• Rounding is more agressive then PNG .This is the main reason for lossy compression.
• Subtantially smaller then PNG
• The degree of compression can be adjusted, allowing trade off between storage and image quality with compression ratio of 10:1
• Does not support transparency

 Optimization technique for JPG

  It supports both baseline and Progressive Encoding

Baseline : 

• Full data is written to the file one after the other
• Paint from top left line by line

Progressive:  

• Only a part of these blocks are written 
• sequentially until another data is sent
• We would see a grainy image which would later become sharper and sharper

Note: For performance progressive are always better because they make visual progress faster

JPG PNG formats are relatively older type of format.These formats are around from 26 to 17 years.

New types of image format

Micorsoft  : JPGXR

Google     : WebP

• Smaller images often 1/2 or 2/3 size compared to older format
• These formats are not widely supported

What is the advantage of image optimization?

• Reduce irrelevant and redundant image data in order to store or transmit data in an efficient form
• Play a major role in web performance
• Increase site ranking (SEO)

How to Optimize an image for performance?

1. Serve scaled images. Based on the resolution adjust the size of the image
2. Use tools to compress the file
3. Based on the need select the type of compression what we need. Ex to choose between lossless and lossy image

Different tools available for image optimization

1. http://pngcrush.com/
2. http://www.imageoptimizer.net
3. https://imageoptim.com/  (MAC)
4. http://www.getpaint.net/index.html

Example of image optimization using imageOptimizer.net

Image Before Optimization size(5162 kb)

Optimizing above image using image optimizer

  Response from the tool after optimizing 

  

Optimized Image (107 kb)

Note: We reduced the size from 5162 kb to 107kB