Hi, I'm pretty sure I'm doing the image stuff wrong, some help would be appreciated.

What I do currently, is import the image I want at the top of the file import python from /public/python.png then I use the python variable to pass into my custom component, which uses the Image component to display the image.

This works fine however, google Lighthouse complains about my image load times and FCP time.

So, I have tried just passing the url to the image /python.png into my custom component, then into the Image component, but this results in the image being very low resolution, like in the image attached.

Please, what is the best way to do this, where the images are loaded optimally?