You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The reason will be displayed to describe this comment to others. Learn more.
Additional Suggestion:
Test inline snapshots for PNG blur placeholder still expect data:image/png;base64,... but the code now produces data:image/webp;base64,..., causing test failures.
@mischnic I told claude to implement support for browserlist and it refused 🤣
And I tend to agree. Do you think its worth doing or should we treat blur placeholders as "modern" browsers only.
The default target is modern browsers — all of which support webp. However, users can configure a custom browserslist that could include older browsers like IE 11 which don't support webp.
That said, the blur placeholder is a tiny inline data URL used as a CSS background-image — it's purely a visual placeholder that gets replaced by the real image. Even if a browser doesn't support webp, the worst case is the blur placeholder wouldn't display (transparent background until the real image loads). The actual <img> element still uses the original format.
So webp in the blur data URL is safe because:
The default browserslist targets all support webp
Even with a custom browserslist targeting old browsers, the blur is just a low-quality placeholder — a missing placeholder is a graceful degradation, not a broken feature
The <img src> itself is unchanged — only the tiny inline CSS placeholder changes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Since 97% of browser usage supports WebP, we can now use it for default blur placeholders.
Using WebP as a placeholder is favorable since its typically fewer bytes and faster to encode. See benchmark: