fix: auto webp and avif images

fix: accept header

Author: andrasbacsai

docker-compose-dev.yaml

@@ -1,19 +1,11 @@
 services:
-  # api:
-  #   image: oven/bun:alpine
-  #   working_dir: /app
-  #   ports:
-  #     - "3000:3000"
-  #   environment:
-  #     - NODE_ENV=development
-  #   volumes:
-  #     - .:/app
-  #   command: "bun run --watch /app/index.js"
   imgproxy:
     image: darthsim/imgproxy
     ports:
       - "8888:8080"
     environment:
       - IMGPROXY_ENABLE_WEBP_DETECTION=true
+      - IMGPROXY_ENABLE_AVIF_DETECTION=true
+      - IMGPROXY_PREFERRED_FORMATS=webp,avif,jpeg,png,gif
       - IMGPROXY_JPEG_PROGRESSIVE=true
       - IMGPROXY_USE_ETAG=true

docker-compose.yaml

@@ -19,6 +19,7 @@ services:
     image: darthsim/imgproxy
     environment:
       - IMGPROXY_ENABLE_WEBP_DETECTION=true
+      - IMGPROXY_ENABLE_AVIF_DETECTION=true
       - IMGPROXY_JPEG_PROGRESSIVE=true
       - IMGPROXY_USE_ETAG=true
     healthcheck:

index.js

@@ -1,6 +1,8 @@
-const allowedDomains = process?.env?.ALLOWED_REMOTE_DOMAINS.split(",") || ["*"];
+const version = "0.0.3"
+
+const allowedDomains = process?.env?.ALLOWED_REMOTE_DOMAINS?.split(",") || ["*"];
 const imgproxyUrl = process?.env?.IMGPROXY_URL || "http://imgproxy:8080";
-const version = "0.0.2"
+
 Bun.serve({
     port: 3000,
     async fetch(req) {
@@ -13,7 +15,6 @@ Bun.serve({
             });
         }
 
-
         if (url.pathname === "/health") {
             return new Response("OK");
         };
@@ -33,8 +34,12 @@ async function resize(url) {
     const height = url.searchParams.get("height") || 0;
     const quality = url.searchParams.get("quality") || 75;
     try {
-        const url = `${imgproxyUrl}/${preset}/resize:fill:${width}:${height}/q:${quality}/plain/${src}@webp`
-        const image = await fetch(url)
+        const url = `${imgproxyUrl}/${preset}/resize:fill:${width}:${height}/q:${quality}/plain/${src}`
+        const image = await fetch(url , {
+            headers: {
+                "Accept": "image/avif,image/webp,image/*,",
+            }
+        })
         const headers = new Headers(image.headers);
         headers.set("Server", "NextImageTransformation");
         return new Response(image.body, {

package.json

@@ -7,5 +7,6 @@
     "start": "bun run ./index.js"
   },
   "devDependencies": {},
-  "peerDependencies": {}
+  "peerDependencies": {},
+  "dependencies": {}
 }