Repository navigation
perf(web): shrink landing features-visual image from 2.4 MB to 25 KB - #14710
Merged
Merged
Conversation
The "Growth starts here" visual was a 4096x2713 JPEG (2.38 MB) shown in a box at most 612x480 CSS px (object-fit: cover, so ~725px wide), and hidden below 800px. Re-encode at 1456x964 (2x the largest rendered width) as WebP (25 KB) with a JPEG fallback (125 KB) via <picture>, add decoding="async", and set width/height for the intrinsic aspect ratio. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
The landing page's "Growth starts here" visual (
landing-2026/assets/features-visual.jpg) was the largest byte cost on/. Lighthouse flagged 2.26 MB of it as wasted on desktop.About 99% fewer bytes for browsers that support WebP.
Sizing
.visualWrapis at most 612px wide andmin(480px, 55vh)tall, withobject-fit: cover. For the image's ~1.51 aspect ratio, that renders at most about 725 CSS px wide. 1456px covers that at 2×.display: none. Lazy images inside hidden containers aren't fetched, so mobile downloads neither version.Markup
<picture>with a WebP<source>and the JPEG<img>as fallback, the same pattern asHero2026andCreateFutureCTA.loading="lazy"(the image is below the fold). Addeddecoding="async"andwidth={1456} height={964}so the image has an intrinsic aspect ratio.pictureandimgnow both getwidth/height: 100%; display: block, so the wrapper fills the box like the Hero does.Quality
I compared the original and the new files side by side, full frame and as 1:1 crops of the neon-sign detail. I couldn't see a difference. SSIM against a lossless downscale of the original: WebP 0.989 (Y), JPEG 0.992 (Y). The image is monochrome, which is part of why it compresses so well.
Test plan
/on a desktop-width staging build: the visual looks the same, and the network panel showsfeatures-visual.*.webpat about 25 KB🤖 Generated with Claude Code