What are different types of Image?
GIF
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
- 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?
- Serve scaled images. Based on the resolution adjust the size of the image
- Use tools to compress the file
- 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
- http://pngcrush.com/
- http://www.imageoptimizer.net
- https://imageoptim.com/ (MAC)
- 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
No comments:
Post a Comment