Vanjaro Blog

rss

Latest news and announcements from Vanjaro

 

 

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. 

 

Determine File Format

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. 

 

Resize Images to Scale
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. 
 
Basically, we need to maintain multiple versions of the image in different widths for different devices. The easy part is that the browser automatically figures out the device's DPR and automatically serves the correct image. The interesting part is how to we define the size of an image according to the viewport. Remember the 1920px wide hero image on the desktop which automatically scales down to 350px on a mobile device? Well, it scales to 768px on an iPad in portrait mode and 1024px in landscape mode. So basically, now we need to figure out every possible combination based on our media query breakpoints. 
 
Recommendation: Use Picture SrcSet along with Sizes attribute to serve responsive images according to device pixel ratio & viewport.   

 

Lazy Loading
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

Showing 4 Comments

Avatar
Don Gingold 8 months ago

Interesting. After hitting 'save comment' on my last comment, and then trying to close the tab in Safari, it complained that I had entered text and do i want to really leave. FYI.

Reply

Avatar
Mandeep Singh 8 months ago

Thanks. We'll look into it.

Reply

Avatar
Don Gingold 8 months ago

Mandeep, this is fascinating! Vanjaro takes all this into account? So it sounds to me like every picture should simply be uploaded via Vanjaro as a 1920px PNG. All the concerns you mention are being covered by the builder.

Concerns over pictures taking long to transfer because of their resolution are gone. Even remembering to cut the resolution in half when designing a page (on a desktop screen) where the picture is half the width now is moot because we know that in a responsive world, the picture will be full width on mobile devices which may have dense pixel displays. Again, leave it to Vanjaro!

Of course, this is only for pictures added via the Vanjaro page builder. Other 3rd party modules that handle images, even when added to the page via the vanjaro builder, will do their own thing with the image files, so in those sections of the page controlled by those modules, you still need to be aware, right?

Reply

Avatar
Mandeep Singh 8 months ago

That's correct. Simply upload a HD (1920px wide) image and let Vanjaro figure out the rest.

Vanjaro automatically saves the HD image in optimized quality to reduce file size. Next, it creates WebP versions of the image that are approx 30% smaller in size than original image. Vanjaro will automatically create a 360px, 768px, and 1280px version of the image as well to appropriately show based on the device viewport and actual image displayed size.

This applies to all images uploaded via Vanjaro or downloaded via Vanjaro's built in image search such as Pixabay.

You are absolutely correct that you still need to be aware of other modules (or apps as we call it in Vanjaro) and ensure that you upload a correct size image with them. However, Vanjaro's core functionality is available for all apps (modules) to use. You can use the same drag and drop interface for an app (module) that is available to design and build the page. We're working on a new version of Live Blog that is specifically for Vanjaro to demonstrate this functionality. Once the app is using the core functionality then you no longer have to worry about image sizes withing the app as well.

Reply







b i u quote


Save Comment
© Copyright 2021 by Vanjaro