I'm using angular 10. and I want to view / show Image in AVIF format.
With compress version.
EXAMPLE: Already these kind of images in my database
(suppose these all image file size is more than 5 mb)
demoImage.jpeg or demoImage.png or demoImage.webp
But when I'm showing in frontend using angular I need to show in AVIF format only
(and this image must be in compressed)
Like this demoImage.avif
So how can I archive this?
You can use the package Sharp, to compress the images to AVIF format. It's also possible to convert it to other formats than that if needed. In it you can also find the most necessary instructions to get it up and running.
Then you can show the image using the attribute which I guess most browsers support.
<picture>
<source srcSet="image.avif" type="image/avif" />
</picture>