search

nashvillefcc / nashvillefccwebsite

Contains code related to Nashville FCC website
https://www.nashvillefcc.com
MIT License
9 stars 12 forks source link

ISSUE: Performance Improvement - Optimize Site Images #99 #108

Closed JoeFromDenver closed 2 years ago

JoeFromDenver commented 3 years ago

Open - Created AVIF versions of all SVG files in src/images

JoeFromDenver commented 3 years ago

I'm pretty sure I did not perform the commit process correctly. Sorry about that! I converted the SVG files in src/images to AVIF which I believe is what you're looking for in issue #99 as a part of Hacktoberfest. Hopefully this is helpful for y'all.

Hellrungj commented 3 years ago

I'm pretty sure I did not perform the commit process correctly. Sorry about that! I converted the SVG files in src/images to AVIF which I believe is what you're looking for in issue #99 as a part of Hacktoberfest. Hopefully, this is helpful for y'all.

Thank you for updating those images. You did great and I fixed the PR. No problem. 👍 👏

Unfortunately, after reading up on AVIF files. It seems that Gatsby version 2 doesn't support AVIF files but Gatsby 3 does. I like the idea of using AVIF images. We do have a ticket for upgrading to Gatsby 3 if you are interested. Ticket #101 would allow us to AVIF files.

Note: Ticket #101 is also a Hacktoberfest ticket❗

Link to Blog Post about Gatsby 3 image formats for context:

Andrewnt219 commented 3 years ago

Hi, I want to chime in a bit about the PR.

.avif is not widely supported by all modern browser. See: https://caniuse.com/avif

.webp is more preferred. See: https://caniuse.com/webp

However, the most programmatic solution is using gatsby-image (deprecated) or the recommend gatsby-image-plugin. They will handle the transformation automatically, and many other optimizations.

Hellrungj commented 3 years ago

Hi, I want to chime in a bit about the PR.

.avif is not widely supported by all modern browser. See: https://caniuse.com/avif

.webp is more preferred. See: https://caniuse.com/webp

However, the most programmatic solution is using gatsby-image (deprecated) or the recommend gatsby-image-plugin. They will handle the transformation automatically, and many other optimizations.

I see your point. We should use gatsby-plugin-image and .webp. I have added a ticket for migrating gatsby-image to gatsby-plugin-image. Thank you @Andrewnt219 for pointing out that information. 👍

MoribundMedium commented 2 years ago

Hey guys, I hate to be the bearer of bad news but we had another PR someone submitted for this same issue: PR #115

Also, I think we needed to groom that issue better because, from what I can see, gatbsy-image and its related plugins are designed for raster images. These SVGs can be minified or converted to other formats, but they're already small and it's not a big bottleneck for us.

I'm going to close out this issue in a couple days if there's no further conversation. Thanks for the contributions, everyone! It was a good effort, and a good solution, but we should have specified better in the original issue.

itzsaga commented 2 years ago

Added the hacktoberfest-accepted label to credit the effort even if this doesn't get merged.