Optimize hero image #4885
Merged
Optimize hero image #4885
Conversation
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
We want to keep large high-resolution images in our image source, but we want to distribute only the optimized images. Using an underscore exclusion allows us to keep the original files, but send only the optimized files to the dist
Including the webp in the dist, but using JPG as the default lets us use a highly optimized image, but also allows the user to change their settings and use the next-gen format if their site supports it
mejiaj
reviewed
Jul 27, 2022
mejiaj
reviewed
Jul 27, 2022
mejiaj
approved these changes
Jul 28, 2022
2 tasks
2 tasks
|
hero.png is still huge. This has been a problem for years. It is a stock image that users will replace. Please consider removing it from USWDS. |
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.
Optimize hero image. We replaced our default hero image (644 KB PNG) with an optimized image (147 KB JPG), saving 477 KB. We've also provided a next-generation image format version of the image (105 KB WEBP) as an example.
$theme-hero-image. If your project uses this default hero image, you'll need to make sure to move the new asset (hero.jpg) to your project images directory.$theme-hero-image"#{general.$theme-image-path}/hero.png""#{general.$theme-image-path}/hero.jpg"Problem
Our default hero image isn't a good example of an optimized image. Even if teams don't use this generic image in their projects, we should deliver an optimized image. Additionally, we don't have a good way of distinguishing high-quality, high-resolution image originals from the optimized version (or versions) we ship. We need the uncompressed originals to make our optimized versions, but teams should not use these files in their projects.
Solution
$theme-hero-imageto point to this new file ("#{general.$theme-image-path}/hero.jpg").dist/imgdirectory.How to test
hero.jpg)npx gulpdist/imgdirectory to findhero.jpgandhero.webp. You should NOT see_hero.png(the original)Related issues