Problem with logo component quality

[AilinMacchia]

Describe the bug The logo image in the footer and nav is rendered in low quality in mobile devices.

Expected behavior The logo image is rendered in the appropriate quality.

Current behavior

The property sizes in the Image component from Nextjs needs to be at least sizes="(max-width: 360px) 30vw, (max-width: 768px) 50vw, 30vw" to be rendered in good quality.

import { Image } from 'src/components/ui/Image'
import type { ImageProps } from 'src/components/ui/Image'

interface LogoProps {
  alt: string
  src: string
  loading?: ImageProps['loading']
}

function Logo({ alt, src, loading = 'lazy' }: LogoProps) {
  return (
    <div data-fs-logo>
      <Image
        alt={alt}
        src={src}
        width={0}
        height={0}
        sizes="15vw"
        loading={loading}
        style={{ width: '100%', height: 'auto' }}
      />
    </div>
  )
}

export default Logo

Steps to reproduce A step-by-step on how to reproduce the bug behavior.

1. Enter https://starter.vtex.app/
2. Go to the footer.
3. Make the footer at least 204px in width.

Possible Solution sizes="(max-width: 360px) 30vw, (max-width: 768px) 50vw, 30vw"

[victors1682]

cc: @renatamottam