Optimizing responsive image loading with Sanity's CDN
4 replies
Last updated: Jan 21, 2021
D
Hey! We're fetching responsive images from cdn.sanity.io using
• Does it just take that long to generate a new version of an image server side maybe?
• Is there something that can be optimized in our transformations query params?
Example image url we have:
https://cdn.sanity.io/images/ <project-id>/<dataset>/<some-img>.png?rect=750,0,1406,1438&w=1112&h=1137&auto=format
After the initial long running request, requests for the same image with the same params are quick.
@sanity/image-urlto generate query param transformations. One observation is that when one or more query param changes value, the request takes quite some time where TTFB is pretty much all of the wait time.• Is anyone else experiencing this?
• Does it just take that long to generate a new version of an image server side maybe?
• Is there something that can be optimized in our transformations query params?
Example image url we have:
https://cdn.sanity.io/images/ <project-id>/<dataset>/<some-img>.png?rect=750,0,1406,1438&w=1112&h=1137&auto=format
After the initial long running request, requests for the same image with the same params are quick.
Jan 21, 2021, 7:30 AM
D
Hi
Yes indeed, if the image size you are requesting is not cached by the CDN it will take some time to generate the image and send it over to CDN. Therefore we strongly recommend using predefined srcsets with a set of predefined image sizes for various display, and not rely on creating unique images for every viewport width.
user A
Yes indeed, if the image size you are requesting is not cached by the CDN it will take some time to generate the image and send it over to CDN. Therefore we strongly recommend using predefined srcsets with a set of predefined image sizes for various display, and not rely on creating unique images for every viewport width.
Jan 21, 2021, 9:33 AM
D
user J
Allright, thanks!Jan 21, 2021, 9:57 AM
D
Here's an example from sanity.io site:
<img alt="Interior space with RBW palindrome light suspended from ceiling" srcset="<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=320&h=160&fit=clip&auto=format> 320w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=480&h=240&fit=clip&auto=format> 480w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=640&h=320&fit=clip&auto=format> 640w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=720&h=360&fit=clip&auto=format> 720w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=800&h=400&fit=clip&auto=format> 800w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=960&h=480&fit=clip&auto=format> 960w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=1280&h=640&fit=clip&auto=format> 1280w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=1440&h=720&fit=clip&auto=format> 1440w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=1600&h=800&fit=clip&auto=format> 1600w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=1920&h=960&fit=clip&auto=format> 1920w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=2160&h=1080&fit=clip&auto=format> 2160w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=2400&h=1200&fit=clip&auto=format> 2400w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=2880&h=1440&fit=clip&auto=format> 2880w,<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?rect=0,50,1600,800&w=4320&h=2160&fit=clip&auto=format> 4320w" sizes="393px" src="<https://cdn.sanity.io/images/3do82whm/next/98207d99e70275cc8188a4124875c2c0f3c4e034-1600x900.jpg?w=600&fit=clip&auto=format>" class="Image_img__Isbmk" width="600" height="300" loading="lazy" style="opacity: 1;">
Jan 21, 2021, 9:58 AM
D
I'd say you propably don't need that many 😄
Jan 21, 2021, 9:59 AM
Sanity– 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.