Images are the number one perceived performance fail of any web app. A slowly loaded image can really impact your user’s experience. Through optimization and responsive image loading techniques you can have a major impact on your app’s performance.
Instead of raster graphics like PNG and JPG, try instead using vector graphics like SVG whenever possible.
1. Photoshop
Optimize JPG images using Photoshop’s web optimization.
2. TinyPNG
https://tinypng.com/
Excellent compression of images, especially of PNG.
3. WEBP Images
https://webp-converter.com/
A fairly new image extension with excellent compression results that supports alpha transparency.
However, it is not supported in all browsers. Using WebP with Modernizr for a workaround.
http://www.stucox.com/blog/using-webp-with-modernizr/
4. JPG 100% Compression, Double Scale!
Using your graphics editor:
- Resize your JPG to double its size. (i.e. 200% in size)
- Compress it with 100% compression rate (i.e. 0% quality)
You’ll be amazed with the result.