転送量が半分になったのに、体感は速くならなかった — 壁紙アプリの画像フォーマットとデコード費用

// worker/image-negotiate.js — マニフェストが追いつかない端末への保険
// 原則はマニフェスト側で決める。ここは「事故らせない」ための最終防衛線。
const FALLBACK_CHAIN = ["avif", "webp", "jpeg"];
 
function pickFormat(accept, clientHint) {
  // clientHint: アプリが付ける X-Decode-Tier（fast / slow / legacy）
  if (clientHint === "legacy") return "jpeg";
  if (clientHint === "slow") return accept.includes("image/webp") ? "webp" : "jpeg";
  for (const fmt of FALLBACK_CHAIN) {
    if (accept.includes(`image/${fmt}`)) return fmt;
  }
  return "jpeg";
}
 
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const accept = request.headers.get("Accept") || "";
    const tier = request.headers.get("X-Decode-Tier") || "fast";
    const fmt = pickFormat(accept, tier);
 
    const key = url.pathname.replace(/\.\w+$/, "") + "." + fmt;
    const object = await env.WALLPAPERS.get(key.slice(1));
    if (!object) return new Response("Not found", { status: 404 });
 
    return new Response(object.body, {
      headers: {
        "Content-Type": `image/${fmt}`,
        // Vary を絞らないとキャッシュが際限なく分岐する
        Vary: "Accept, X-Decode-Tier",
        "Cache-Control": "public, max-age=31536000, immutable",
      },
    });
  },
};

// src/media/decodeTier.ts
import * as Device from "expo-device";
import { Platform } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
 
export type DecodeTier = "fast" | "slow" | "legacy";
const CACHE_KEY = "media:decodeTier:v2";
 
async function probe(): Promise<DecodeTier> {
  const major = parseInt(String(Device.osVersion ?? "0").split(".")[0], 10);
 
  if (Platform.OS === "ios") {
    if (major >= 17) return "fast";      // A15 以降が主流。HW デコーダ前提
    if (major >= 16) return "slow";      // 解けるが CPU 側に寄る
    return "legacy";
  }
  // Android は API level ではなく実測に近い指標で切る
  if (major >= 13 && (Device.totalMemory ?? 0) > 5.5e9) return "fast";
  if (major >= 12) return "slow";
  return "legacy";
}
 
export async function getDecodeTier(): Promise<DecodeTier> {
  const cached = await AsyncStorage.getItem(CACHE_KEY);
  if (cached) return cached as DecodeTier;
  const tier = await probe();
  await AsyncStorage.setItem(CACHE_KEY, tier);
  return tier;
}
 
export function formatFor(tier: DecodeTier): "avif" | "webp" | "jpeg" {
  return tier === "fast" ? "avif" : tier === "slow" ? "webp" : "jpeg";
}

{
  "packId": "aurora-2026-07",
  "items": [
    {
      "id": "aurora-014",
      "w": 2796, "h": 1290,
      "src": {
        "avif": "https://cdn.example.com/aurora-014.avif",
        "webp": "https://cdn.example.com/aurora-014.webp",
        "jpeg": "https://cdn.example.com/aurora-014.jpg"
      },
      "bytes": { "avif": 1782341, "webp": 2461902, "jpeg": 3612884 }
    }
  ]
}