USWDS - Banner: Optimize banner flag icon, provide vector option #5542
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
thisisdano
added
Role: Dev
Contributor
|
Thanks for this. We're going to check and see if we can get it into 3.7.0, otherwise it'll probably go into the subsequent release. |
mejiaj
approved these changes
Oct 23, 2023
Contributor
mejiaj
left a comment
mejiaj
left a comment
There was a problem hiding this comment.
Thanks for doing this and the detailed explanation of the solution, very helpful!
Found no visual regressions in Banner component.
Local (left) | Develop (right)
New flag SVG is included in built dist directory. Tested with npx gulp build.
Screenshot
mahoneycm
approved these changes
Oct 23, 2023
Contributor
mahoneycm
left a comment
mahoneycm
left a comment
There was a problem hiding this comment.
Lgtm!
- No visual regression
- File size noticeably smaller
- Both images are correctly compiled into the
distdirectory
This was referenced Oct 27, 2023
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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
Replaces the banner flag image with a losslessly compressed version, and adds a new vector (SVG) version of the image.
Related issue
Continues from #4191, closed by #4792.
Related PR
Changelog PR
Problem statement
As an end-user, I expect that pages using the U.S. Web Design system load quickly, so that I don't have to wait for assets to load.
Solution
Optimizes the existing
us_flag_small.pngimage. It was optimized using Oxipng, via Squoosh. The choice to use Oxipng was based on a desire for lossless compression, so there should be no degradation in the quality of the image. Lossy compression is possible, and would result in an even smaller file size (I was able to shrink to 168 bytes using TinyPNG), but this would have some marginal effect on the quality of the image. tl;dr "Lossless" seemed least controversial 😄Result:
Before: 545 bytes
After: 244 bytes
Diff: -301 bytes (-55%)
This also proposes to add a hand-optimized vector version of the image, originally proposed at #4191 (comment), and adjusted for this pull request using colors from the higher-quality image added in #4792.
Why?
.svgis larger size uncompressed than the.pngfile, it is still very small (380 bytes), and would compress to the smallest possible size (195 bytes gzipped, 180 bytes brotli'd)Testing and review
Visually inspect the revised assets.