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 content. This is usually the case with split layout in web design. Now with your full width image, if you're targeting the desktop screen, the maximum width the image can expand to is half of 1024px that is 512px. That's an instant reduction of whopping 50%! 🥳

I understand this is hardly the usual case but you get the point of properly resizing your images. Every byte that you save takes you one step closer to a Great User Experience.

Step 2. Use the correct format - PNG / JPG / SVG

Great! You now have properly sized images. Let's see which format would benefit us the most. The ideal image format depends on how and where it will eventually be used. Try answering the following questions for every image that you use:

Do you need a high quality crisp image? Do you need it for your icons? Do you want an animation? Are you trying to save space and improve load times?

Here is an easy rule of thumb to follow

JPG — lossy and raster-based, use for photos and images with loads of colours where crisp lines aren’t absolutely essential. They won’t support transparency, although there are ways around this.

PNG — lossless and raster-based, use for images that need crisp lines or text (but do not need to scale), need transparency, have few colours. There are PNG8, 24 and 32 — research the best to use for your specific case (see this great article)

SVG — vector-based, use for flat line drawings, icons, logos that’ll scale to any size while file size remains small.

You can read more about it in this Article by Amber Wilson.

Step 3. Optimise your Images

If you're still reading, here comes the juicy part!

You have the right sizes and the correct format but still can't get the image size smaller than your threshold value which is generally about 300KB per image. Optimising your images is your next bet!

Image optimisation is both an art and a science: an art because there is no one definitive answer for how to best compress an individual image, and a science because there are well-developed techniques and algorithms that can help significantly reduce the size of an image - Source

I use ImageOptim Created by Kornel Lesiński for Mac. You can try out other similar applications that are available for your system. For a detailed list of image compressors, log on to this article by Mashable here.

You can also use online tools too like Squoosh.

How to use ImageOptim?

When you drag 'n' drop images into ImageOptim's window it will run several image optimisation tools automatically and combine their results, ensuring that you always get the smallest file without losing quality.

That's it! You now have much faster page loads (hopefully! 🙂 )

PRO TIP:

If you already have a website up and running, use this nifty little online tool that can quickly analyse and compress your already-published photos called Image Optimisation Tool (by WebsiteToolTester). Just paste your site URL, download the optimised images and you should be gold!

Summary

1. Eliminate unnecessary image resources and properly resize the ones needed. Images should only be sized as large as needed by your page layout
2. SVGs for logos, JPGs for non-scalable non-transparent images and PNGs for Transparent backgrounds.
3. Further optimise your images by using compression tools that remove bloated meta data and other unwanted image attributes.

What next?

In the next articles, I'll discuss about the following:

• How to lazy load your images?
• How to serve images in next-gen formats and handle fallbacks for browsers that don't support them?
• How to automate these in your Angular Build Flow using CLI tools?

Till then, keep learning and have fun while you're at it.

Keep on Hacking!

PS: I'm not a subject matter expert in any of these areas but I am learning. So, if you find any mistakes or have any suggestions, please leave a comment.