In ProjectsSection, how do I add images without them being downscaled in resolution?
JaanLavaerts opened this issue · comments
When I add a image to the src in projects.json, it displays a very small .webp version of my full HD png image.
Only the preexisting images get displayed right.
Hey @JaanLavaerts!
Images get indeed downscaled to improve the performance. But usually you should not see a big difference.
Could you share a screenshot (or repository link) of the problem?
@konstantinmuenster thanks for your answer!
I honestly just want to display the image alot bigger and if possible without the background and border/shadow so its more readable.
This is how it looks:
This is the original image: https://user-images.githubusercontent.com/71444090/239243060-81638da9-c99d-43a8-aa58-5e05919ce452.png
Sorry for my late reply @JaanLavaerts! You could try overwriting/shadowing the CSS file that is responsible for styling the project item. You find it here: https://github.com/konstantinmuenster/gatsby-theme-portfolio-minimal/blob/main/gatsby-theme-portfolio-minimal/src/components/Project/style.module.css
There is a guide from Gatsby that explains how shadowing works: https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/
Otherwise, you could try tweaking the image so it better fits the frame/container. Since it is hard to find a solution for all possible images, I don't think I will adjust the actual image implementation.