Image accounts to the most of the downloading that happens besides taking up most of the space. While images are necessary to grab attention and provide a right context, Image optimization could yield huge performance improvements. Image optimization is a technique which requires careful analysis of many image parameters like format, quality, pixel, size and many more.
The very first question you should ask is whether an image is required to achieve the effect. And if you must, then consider could that effect be achieved using alternate technology like CSS effects or Web fonts.
Once you have decided that an image must be used, there are three universally supported image formats: GIF, PNG, and JPEG. So, which format should you use?
Google provides below guidelines while selecting Images for your websites.
Do you need animation? If so, GIF is the only universal choice.
GIF limits the color palette to at most 256 colors, which makes it a poor choice for most images. Further, PNG-8 delivers better compression for images with a small palette. As a result, GIF is the right answer only when animation is required.
Do you need to preserve fine detail with highest resolution? Use PNG.
PNG does not apply any compression algorithms beyond the choice of the size of the color palette. As a result, it will produce the highest quality image, but at a cost of significantly higher file size than other formats. Use judiciously.
If the image asset contains imagery composed of geometric shapes, consider converting it to a vector (SVG) format!
If the image asset contains text, stop and reconsider. Text in images is not selectable, searchable, or “zoomable”. If you need to convey a custom look, use a web font instead.
Are you optimizing a photo, screenshot, or a similar image asset? Use JPEG.
JPEG uses a combination of lossy and lossless optimization to reduce file size of the image asset. Try several JPEG quality levels to find the best quality vs. file size tradeoff for your asset.
