Member-only story
Rendering Images the Angular Way
From directly declaring the HTML image tag to embracing the NgOptimizedImage directive
Software developers have long been captivated by the representation of images on the screen, striving to enhance their quality and loading times. Since we began our journey in web development, we have all experimented with various image rendering techniques — from image compression to responsiveness and lazy loading — to enhance user experience.
The NgOptimizedImage directive initially released in Angular 14.2 generates renewed interest in image handling among Angular developers, leading to a simple and effective approach for serving images.
Pursuing innovative solutions for delivering images more efficiently is a trend that has existed for a while. Many browser engineers and web authors have been dedicated to improving image rendering for years, making this ongoing effort a long-standing priority in the web development community.
To help fully appreciate the power of NgOptimizedImage, let's start by taking a quick dive into the early days of image implementation in browsers. Then we will examine a few progressive examples of declaring images into our Angular apps before wrapping up with a quick code challenge.
