Gatsby

Installation

Cortado.js can be installed via npm:

npm install cortado-js

Usage

In Gatsby applications, Cortado.js simplifies image optimization and resizing. By utilizing the optimizeImage and resizeImage functions, you can easily optimize and resize images for your Gatsby site. Here's how to integrate both methods into your Gatsby project:

// Import optimizeImage and resizeImage functions from Cortado.js
import { optimizeImage, resizeImage } from 'cortado-js';

export const query = graphql`
  query {
    file(relativePath: { eq: "image.jpg" }) {
      publicURL
    }
  }
`;

const MyComponent = ({ data }) => {
  // Call optimizeImage with the path to your image
  const optimizedImage = optimizeImage(data.file.publicURL);
  
  // Call resizeImage to resize the image to a specific width and height
  const resizedImage = resizeImage(data.file.publicURL, { width: 300, height: 200 });
  
  return (
    <div>
      {/* Use the optimized image source in your component */}
      <img src={optimizedImage} alt="Optimized Image" />
      
      {/* Use the resized image source in your component */}
      <img src={resizedImage} alt="Resized Image" />
    </div>
  );
};

export default MyComponent;

Cortado.js seamlessly integrates with Gatsby, providing both image optimization and resizing capabilities to enhance the performance of your Gatsby site.

Nuxt.js