feat: image optimisation #834
Conversation
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
…tle` prop typing.
…ies into common modules.
…for year data and path isolation, and component verification.
…ng a pseudo-element and adjust content z-index.
…erform general site maintenance.
… imports, and remove unused styling.
… components and tests.
…SLint fix progress report.
…icit types in tests, components, and web vitals reporting.
…and perform minor formatting cleanup.
The import/order rule was too strict and tedious to maintain. Disabling it globally to improve developer experience.
Use @views alias instead of relative path to fix unresolved import error. This achieves zero ESLint errors in the codebase.
… code style and configuration updates.
…data` component, replacing `useDocumentTitleUpdater` in home wrappers and adding related documentation.
…on to optimize resource loading in `App.tsx`.
…lude them, and remove the SonarCloud CI workflow.
…phy, and refactor imports to use aliases.
…enhanced typography and layout improvements
…ents, HTML, and documentation.
✅ Deploy Preview for dev-bcn ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @anyulled, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request focuses on a comprehensive image optimization effort, migrating various image assets to the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request focuses on optimizing images by converting them from formats like PNG and JPEG to the more efficient WebP format. The changes are applied across various files, including HTML, TypeScript components, and configuration files, which is a great step towards improving website performance.
However, I've noticed a few areas for improvement:
- Several components now use relative paths for images (e.g.,
images/logo.webp) instead of absolute paths (/images/logo.webp). This can lead to broken images on nested routes. I've left specific suggestions to fix these. - Some meta tags for social sharing (
og:image,twitter:image) inindex.htmlandpublic/index.htmlstill reference.pngfiles. While I couldn't comment directly on those lines as they were not part of the diff, it would be good to update them for consistency. - The scope of this PR seems to extend beyond image optimization, with significant refactoring and content changes in the
HomeWTCcomponent. It would be beneficial to have a more descriptive PR title and description to reflect all the changes.
Overall, good work on the optimizations. Addressing the pathing issues will ensure the site remains robust.
| <SectionWrapper color="transparent"> | ||
| <StyleHomeContainer> | ||
| <StyledLogo src="/images/logo.png" alt="DevBcn logo" /> | ||
| <StyledLogo src="images/logo.webp" alt="DevBcn logo" /> |
There was a problem hiding this comment.
The image path was changed from an absolute path (/images/logo.png) to a relative one (images/logo.webp). This might cause issues with resolving the image, as it will be relative to the current page URL. It's generally safer to use an absolute path from the root, like /images/logo.webp, to ensure it's always found correctly.
| <StyledLogo src="images/logo.webp" alt="DevBcn logo" /> | |
| <StyledLogo src="/images/logo.webp" alt="DevBcn logo" /> |
| <StyleHomeContainer> | ||
| <StyledLogoDiv> | ||
| <StyledDevBcnLogo src="images/logo.png" alt="DevBcn logo" /> | ||
| <StyledDevBcnLogo src="images/logo.webp" alt="DevBcn logo" /> |
There was a problem hiding this comment.
The image path seems to have been changed to a relative path. This could lead to broken images depending on the URL. Using an absolute path from the root, like /images/logo.webp, is recommended for consistency and to avoid resolution issues.
| <StyledDevBcnLogo src="images/logo.webp" alt="DevBcn logo" /> | |
| <StyledDevBcnLogo src="/images/logo.webp" alt="DevBcn logo" /> |
| <StyledPlusSign>+</StyledPlusSign> | ||
| <StyledKcdLogo | ||
| src="images/KCD-logo-white.png" | ||
| src="images/KCD-logo-white.webp" |
There was a problem hiding this comment.
Similar to the other logo, this image path is now relative. It should probably be an absolute path from the root, like /images/KCD-logo-white.webp, to ensure it loads correctly on all pages.
| src="images/KCD-logo-white.webp" | |
| src="/images/KCD-logo-white.webp" |
| transition={{ duration: 0.8 }} | ||
| > | ||
| <StyledDevBcnLogo src="images/logo.png" alt="DevBcn logo" /> | ||
| <StyledDevBcnLogo src="images/logo.webp" alt="DevBcn logo" /> |
There was a problem hiding this comment.
The path for this logo image has been changed to be relative. To ensure it loads correctly from any page, it's better to use an absolute path from the root, like /images/logo.webp.
| <StyledDevBcnLogo src="images/logo.webp" alt="DevBcn logo" /> | |
| <StyledDevBcnLogo src="/images/logo.webp" alt="DevBcn logo" /> |
| > | ||
| <StyledDevBcnLogo src="images/logo.png" alt="DevBcn logo" /> | ||
| <StyledDevBcnLogo src="images/logo.webp" alt="DevBcn logo" /> | ||
| </StyledLogoDiv> |
There was a problem hiding this comment.
The image path for the logo has been changed to a relative path. For consistency and to prevent potential loading issues, it would be better to use an absolute path from the root, like /images/logo.webp.
| </StyledLogoDiv> | |
| <StyledDevBcnLogo src="/images/logo.webp" alt="DevBcn logo" /> |
No description provided.