在ImageKit中处理各种大小图像的最佳方法

<img src="https://ik.imagekit.io/your_imagekit_id/your_image.jpg?tr=w-300,h-200" alt="Resized Image">

<img src="https://ik.imagekit.io/your_imagekit_id/your_image.jpg?tr=w-300,h-200,c-crop" alt="Cropped Image">

<img src="https://ik.imagekit.io/your_imagekit_id/your_image.jpg?tr=w-300,h-200,q-80,f-auto" alt="Optimized Image">

npm install imagekit-javascript

import ImageKit from "imagekit-javascript";

const imagekit = new ImageKit({
  publicKey: "your_public_key",
  urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
  authenticationEndpoint: "http://www.yourserver.com/auth"
});

const url = imagekit.url({
  path: "/your_image.jpg",
  transformation: [
    {
      width: 300,
      height: 200,
      crop: "maintain_ratio"
    },
    {
      quality: 80,
      format: "auto"
    }
  ]
});

console.log(url);

<img src="https://ik.imagekit.io/your_imagekit_id/your_image.jpg?tr=w-300" 
     srcset="https://ik.imagekit.io/your_imagekit_id/your_image.jpg?tr=w-300 300w,
             https://ik.imagekit.io/your_imagekit_id/your_image.jpg?tr=w-600 600w,
             https://ik.imagekit.io/your_imagekit_id/your_image.jpg?tr=w-900 900w"
     sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 900px"
     alt="Responsive Image">

<img src="https://ik.imagekit.io/your_imagekit_id/your_image.jpg?tr=f-webp" alt="WebP Image">