Azbl/665 Make Before and After Text on Image Actual Text

[AZBL]

This addresses issue #665 and builds off previous PR #721 (which was closed after inactivity).

1. Replaces beforeAfter.png that included "Before" and "After" as part of the image to one that doesn't include this.
2. Compressed the image reducing size by 72%.
3. Added aria-labelledby to the Image component.
4. Added caption: "A Philadelphia lot before a clean up and the same lot, filled with trees and greenery after a clean up." in a p tag.
5. Ensured no large gap between caption and image by removing gap on container div.
6. Made caption text regular font weight (was bold).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vacant-lots-proj	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 4:55pm

[AZBL]

@bacitracin @CodeWritingCow @marvieqa

[CodeWritingCow]

Hi @AZBL, updated image and caption look good on mobile and desktop. Thanks!

Desktop

Mobile

[CodeWritingCow]

@AZBL The compressed image looks the same as the original image, yet its file size is much smaller. That's awesome! What tool did you use for the image compression?

[AZBL]

@AZBL The compressed image looks the same as the original image, yet its file size is much smaller. That's awesome! What tool did you use for the image compression?

@CodeWritingCow I used tinypng.com to compress it. I actually did it originally because I kept getting this error when I tried to push,

error: RPC failed; HTTP 400 curl 22 The requested URL returned error: 400
send-pack: unexpected disconnect while reading sideband packet

but compressing it still didn't work, so I entered

git config http.postBuffer 524288000

and pushed again and it worked.