Unoptimized images may cause a lot of performance issues and slow down your site significantly. In this article, I'll share with you some ways how to increase your web app performance dealing with images.
Lazy loaded images start loading only when they are in the user's viewport. That's a huge win because you don't need to load all the images at once.
The simplest way is to use native HTML
loading attribute and set it to
lazy on the
<img src="../assets/photo.jpg" loading="lazy" />
In the perfect world, you should never load a bigger image then you display, it's just a waste of transfer. You can define which image needs to be load depend on the user's screen resolution. There are a couple of ways to achieve that.
<img src="images/photo.jpg" srcset="images/photo_medium.jpg 100w,images/photo_large.jpg 400w"/>
In that attribute, you can tell the browser that you have the same image in different sizes by providing a path to the asset and intrinsic width in pixels (
- Use media queries
In some cases you can't use
srcset property because you don't use the
img tag. For example when you set the background image. The solution is simple, you can define different background images using media queries.
According to the Google Chrome Developers team most of your images should have less than 100kb.
You should consider using jpeg or webp formats. They are way lighter then png files. You can use squoosh the tool maintained by Google that allows you to convert and compress your images.
There are some tools that compress, resize, and make other transformations on your photo to reduce loading time. I personally use imagekit and it does the job very well.