Git Product home page Git Product logo

Comments (2)

eyalktCloudinary avatar eyalktCloudinary commented on August 15, 2024

Hey @AlexanderFalkenberg, thanks for reaching out!
Delivery URLs are built using the @cloudinary/url-gen library, which allows you to choose the desired format.

import {Cloudinary} from "@cloudinary/url-gen";

   const cld = new Cloudinary({
     cloud: {
       cloudName: 'demo'
     }
   }); 

   const myImage = cld.image('sample');
   myImage.format('webp');
   const myUrl = myImage.toURL();

Here is an example of using the AdvancedImage component in React with the format set to webp (modification of this example) -

import React from "react";
import { Cloudinary } from "@cloudinary/url-gen";
import { AdvancedImage, responsive } from "@cloudinary/react";

const App = () => {
  const cld = new Cloudinary({
    cloud: {
      cloudName: "demo"
    }
  });

  const myImage = cld.image("sample");
  myImage.format("webp");

  // Use the responsive plugin (optional)
  return (
    <div>
      <AdvancedImage cldImg={myImage} plugins={[responsive()]} />
    </div>
  );
};

export default App;

An important thing to note is that it is highly recommended to use the auto format option (i.e - myImage.format('auto')) which uses our automatic format selection algorithm, more info here.

from frontend-frameworks.

patrick-tolosa avatar patrick-tolosa commented on August 15, 2024

Closing this issue as it was answered, if you have further questions please feel free to open a new issue.

from frontend-frameworks.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.