– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Best practices for using image sizes in React projects with Sanity.io

imageUrlFor(buildImageObj(node.mainImage))...


how do you ensure to download a proper size of image for the current view port?

I have a code like


&lt;img 
    src={imageUrlFor(buildImageObj(node.mainImage))
                      .auto('format')
                      .width(1000)
                      .url()} 
/&gt;

, what do you do? Do you use JavaScript to get window width and calculate the width of image you want to get? Or is there any other recommended practice?

 I’ve used something like that on a project


 &lt;picture&gt;
        &lt;img
          style={{ width: "100%" }}
          srcSet={`
            ${urlFor(node.asset).width(320)} 320w,
            ${urlFor(node.asset).width(480)} 480w,
            ${urlFor(node.asset).width(800)} 800w
          `}
          sizes={`
            (max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px
          `}
          src={urlFor(asset)}
        /&gt;
      &lt;/picture&gt;

 Oh, I didn't think of that. I'm not very good with images 

sweat_smile

I got this snippet straight from a codesandbox, but I can’t find the link 

thinking_face

 I tend to prefer this solution to GatsbyImage.

Best practices for using image sizes in React projects with Sanity.io

Sanity– build remarkable experiences at scale

Was this answer helpful?