search

framesjs / frames.js

The fastest way to make Frames
https://framesjs.org
MIT License
355 stars 100 forks source link

Image has to be less than 256kb #120

Closed mint-pz closed 8 months ago

mint-pz commented 8 months ago

https://warpcast.com/~/developers/frames shows me the error Image has to be less than 256kb while the frame spec said The size of the image must be < 10 MB. (https://docs.farcaster.xyz/reference/frames/spec#images)

My frame has a div tag with a background image (~140kb) but after the compile process, the size is up to ~700kb

<FrameImage aspectRatio="1.91:1">
   <div
            tw="flex"
            style={{
              paddingTop: "170px",
              background: "blue",
              width:'100%',
              height: "100vh",
              backgroundSize: "100% 100%",
              backgroundImage: `url('${
                baseUrl + "/images/backgrounds/bg_4.png"
              }')`,
            }}
          >

          </div>
</FrameImage>

Any work around ways to fix it? Thanks in advance!

mint-pz commented 8 months ago

Update: I put a image option options={{ width: 400, height: 330 }} to the FrameImage and the size is down

stephancill commented 8 months ago

@mint-pz you can return the image directly using the src prop e.g. <FrameImage src=… > if that suits your use case. See the explanation here https://github.com/framesjs/frames.js/issues/103#issuecomment-1952897776