Angular’s NgOptimizedImage Soon Will Show Placeholders

Attention! I need nine more people to become members to write next article! Join now: https://medium.com/membership/@tomaszs2

At the end of January, 2024, Angular 17.2.0-next.1 was released. For me the most important feature in this release is the ability to set placeholders for NgOptimizedImage.

It means that thanks to that release you won’t have to use other techniques to show a placeholder while the proper image is loaded. It’s fantastic.

The official documentation doesn’t include information about it. But I’ve digged into the preview of new documentation that has a whole section on that feature:

You can also use data URL-s as a placeholder:

<img ngSrc=”cat.jpg” width=”400" height=”200"
   placeholder=”data:image/png;base64,iVBORw0K…”>

or disable blurring with:

<img ngSrc="cat.jpg" width="400" height="200" placeholder
   [placeholderConfig]="{blur: false}">

It’s quite useful and it’s very good NgOptimizedImage gets more and more improvements making working with images in a website in an efficient way…