Member-only story
How to improve performance of an Angular application by optimising images?
You have built a brand new Angular app full of high resolution colourful pictures and you’re ready to show the world how good your app is. Best feeling in the world, right? I get it.
BUT WAIT! In the world of print, high resolution images are a good thing. But on the web, large size, high resolution images can slow down your website’s page speed. As a result, your site doesn’t load up within a few seconds (that is usually 3 seconds before our short attention span runs out) and you start feeling embarrassed because your friend is waiting and glaring at the screen to see what you’ve built.
Sounds familiar? Well, if you have been in this situation before, keep reading. I’ve got you a 3 step solution which might help you load your site much faster.
Step 1. Analyse your images for appropriate dimensions (size)
This is probably the most important factor of all where you can reduce upto 50% or more of your payload requests from the user’s browser. When you use an image, make sure its dimensions are the maximum amount of screen it would expand to. Let us take an example to understand this:
Let’s say you have an image that covers half of your user’s screen and the rest half holds the…
