56 image size optimization

[ogorman89]

This PR:

Resolves #56 by:

• Changing all images to .webp except for where .svg is more appropriate
• Used .svgs wherever available
• Removed unused .png files
• Renamed all images to be descriptive, hyphen separated (for easy indexing), with size appended to the end where multiple sizes are employed
  • Examples: code-pdx-volunteer-andy.webp or technology-association-of-oregon-logo-366x105.webp
• Updated all references

Component changes:

For Hero.jsx

• Added a required prop, mobileHeroImage
• Added mobileHeroImage prop assignment to home.jsx, volunteer.jsx and projects.jsx
• Modified Hero to serve the appropriately sized background hero image using our xs and md theme breakpoints

For SecondaryPartners.jsx

• Added a required prop, 'mobilePartnerLogo'
• Added mobilePartnerLogo assignment to secondaryPartnerList.js
• Modified smallScreenComponent to use mobilePartnerLogo (which triggers for screens < md)

For PrimaryPartner.jsx

• Modified Box component, using sx-content to switch to the correctly sized TAO logo based on our xs and md theme breakpoints

For Navbar.jsx and Footer.jsx

• Updated CODE PDX green rose logos to use the .svg

---

Screenshots (if applicable):

💰 Big savings!

Note: there should be no real change in the actual rendering of the site other than it being a little faster!

---

Future Steps/PRs Needed to Finish This Work (optional):

None

[andycwilliams]

Looking good. The file size reductions may not be huge but it makes it more professional. That at standardizing the names.

My only real comments at the moment are kinda nitpicky ones about consistency in the images rendering.

The new PASS logo is pretty large and much closer to the buttons than the others, in both mobile and desktop versions. In fact, they all seem a bit different. The CODE PDX one is a bit on the big side as well.

I know this is largely because the images themselves are not consistent. But if we could make them more uniform I think that'd look better. Not worth sweating too much over, though. We could come back to it later with higher definition versions, if we wanted.

Also, perhaps this is a good time to organize the images more? There's already a folder just for volunteer images.

[ogorman89]

Looking good. The file size reductions may not be huge but it makes it more professional. That at standardizing the names.

My only real comments at the moment are kinda nitpicky ones about consistency in the images rendering.

The new PASS logo is pretty large and much closer to the buttons than the others, in both mobile and desktop versions. In fact, they all seem a bit different. The CODE PDX one is a bit on the big side as well.

I know this is largely because the images themselves are not consistent. But if we could make them more uniform I think that'd look better. Not worth sweating too much over, though. We could come back to it later with higher definition versions, if we wanted.

Also, perhaps this is a good time to organize the images more? There's already a folder just for volunteer images.

@andycwilliams The images you mentioned are both "new" .svgs, and their scale differs from the .png alternates, so it did throw off the layout a little. As for definition the .svgs should scale infinitely so all that should need to happen is for me to adjust their sizes, padding and margin for consistency.

I can easily adjust this, but would prefer to do it in a separate PR. I was going to propose a slight layout change for the project logos on the project page as well, so I could submit those together.

We could certainly add more folders to /assets. How does folders for /heroImages, /partnerLogos, and /projectLogos sound? That would just leave more generic CODE PDX assets in /assets

[andycwilliams]

Looking good. The file size reductions may not be huge but it makes it more professional. That at standardizing the names.
My only real comments at the moment are kinda nitpicky ones about consistency in the images rendering.
The new PASS logo is pretty large and much closer to the buttons than the others, in both mobile and desktop versions. In fact, they all seem a bit different. The CODE PDX one is a bit on the big side as well.

I know this is largely because the images themselves are not consistent. But if we could make them more uniform I think that'd look better. Not worth sweating too much over, though. We could come back to it later with higher definition versions, if we wanted.
Also, perhaps this is a good time to organize the images more? There's already a folder just for volunteer images.

@andycwilliams The images you mentioned are both "new" .svgs, and their scale differs from the .png alternates, so it did throw off the layout a little. As for definition the .svgs should scale infinitely so all that should need to happen is for me to adjust their sizes, padding and margin for consistency.

I can easily adjust this, but would prefer to do it in a separate PR. I was going to propose a slight layout change for the project logos on the project page as well, so I could submit those together.

We could certainly add more folders to /assets. How does folders for /heroImages, /partnerLogos, and /projectLogos sound? That would just leave more generic CODE PDX assets in /assets

Images are always finicky. The struggle is eternal.

I'm down if you want to create a separate issue.

I see in the original issue that in assets create desktop and mobile folders is proposed anyway, so it's a good time to add more folders. And yeah those names look fine with me.

[ogorman89]

In response to @andycwilliams's review, I completed the following:

I reorganized assets into a few folders. The only change from my previous comment was that instead of making a /projectLogos folder with only two images, I instead created a folder /codePdx, and I put all the CODE PDX related assets in there including the rose logos, our blobs, and project logos. The only image left loose in /assets is the 404 fallback image. Here's what it looks like:

For the size and layout changes, I took @andycwilliams's comment and screenshots above and opened issue #90. I'll work on getting the project section to display nicely again and get a PR up for it.

I also corrected a bug (that I created 🥳 ) that was causing the Ceti logo not to display on mobile. It should display correctly now.

[Jared-Krajewski]

💰 big savings indeed. nice changes