jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: enhance image optimization with on-demand JPEG fallbacks

Browse Source 
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>
This commit is contained in:
Jamey Greenwood
2026-01-25 00:33:09 +00:00
parent 252ca2268a
commit 2bc05097b9
11 changed files with 610 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/simpleshop_theme/application.ex
View File

@@ -14,6 +14,10 @@ defmodule SimpleshopTheme.Application do
repos: Application.fetch_env!(:simpleshop_theme, :ecto_repos), skip: skip_migrations?()},
{DNSCluster, query: Application.get_env(:simpleshop_theme, :dns_cluster_query) || :ignore},
{Phoenix.PubSub, name: SimpleshopTheme.PubSub},
# Background job processing
{Oban, Application.fetch_env!(:simpleshop_theme, Oban)},
# Image variant cache - ensures all variants exist on startup
SimpleshopTheme.Images.VariantCache,
# Theme CSS cache
SimpleshopTheme.Theme.CSSCache,
# Start to serve requests, typically the last entry

91
lib/simpleshop_theme/images/optimizer.ex
View File

@@ -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

114
lib/simpleshop_theme/media.ex
View File

@@ -6,14 +6,16 @@ defmodule SimpleshopTheme.Media do
import Ecto.Query, warn: false
alias SimpleshopTheme.Repo
alias SimpleshopTheme.Media.Image, as: ImageSchema
@thumbnail_size 200
alias SimpleshopTheme.Images.Optimizer
alias SimpleshopTheme.Images.OptimizeWorker
@doc """
Uploads an image and stores it in the database.
Automatically generates a thumbnail for non-SVG images if the Image library
is available and working.
For non-SVG images:
- Converts to lossless WebP for storage (26-41% smaller than PNG)
- Extracts source dimensions for responsive variant generation
- Enqueues background job to generate optimized variants (AVIF, WebP, JPEG at multiple sizes)
## Examples
@@ -22,11 +24,50 @@ defmodule SimpleshopTheme.Media do
"""
def upload_image(attrs) do
attrs = maybe_generate_thumbnail(attrs)
attrs = prepare_image_attrs(attrs)
%ImageSchema{}
|> ImageSchema.changeset(attrs)
|> Repo.insert()
case Repo.insert(ImageSchema.changeset(%ImageSchema{}, attrs)) do
{:ok, image} ->
# Enqueue background job for non-SVG images
unless image.is_svg do
OptimizeWorker.enqueue(image.id)
end
{:ok, image}
error ->
error
end
end
# Prepares image attributes, converting to lossless WebP and extracting dimensions
defp prepare_image_attrs(%{data: data, content_type: content_type} = attrs)
when is_binary(data) do
if is_svg?(content_type, attrs[:filename]) do
attrs
else
case Optimizer.to_optimized_webp(data) do
{:ok, webp_data, width, height} ->
attrs
|> Map.put(:data, webp_data)
|> Map.put(:content_type, "image/webp")
|> Map.put(:file_size, byte_size(webp_data))
|> Map.put(:source_width, width)
|> Map.put(:source_height, height)
|> Map.put(:variants_status, "pending")
{:error, _reason} ->
# If conversion fails, store original image
attrs
end
end
end
defp prepare_image_attrs(attrs), do: attrs
defp is_svg?(content_type, filename) do
content_type == "image/svg+xml" or
String.ends_with?(filename || "", ".svg")
end
@doc """
@@ -52,36 +93,6 @@ defmodule SimpleshopTheme.Media do
})
end
defp maybe_generate_thumbnail(%{data: data, content_type: content_type} = attrs)
when is_binary(data) do
if String.starts_with?(content_type || "", "image/svg") do
attrs
else
case generate_thumbnail(data) do
{:ok, thumbnail_data} ->
Map.put(attrs, :thumbnail_data, thumbnail_data)
{:error, _reason} ->
attrs
end
end
end
defp maybe_generate_thumbnail(attrs), do: attrs
defp generate_thumbnail(image_data) do
try do
with {:ok, image} <- Image.from_binary(image_data),
{:ok, thumbnail} <- Image.thumbnail(image, @thumbnail_size),
{:ok, binary} <- Image.write(thumbnail, :memory, suffix: ".jpg") do
{:ok, binary}
end
rescue
_e ->
{:error, :thumbnail_generation_failed}
end
end
@doc """
Gets a single image by ID.
@@ -149,4 +160,31 @@ defmodule SimpleshopTheme.Media do
def list_images_by_type(type) do
Repo.all(from i in ImageSchema, where: i.image_type == ^type, order_by: [desc: i.inserted_at])
end
@doc """
Gets the path to a thumbnail on disk.
## Examples
iex> get_thumbnail_path("abc123-def456")
"priv/static/image_cache/abc123-def456-thumb.jpg"
"""
def get_thumbnail_path(image_id) do
Path.join(Optimizer.cache_dir(), "#{image_id}-thumb.jpg")
end
@doc """
Gets the path to a variant on disk.
## Examples
iex> get_variant_path("abc123-def456", 800, :webp)
"priv/static/image_cache/abc123-def456-800.webp"
"""
def get_variant_path(image_id, width, format) do
ext = Atom.to_string(format)
Path.join(Optimizer.cache_dir(), "#{image_id}-#{width}.#{ext}")
end
end