React <Image> component does not optimize images

Dustin Simensen

May 24, 2021 21:40 Edited

I'm trying to optimize my images so visitors to my site aren't served giant images when they're on mobile. The docs say that the React component automatically optimizes images here so I tried it and it doesn't do anything. It actually breaks my site and won't serve anything to mobile devices. It just hangs on the request until it times out. Here's how I'm currently trying to implement it:

<Image publicId={url}>
     <Transformation quality="auto" fetchFormat="auto" />
</Image>

Am I missing something? Or do the docs fail to mention an important setting I need to use?

For context, I'm using React with Next.js and I have only tested this in a development environment. I don't want to break my current site, so I haven't tried it in production yet.

update: so it looks like this is the culprate 

<Transformation fetchFormat="auto" />

 

but I don't know why... I want the mobile format to have webP. If I don't set this there won't be any compression applied to the images.

0

• Official comment

  

  Akshay Joshi

  May 26, 2021 19:19 Edited

  Hi Dustin,

  The fetchFormat is used to set the best image format for a particular browser. So if you want to display webP for the mobile format you will have to use fetchFormat="webp"

  You can find more information here: https://cloudinary.com/documentation/image_transformations#image_format_support

Post is closed for comments.