In the Part-1 of the Image optimization blog, we have seen about the image optimization in angular through the NgOptimizedImage directive, if you haven’t checked that, you can refer to it here.
In this blog, we will learn about the performance features and how we can configure an image loader for NgOptimizedImage directives. So let’s start.
Introduction:
In today’s digital landscape, web performance plays a vital role in providing a seamless user experience. One area that significantly impacts performance is image optimization. Angular, a popular JavaScript framework, offers several performance features, including advanced image optimization techniques, to help developers create lightning-fast web applications.
Performance Features
NgOptimizedImage includes a number of features designed to improve loading performance in your app. These features are described in this section.
Add resource hints
You can add a preconnect resource hint for your image origin to ensure that the LCP image loads as quickly as possible. Always put resource hints in the of the document.
<link rel="preconnect" href="https://my.cdn.origin" />By default, if you use a loader for a third-party image service, the NgOptimizedImage the directive will warn during development if it detects that there is no preconnect resource hint for the origin that serves the LCP image
To disable these warnings, inject the PRECONNECT_CHECK_BLOCKLIST token:
providers: [
{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://your-domain.com'}
],Request images at the correct size with automatic srcset
Defining a srcset attribute ensures that the browser requests an image at the right size for your user’s viewport, so it doesn’t waste time downloading an image that’s too large. NgOptimizedImage generates an appropriate srcset for the image, based on the presence and value of the sizes attribute on the image tag.
Fixed-size images
If your image should be “fixed” in size (i.e. the same size across devices, except for pixel density), there is no need to set a sizes attribute. A srcset can be generated automatically from the image’s width and height attributes with no further input required.
Example srcset generated: <img ... srcset="image-400w.jpg 1x, image-800w.jpg 2x">
Responsive images
If your image should be responsive (i.e. grow and shrink according to viewport size), then you will need to define a sizes attribute to generate the srcset.
If you haven’t used sizes before, a good place to start is to set it based on the viewport width. For example, if your CSS causes the image to fill 100% of the viewport width, set sizes to 100vw and the browser will select the image in the srcset that is closest to the viewport width (after accounting for pixel density). If your image is only likely to take up half the screen (ex: in a sidebar), set sizes to 50vw to ensure the browser selects a smaller image. And so on.
If you find that the above does not cover your desired image behavior, see the documentation on advanced sizes values.
By default, the responsive breakpoints are:
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]If you would like to customize these breakpoints, you can do so using the IMAGE_CONFIG provider:
providers: [
{
provide: IMAGE_CONFIG,
useValue: {
breakpoints: [16, 48, 96, 128, 384, 640, 750, 828, 1080, 1200, 1920]
}
},
],If you would like to manually define a srcset attribute, you can provide your own using the ngSrcset attribute:
<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w">In case the ngSrcset attribute is present, NgOptimizedImage generates and sets the srcset based on the sizes included. Do not include image file names in ngSrcset – the directive infers this information from ngSrc. The directive supports both width descriptors (e.g. 100w) and density descriptors (e.g. 1x).
<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w" sizes="50vw">Disabling automatic srcset generation
To disable srcset generation for a single image, you can add the disableOptimizedSrcset attribute on the image:
<img ngSrc="about.jpg" disableOptimizedSrcset>Disabling image lazy loading
By default, NgOptimizedImage sets loading=lazy for all images that are not marked priority. You can disable this behavior for non-priority images by setting the loading attribute. This attribute accepts values: eager, auto, and lazy. See the documentation for the standard image loading attribute for details.
<img ngSrc="cat.jpg" width="400" height="200" loading="eager">Advanced ‘sizes’ values
You may want to have images displayed at varying widths on differently-sized screens. A common example of this pattern is a grid- or column-based layout that renders a single column on mobile devices, and two columns on larger devices. You can capture this behavior in the sizes attribute, using a “media query” syntax, such as the following:
<img ngSrc="cat.jpg" width="400" height="200" sizes="(max-width: 768px) 100vw, 50vw">The sizes the attribute in the above example says “I expect this image to be 100 percent of the screen width on devices under 768px wide. Otherwise, I expect it to be 50 percent of the screen width.
Conclusion:
So now let’s conclude this, we have learned the performance features for image optimization with examples. I hope it helps you to understand this.
Happy reading !!
Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.
