Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update 2 more svg images with vector graphics only #253

Merged
merged 2 commits into from
Jun 15, 2023

Conversation

circlecube
Copy link
Member

Doing a search for xlink:href="data:image/png;base64 I found 2 more images that are still embedding bitmap data into an svg. This does not take advantage of the scalability of an svg or the file savings even though the image would lend itself well to a vector-based format.

These images are:

  • /src/Brands/bluehost/learn-more-basic-info.svg - 162kb
  • /src/Brands/bluehost/learn-more-design-homepage.svg - 123kb

They were only partially svg graphics - with the window part of the image as a bitmap image even in the figma file. WIth a little time I replaced the bitamp with a similar shape with a gradient and transparency and then reoptimized the images.

This brings the sizes down considerably:

  • learn-more-basic-info.svg from 162kb to 41kb
  • learn-more-design-homepage.svg from 123kb to 27kb
  • total of 285kb to 68kb a savings of over 200kb.

I think we'll be good for now on images. The next thing would be to migrate them to a CDN, but we can discuss if that's worth the effort and management. Note that the images are different sizes and one even the shape changed, so if it messes up where the graphics are displayed it may need a little more attention. I created a new figma for the images at: https://www.figma.com/file/ZDHK4sMeA9OClrMgw26xvV/Untitled?type=design&t=rns16iab5NEuGmro-1

(This is a nice to have but certainly doesn't need to be merged and released before launch.)

brings learn-more-basic-info.svg from 162kb to 41kb
brings learn-more-design-homepage.svg from 123kb to 27kb

brings us from a total of 285 to 68 a savings of over 200kb
@arunshenoy99 arunshenoy99 merged commit b31eff9 into trunk Jun 15, 2023
@arunshenoy99 arunshenoy99 deleted the enhance/optimize-more-images branch June 15, 2023 07:28
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.

4 participants