Skip to content

add: LQIP, optional fallback, sizes prop - #3

Merged
lxsmnsyc merged 1 commit into
mainfrom
image-optimizations
Sep 13, 2026
Merged

add: LQIP, optional fallback, sizes prop#3
lxsmnsyc merged 1 commit into
mainfrom
image-optimizations

Conversation

@lxsmnsyc

@lxsmnsyc lxsmnsyc commented Sep 9, 2026

Copy link
Copy Markdown
Member

Summary

Adds an inline placeholder for local images, a sizes prop, and a cache for
processed images. The fallback prop becomes optional.

Changes

  • Local images ship an inline preview. The plugin emits a 20px WebP copy as a
    data URL plus the dominant color of the image, and the component paints it on
    the aspect ratio box until the image loads. The preview is dropped once the
    image is revealed, so a transparent image does not show it through.
  • The preview is on by default at 20px. Pass placeholder: false to skip it, or
    placeholder: { size } to change its width.
  • Remote images can return the same { url, color } shape from transformURL.
  • SolidImage takes a sizes prop, forwarded to every <source>. Without it
    the browser assumes the image spans the full viewport width and downloads a
    larger variant than it needs.
  • The fallback prop is optional. Leave it out and the image is revealed as
    soon as it loads.
  • The image now fades in over the preview across 200ms.
  • Processed images are cached. The file name covers the source path, the size
    and modification time of the source file, the format, the width and the
    quality. A file that already exists is reused instead of encoded again.
  • Changing the quality or editing the source produces a new file name, so a
    stale file is never served. Before this the name came from the source path
    alone.

@lxsmnsyc
lxsmnsyc added this pull request to stack #4 September 9, 2026 16:37
@pkg-pr-new

pkg-pr-new Bot commented Sep 9, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@solidjs/image@3

commit: 2d0d7b9

Base automatically changed from expansion to main September 13, 2026 13:58
@lxsmnsyc
lxsmnsyc merged commit 52c7b8c into main Sep 13, 2026
4 checks passed
@lxsmnsyc
lxsmnsyc deleted the image-optimizations branch September 13, 2026 14:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant