solid-image

Summary Adds opt-in ThumbHash placeholders alongside the existing inline image and BlurHash previews. is an optional peer dependency and is only imported when this preview type is enabled. Why ThumbHash is a useful alternative to BlurHash because it: has a compact binary representation; supports transparency; includes an approximate aspect ratio; does not require component-count configuration. This implementation keeps the hash as a , matching the upstream API instead of introducing an internal base64 representation. Implementation Add to the Vite plugin placeholder options. Encode local images with from an EXIF-corrected, max-100px RGBA sample. Preserve alpha in the server-side average placeholder color. Decode in the browser with . Keep independent of ; generated modules inject the decoder only when needed. Support ThumbHash placeholders from . Serialize cached/remote hash bytes as arrays and restore them to in generated modules. Keep the existing BlurHash API unchanged; string hashes remain BlurHash, binary hashes are ThumbHash. Add a ThumbHash example, docs, tests, and a minor changeset. Testing Validated with: frozen ; package build; all example builds; Node tests; Playwright Chromium browser tests. Coverage includes local and remote placeholders, EXIF orientation, the 100px encoding limit, alpha-aware colors, restoration, decoder injection, browser decoding, and preview cleanup after image load.

Summary Fixes the default output, which made every browser download PNG, and picks formats per image so transparent images keep their transparency. Changes The default is now WebP and JPEG. The old default was PNG, JPEG and WebP, in that order. The first was PNG, every browser reads PNG, so every browser downloaded the largest format and WebP was never used. Formats are now offered in a fixed order: AVIF, WebP, TIFF, JPEG, PNG. The order in no longer matters. The falls back to the last format, which is JPEG or PNG. Every browser reads both. The old fallback under the default was WebP. TIFF sorts before JPEG. Only Safari reads TIFF, so it must never be the fallback. A transparent image gets PNG in place of JPEG. JPEG has no transparency, and sharp painted the transparent pixels black. An opaque image drops PNG when JPEG is also listed, since JPEG is far smaller for photos. Listing PNG without JPEG keeps it. now reports whether an image is transparent. It checks the pixels only when the image has an alpha channel, because many PNGs have one with every pixel opaque. The transformer module and the fallback source both pick formats per image. How it was tested runs 164 tests across both projects and they pass. 12 are new. Plugin tests confirm the default output lists WebP before JPEG with no PNG, and that a config of PNG, JPEG, WebP and AVIF is offered as AVIF, WebP, JPEG. A plugin test confirms a half transparent image gets WebP and PNG, no JPEG, and falls back to PNG. A plugin test confirms an image with an alpha channel but only opaque pixels is treated as opaque. Unit tests cover the format order, the TIFF position, dropping PNG for opaque images, keeping PNG when it is the only broad format, and swapping JPEG for PNG on transparent images. Transformer tests confirm transparency detection for a see-through image and for an alpha channel with only opaque pixels. succeeds. reports one pre-existing error in , unrelated to this change. 🤖 Generated with Claude Code

Summary Adds a BlurHash preview as an alternative to the inline image preview. It is off by default, and is an optional peer dependency that apps install only when they turn it on. Changes Set in the plugin to use a BlurHash instead of the 20px inline image. The inline image stays the default. There is nothing else to configure. The number of components is picked per image from its aspect ratio, about 12 in total. The long side gets more, so portraits and landscapes keep even detail. A 4:3 image gets the usual 4 by 3. is listed as an optional peer dependency. The plugin loads it with a dynamic import. The plugin checks for when the build starts. If it is missing, the dev server or build stops with install steps instead of failing on the first image. The plugin encodes an upright copy of the image that fits inside 32px, and ships the hash with the average color. The generated module imports from only when the option is on. The component never imports the package, so apps without it are unaffected. The server paints the average color, since decoding needs a canvas. The browser decodes the hash into a 32px wide canvas at the image's aspect ratio and paints it over that color. The preview is removed once the image loads, the same as the inline image preview. Remote images can return from . The plugin adds the decoder for them. How it was tested runs 152 tests across both projects and they pass. Component picking is checked for landscape, 16:9, square, portrait, panorama, banner and strip shapes, and counts stay within 1 to 9. Plugin tests confirm the module ships a valid hash, imports the decoder, and reports the average color. A portrait gets 3 by 5 components and a 10:1 banner gets 9 by 1. Plugin tests confirm the default preview and remote images without a hash never import . A plugin test mocks a missing and checks that the build fails at startup with the install message. Encoder tests confirm the base color stored in the hash equals the reported average color, the image is reduced to fit inside 32px, and a rotated photo is hashed upright. A server rendering test confirms only the average color is painted and the decoder is never called. A browser test confirms the hash is decoded at 32 by 18 for a 16:9 image, painted before the image loads, and removed once it loads. succeeds. keeps external, and does not reference the package. reports one pre-existing error in , unrelated to this change. Notes for review was merged in after #7 landed. The BlurHash sample calls , like the variants and the inline preview. 🤖 Generated with Claude Code