feat: enhance image optimization with on-demand JPEG fallbacks

Improve the image optimization pipeline with better compression and
smarter variant generation:

- Change to_lossless_webp → to_optimized_webp (lossy, quality 90)
- Auto-resize uploads larger than 2000px to save storage
- Skip pre-generating JPEG variants (~50% disk savings)
- Add on-demand JPEG generation for legacy browsers (<5% of users)
- Add /images/:id/variant/:width route for dynamic serving
- Add VariantCache to supervision tree for startup validation
- Add image_cache to static paths for disk-based serving

The pipeline now stores smaller WebP sources and generates AVIF/WebP
variants upfront, with JPEG generated only when legacy browsers request it.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/simpleshop_theme/images/optimizer.ex

@@ -9,27 +9,38 @@ defmodule SimpleshopTheme.Images.Optimizer do
   alias SimpleshopTheme.Media.Image, as: ImageSchema
 
   @all_widths [400, 800, 1200]
-  @formats [:avif, :webp, :jpg]
+  # JPEG is generated on-demand to save ~50% disk space
+  # Only affects <5% of users (legacy browsers without AVIF/WebP support)
+  @pregenerated_formats [:avif, :webp]
   @thumb_size 200
   @cache_dir "priv/static/image_cache"
+  @max_stored_width 2000
+  @storage_quality 90
 
   def cache_dir, do: @cache_dir
   def all_widths, do: @all_widths
 
   @doc """
-  Convert uploaded image to lossless WebP for storage.
+  Convert uploaded image to optimized WebP for storage.
+  Images larger than #{@max_stored_width}px are resized down.
+  Uses lossy WebP (quality #{@storage_quality}) for efficient storage.
   Returns {:ok, webp_data, width, height} or {:error, reason}.
   """
-  def to_lossless_webp(image_data) when is_binary(image_data) do
+  def to_optimized_webp(image_data) when is_binary(image_data) do
     with {:ok, image} <- Image.from_binary(image_data),
-         {width, height, _} <- Image.shape(image),
-         {:ok, webp_data} <- Image.write(image, :memory, suffix: ".webp", quality: 100) do
-      {:ok, webp_data, width, height}
+         {width, _height, _} <- Image.shape(image),
+         {:ok, resized} <- maybe_resize(image, width),
+         {final_width, final_height, _} <- Image.shape(resized),
+         {:ok, webp_data} <- Image.write(resized, :memory, suffix: ".webp", quality: @storage_quality) do
+      {:ok, webp_data, final_width, final_height}
     end
   rescue
     e -> {:error, Exception.message(e)}
   end
 
+  defp maybe_resize(image, width) when width <= @max_stored_width, do: {:ok, image}
+  defp maybe_resize(image, _width), do: Image.thumbnail(image, @max_stored_width)
+
   @doc """
   Compute applicable widths from source dimensions.
   Only returns widths that are <= source_width (no upscaling).
@@ -67,7 +78,7 @@ defmodule SimpleshopTheme.Images.Optimizer do
 
           tasks = [
             Task.async(fn -> generate_thumbnail(vips_image, image_id) end)
-            | for w <- widths, fmt <- @formats do
+            | for w <- widths, fmt <- @pregenerated_formats do
                 Task.async(fn -> generate_variant(vips_image, image_id, w, fmt) end)
               end
           ]
@@ -124,6 +135,7 @@ defmodule SimpleshopTheme.Images.Optimizer do
 
   @doc """
   Check if disk variants exist for an image.
+  Only checks pre-generated formats (AVIF, WebP). JPEG is generated on-demand.
   """
   def disk_variants_exist?(image_id, source_width) do
     widths = applicable_widths(source_width)
@@ -131,11 +143,74 @@ defmodule SimpleshopTheme.Images.Optimizer do
 
     variants =
       Enum.all?(widths, fn w ->
-        Enum.all?(@formats, fn fmt ->
+        Enum.all?(@pregenerated_formats, fn fmt ->
           File.exists?(Path.join(@cache_dir, "#{image_id}-#{w}.#{format_ext(fmt)}"))
         end)
       end)
 
     thumb and variants
   end
+
+  @doc """
+  Generate a variant on-demand. Returns path to generated file.
+  Supports all formats: :avif, :webp, :jpg
+  Used as fallback if cache files are deleted, and for JPEG legacy browser support.
+  """
+  def generate_variant_on_demand(image_data, image_id, width, format)
+      when is_binary(image_data) and format in [:avif, :webp, :jpg] do
+    path = Path.join(@cache_dir, "#{image_id}-#{width}.#{format_ext(format)}")
+
+    if File.exists?(path) do
+      {:ok, path}
+    else
+      File.mkdir_p!(@cache_dir)
+
+      with {:ok, vips_image} <- Image.from_binary(image_data),
+           {:ok, resized} <- Image.thumbnail(vips_image, width),
+           {:ok, _} <- write_format(resized, path, format) do
+        {:ok, path}
+      end
+    end
+  end
+
+  # Backward compatibility alias
+  def generate_jpeg_on_demand(image_data, image_id, width) do
+    generate_variant_on_demand(image_data, image_id, width, :jpg)
+  end
+
+  @doc """
+  Process an image file and generate all variants to the specified directory.
+  Used for both database images (to cache_dir) and mockups (to mockup_dir).
+  Returns {:ok, source_width} or {:error, reason}.
+  """
+  def process_file(image_data, output_basename, output_dir) when is_binary(image_data) do
+    File.mkdir_p!(output_dir)
+
+    with {:ok, webp_data, source_width, _height} <- to_optimized_webp(image_data),
+         {:ok, vips_image} <- Image.from_binary(webp_data) do
+      widths = applicable_widths(source_width)
+
+      tasks = [
+        Task.async(fn -> generate_variant_to_dir(vips_image, output_basename, output_dir, "thumb", :jpg, @thumb_size) end)
+        | for w <- widths, fmt <- @pregenerated_formats do
+            Task.async(fn -> generate_variant_to_dir(vips_image, output_basename, output_dir, w, fmt, w) end)
+          end
+      ]
+
+      Task.await_many(tasks, :timer.seconds(120))
+      {:ok, source_width}
+    end
+  rescue
+    e -> {:error, Exception.message(e)}
+  end
+
+  defp generate_variant_to_dir(image, basename, dir, size_label, format, resize_width) do
+    filename = "#{basename}-#{size_label}.#{format_ext(format)}"
+    path = Path.join(dir, filename)
+
+    with {:ok, resized} <- Image.thumbnail(image, resize_width),
+         {:ok, _} <- write_format(resized, path, format) do
+      :ok
+    end
+  end
 end