Improve page insights.

[divyanshu-rawat]

Please find attached google page insights repot for http://www.ignitus.org/.
It looks good, but still we have some problem with rendering of images.
It would be great if someone can find a way to optimise it.

@Paarmita do you have idea about the same!.

[abhushanaj]

@divyanshu-rawat , found this medium article, I think this can be something??

[divyanshu-rawat]

@abhu-A-J solution sounds goof to me, but can you check if we can optimise images sizes as well :), like showing low resolution pictures initially when application loads and then high resolution after some time, or maybe lazy loading might be doing the same thing, so feel free to explore and let me know.

[abhushanaj]

@abhu-A-J solution sounds goof to me, but can you check if we can optimise images sizes as well :), like showing low resolution pictures initially when application loads and then high resolution after some time, or maybe lazy loading might be doing the same thing, so feel free to explore and let me know.

Sure, I'll let you know by tomorrow. I will search up on few things.

[gittysachin]

@divyanshu-rawat @abhu-A-J PNG files are consuming more data. So we can use WebP format instead of png. It provides better compression with lossless quality and is 26% smaller in size. The downside of using WebP images is that Safari and IE don't support WebP format. So we can load png for both and WebP for the rest of the browsers. But for loading low-res pictures initially and full-res pictures after sometime, would require double loading, though it will increase loading time. Lazy loading sounds good.

[abhushanaj]

@divyanshu-rawat @abhu-A-J PNG files are consuming more data. So we can use WebP format instead of png. It provides better compression with lossless quality and is 26% smaller in size. The downside of using WebP images is that Safari and IE don't support WebP format. So we can load png for both and WebP for the rest of the browsers. But for loading low-res pictures initially and full-res pictures after sometime, would require double loading, though it will increase loading time. Lazy loading sounds good.

One can also use picture tag to specify different size images, rather than just one . Something like these:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

The combination of lazy image loading and this can be used? Also media queries exits for css to change images based on screen resolution , something like this: (very suitable for background images)

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

and using this in combination with @supports will help it degrade gracefully on browsers as well

[abhushanaj]

@divyanshu-rawat @gittysachin should I work on this, and use a similar technique based on the discussion above (lazy loading images)

[gittysachin]

@abhu-A-J you can start working on this issue. But use lazy-loading-images instead of using different size images. We probably don't wanna use different size images for each and every image.

[abhushanaj]

@gittysachin Thanks! I'll get started then.

[gittysachin]

@gittysachin Thanks! I'll get started then.

You're welcome! Hope to see your contribution soon :)

[divyanshu-rawat]

Please go through #605 before staring this issue.

[github-actions]

Stale issue message