如何以角度查看任何圖像格式到 avif 格式？

Question

我正在使用 angular 10。我想以 AVIF 格式查看/顯示圖像。

帶壓縮版。

示例：我的數據庫中已經有這些類型的圖像

（假設這些所有圖像文件大小超過 5 mb）

demoImage.jpeg或demoImage.png或demoImage.webp

但是當我使用 Angular 在前端顯示時，我只需要以 AVIF 格式顯示

（並且此圖像必須是壓縮的）

喜歡這個demoImage.avif

那么我該如何存檔呢？

Answer 1

您可以使用包Sharp將圖像壓縮為 AVIF 格式。 如果需要，也可以將其轉換為其他格式。 在其中，您還可以找到啟動和運行它的最必要說明。

然后你可以使用我猜大多數瀏覽器支持的屬性來顯示圖像。

<picture>
 <source srcSet="image.avif" type="image/avif" />
</picture>