docs: add new image directive snippet

src/pages/snippets/v15-new-image-directive.mdx

@@ -0,0 +1,35 @@
+---
+title: New Image Directive in Angular v15
+description: "Example of New Image Directive in Angular 15 "
+tags: ["angular15", "image directive"] # comma separated list which gets trimmed
+pubDate: Mar 5, 2023
+contributedBy: "@deepakrudrapaul"
+---
+
+Here is a simple example of how to use the _NgOptimizedImage_ directive.
+The _NgOptimizedImage_ directive makes it easy to adopt performance best practices for loading images.
+
+### Import NgOptimizedImage
+
+```typescript
+import { NgOptimizedImage } from "@angular/common";
+```
+
+### Enable the directive
+
+To enable the NgOptimizedImage directive, replace your image's src attribute with _ngSrc_ and to prevent image related layout shifts,
+NgOptimizedImage requires that you specify a height and width for the image
+
+```html
+<img ngSrc="image.jpg" width="300" height="200" />
+```
+
+And if you don't know the size of the images, you can use the _fill_ attribute to inherit the size of the parent container.
+For the "fill" image to render properly, its parent element must be styled with
+`position: "relative", position: "fixed", or position: "absolute".`
+
+```html
+<img ngSrc="image.jpg" fill />
+```
+
+---