I have been totally flummoxed by this...
I have an image I am putting in the header:

        <Image
          src="/properroofinglogowithtextwhitebackground.png"
          alt="Proper Roofing Logo"
          width={40}
          height={40}
        />

but it shows up as broken if the width and height are anything below 200. I have tried using fill, contain with a div tag above it and it still wont help.

I am also getting issues with sharp which might be related:
✓ Ready in 387ms
âš  For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
ImageError: Unable to optimize image and unable to fallback to upstream image
at imageOptimizer (/home/outsider_analytics/Code/roofing-crm/nodemodules/.pnpm/next@14.0.4@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/image-optimizer.js:659:19)
at async cacheEntry.imageResponseCache.get.incrementalCache (/home/outsider_analytics/Code/roofing-crm/nodemodules/.pnpm/next@14.0.4@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:176:65)
at async /home/outsider_analytics/Code/roofing-crm/nodemodules/.pnpm/next@14.0.4@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/response-cache/index.js:90:36
at async /home/outsider_analytics/Code/roofing-crm/nodemodules/.pnpm/next@14.0.4@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/lib/batcher.js:41:32 {
statusCode: 400
}
dispite
pnpm list sharp
Legend: production dependency, optional only, dev only
dependencies:
sharp 0.33.2

any help would be great!