Vanjaro seamlessly & automatically applies all the mentioned techniques below to optimize the images on the page. 

It's easy to create a web page. All you need is a few paragraphs of content and some amazing looking images. However, it's an art to create a web page that's optimized for performance. There are many variables to improve a web page performance; but, in this blog post, we'll specifically look at optimizing images for web to improve performance. 

Let's begin with file format. Should I save the image as jpeg, png, gif, or svg? There are many other file formats as well but let's look at these leading options. Jpeg is an excellent choice for bitmap such as a photograph. It has a lower footprint (file size) in comparison with png. Png is the only choice if you need to support transparency. Gif is great for lightweight animation. Svg is a clear winner if your images are vector based.

So far so good? Now let's look at WebP which is a clear winner due to its wide browser compatibility among other next gen formats such as JPEG 2000 and JPEG XR. It employs both lossy and lossless compression for optimized file size along with support for transparency and animation. On average, WebP file size is 30% less than jpeg or png which translates to 30% improvement in performance. So what's keeping everyone from using WebP? Not every browser supports WebP. 

Recommendation: Use Picture SrcSet to serve WebP images and automatically fallback to png/jpeg if needed. This approach requires that you maintain multiple file formats of the same image. 

This one is easy. If you're going to display an image that is 400px wide on your webpage then make sure that it's saved as a 400px wide image; rather than using a super wide image that is scaled down by the browser. 

But what about Responsive Images? There is a reason I say creating an optimized web page is an art. You may have a high definition image that is 1920px wide as your hero image on the desktop which automatically scales down to 350px wide on a mobile device. How do you handle that? It gets much more interesting when you factor in Device Pixel Ratio (DPR). Retina Display is a brand name used by Apple to indicate a higher pixel density; in other words, an iPhone may have a DRR of 2 which means it packs twice as many pixels in same resolution. If you're image is displayed 350px wide, then you must use a 700px wide image on a mobile device that has a DPR of 2 for a crisp; or a 1050px wide image for a DPR of 3.

Lazy loading is a simple technique of not loading images until they're actually displayed on the page. You may have a dozen images below the fold. There is absolutely no use in pre-loading these images if the user never scrolls down and looks at them. Lazy loading improves the page speed by only loading these images when they appear in the viewport.

Recommendation: Use loading=lazy attribute