Any, idea why image would not render on the mobile browsers? I tried Safari and Chrome on iphone, but it stuck to this: [IMG_7599.PNG] I am using this GraphQL query: image { responsiveImage(imgixParams: {fm: webp, w: 800}) { ...responsiveImageFragment } } And <Image /> component react-d…

I’m still fairly new to date but I think the problem is your query, using fm: webp will only return the webp versions of the image which aren’t supported by safari on desktop or phone. Try something like image { responsiveImage(imgixParams: {auto: format, w: 800}) { ...responsiveImageFragmen…

Thanks, I will try that. The weird thing is I am using the same query on other website and those images are showing on mobile browser. Safari supports webp since version 14 [image] What is WebP, does it have browser support and why should you care? When Safari 14 drops around September …

I tried changing ImgIx params as you suggested, but I get the same result…

[image] primoz.rome: responsiveImageFragment Can you give us your react-datocms version, the exact snippet of code that uses the component, and the responsiveImageFragment fragment?

@s.verna below requested data… react-datocms version: react-datocms": "^3.0.11", Here is the responsiveImageFragment fragment: export const responsiveImageFragment = ` fragment responsiveImageFragment on ResponsiveImage { srcSet webpSrcSet sizes src width height …

@s.verna did you maybe look into this, we are still not figuring out this…

Hello @primoz.rome , you mentioned that you are getting this in one specific query for a website but not the other, using the same query and Component, but a different image, correct? [image] primoz.rome: The weird thing is I am using the same query on other website and those images are showing …

[image] primoz.rome: export const responsiveImageFragment = ` :+1: Have sent the email

@dthreatt FYI, I split your topic into its own thread so we can better track it separately from this older issue (didn’t want to lose it): [image] <Image/> component not lazy-loading in Astro 🆘 Support I am having the same problem. My code is almost exactly like the auth…

React-datocms <Image /> not showing on mobile browsers further then blurred version

🆘 Support

Topic		Replies	Views
Different behavior while fetching and displaying images with react-datocms <Image /> component 🆘 Support	2	75	July 7, 2025
<Image/> component not lazy-loading in Astro 🆘 Support	14	1519	October 26, 2023
`next/image` vs `react-datocms` Image ✋ Feature Requests	9	1910	May 28, 2023
Bug in responsiveImage width/height after ImgIx "trim" transformation applied 🆘 Support	5	121	May 16, 2025
React-datocms blured image not filling the container like the final image 🆘 Support	8	662	November 15, 2022

React-datocms <Image /> not showing on mobile browsers further then blurred version

Related topics