Optimizing user image experience to the best possible level

The original size of the image below is 216.53 kb You may check the repo. But with implementation of @pawjs/image-optimizer we were able to reduce the size of image by 57%. Thus making the final size to just 91.2KB

Cat & Dog Sleeping

Atyantik (ultimate) Optimization

Well the above was not enough for us and thus we wanted more light weight image with undetectable quality loss! Below is the set of functionality we were looking at:
  1. Best Auto Image optimization irrespective of its original size
  2. WebP Image format for latest browsers and fallback png/jpeg image for unsupported browsers.
  3. Different Images depending on the size of screen. Well that is very important, We don"t want any user to download large images for mobile devices! Thus implementing srcset.
  4. Why load image instantaneously? If the SEO bots can wait for image to load, why not users as well? Thus implementing Lazy image loading.

To fulfill such complex requirement with simple code we created @pawjs/srcset, @pawjs/image-optimizer

Check below!

Cat & Dog