16 utilize vercel image optimizations

[kobebuckley]

Update representing the Image implementation suggestions from Next js for optimization as well as required alt tag additions with relevant descriptions

[MichaelTamaki]

LGTM! Have suggestions but they are not blockers 💯

[Alexandra-Haynes]

@kobebuckley , thank you for this PR 🔥 I think transitioning to the Image component has some strong advantages over the standard tag.

I've noticed a couple of areas we could improve with the component usage:

1. Alt Text: I agree with @MichaelTamaki that the alt description for the images are quite detailed, which is great, but it might be a bit lengthy for accessibility users. Consider simplifying it for clarity. Here's a suggestion: alt="Code with Aloha logo featuring an orange lightbulb." or simply alt="Code with Aloha logo" Keeping the alt description short provides efficiency for screen readers that vocalize the alt text and it also quickly provides the context and relevance of the image, without overwhelming the user.

2. Width & Height Properties:

For the next/image component, it's essential to specify the intrinsic dimensions of the image. Without specifying them, we get a server error: Error: Image with src "../logo.png" is missing required "width" property. For these properties we have to look at the natural width and heights of the pics (by looking at the properties), this will assure the natural ratio. The actual rendered dimensions will be controlled by tailwind classes. This means the image won't look stretched or squished.
That being said, for the logo dimensions are 500px by 500px and for the hero_image: 1300px by 1300px. Please add these dimensions as width and height attributes.

I hope this feedback helps in refining the code. Let me know your thoughts!

[kobebuckley]

LGTM! Have suggestions but they are not blockers 💯

Thank you for providing examples, links, and suggestions for fixing up the code as shown above. I will implement these changes moving forward

[kobebuckley]

Thank you Alexandra; I'm still working on the 2nd one, but I'll get it fixed

[Alexandra-Haynes]

Kobe, thanks for working on this! I was reviewing your pull request and noticed the Image component usage in your code.

In Next.js, the width and height props of the Image component should be written with curly braces instead of quotation marks. See example here: https://nextjs.org/docs/pages/api-reference/components/image#width This syntax is used because the values for these props are expected to be numbers, not strings.

Would you mind updating the width and height to use curly braces like this? width={500} height={500}

This change will ensure that the props are passed as numbers and help to avoid any potential issues related to prop types.

Thanks again for your work, and let me know if you have any questions!

[kobebuckley]

Kobe, thanks for working on this! I was reviewing your pull request and noticed the Image component usage in your code.

In Next.js, the width and height props of the Image component should be written with curly braces instead of quotation marks. See example here: https://nextjs.org/docs/pages/api-reference/components/image#width This syntax is used because the values for these props are expected to be numbers, not strings.

Would you mind updating the width and height to use curly braces like this? width={500} height={500}

This change will ensure that the props are passed as numbers and help to avoid any potential issues related to prop types.

Thanks again for your work, and let me know if you have any questions!

Thank you Alexandra! I replaced the string values with the proper prop types for numbers instead to represent Next js syntax

[Alexandra-Haynes]

Thank you, Kobe! We appreciate your help