GraphQL Fragments

/**
 * Basic fixed image fields
 * Includes: base64, width, height, src, srcSet
 */
fragment GatsbyImageSharpFixed on ImageSharpFixed;

/**
 * Fixed image with traced SVG placeholder (deprecated)
 * Includes: tracedSVG, width, height, src, srcSet
 * Note: tracedSVG falls back to base64
 */
fragment GatsbyImageSharpFixed_tracedSVG on ImageSharpFixed;

/**
 * Fixed image with WebP support
 * Includes: base64, width, height, src, srcSet, srcWebp, srcSetWebp
 */
fragment GatsbyImageSharpFixed_withWebp on ImageSharpFixed;

/**
 * Fixed image with WebP and traced SVG (deprecated)
 * Includes: tracedSVG, width, height, src, srcSet, srcWebp, srcSetWebp
 */
fragment GatsbyImageSharpFixed_withWebp_tracedSVG on ImageSharpFixed;

/**
 * Fixed image without base64 placeholder
 * Includes: width, height, src, srcSet
 */
fragment GatsbyImageSharpFixed_noBase64 on ImageSharpFixed;

/**
 * Fixed image with WebP but no base64 placeholder
 * Includes: width, height, src, srcSet, srcWebp, srcSetWebp
 */
fragment GatsbyImageSharpFixed_withWebp_noBase64 on ImageSharpFixed;

import { graphql } from "gatsby";

// Use in page queries
export const query = graphql`
  query {
    logo: file(relativePath: { eq: "logo.png" }) {
      childImageSharp {
        fixed(width: 200, height: 100) {
          ...GatsbyImageSharpFixed
        }
      }
    }
    
    icon: file(relativePath: { eq: "icon.jpg" }) {
      childImageSharp {
        fixed(width: 64, height: 64) {
          ...GatsbyImageSharpFixed_withWebp
        }
      }
    }
  }
`;

/**
 * Basic fluid image fields
 * Includes: base64, aspectRatio, src, srcSet, sizes
 */
fragment GatsbyImageSharpFluid on ImageSharpFluid;

/**
 * Presentation size limits for fluid containers
 * Includes: presentationHeight (as maxHeight), presentationWidth (as maxWidth)
 */
fragment GatsbyImageSharpFluidLimitPresentationSize on ImageSharpFluid;

/**
 * Fluid image with traced SVG placeholder (deprecated)
 * Includes: tracedSVG, aspectRatio, src, srcSet, sizes
 */
fragment GatsbyImageSharpFluid_tracedSVG on ImageSharpFluid;

/**
 * Fluid image with WebP support
 * Includes: base64, aspectRatio, src, srcSet, srcWebp, srcSetWebp, sizes
 */
fragment GatsbyImageSharpFluid_withWebp on ImageSharpFluid;

/**
 * Fluid image with WebP and traced SVG (deprecated)  
 * Includes: tracedSVG, aspectRatio, src, srcSet, srcWebp, srcSetWebp, sizes
 */
fragment GatsbyImageSharpFluid_withWebp_tracedSVG on ImageSharpFluid;

/**
 * Fluid image without base64 placeholder
 * Includes: aspectRatio, src, srcSet, sizes
 */
fragment GatsbyImageSharpFluid_noBase64 on ImageSharpFluid;

/**
 * Fluid image with WebP but no base64 placeholder
 * Includes: aspectRatio, src, srcSet, srcWebp, srcSetWebp, sizes
 */
fragment GatsbyImageSharpFluid_withWebp_noBase64 on ImageSharpFluid;

import { graphql } from "gatsby";

// Use in page queries
export const query = graphql`
  query {
    hero: file(relativePath: { eq: "hero.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 1200, quality: 90) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
    
    gallery: allFile(filter: { extension: { in: ["jpg", "png"] } }) {
      edges {
        node {
          childImageSharp {
            fluid(maxWidth: 600) {
              ...GatsbyImageSharpFluid
              ...GatsbyImageSharpFluidLimitPresentationSize
            }
          }
        }
      }
    }
  }
`;

# Fastest loading (no placeholder)
query {
  file(relativePath: { eq: "image.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 800) {
        ...GatsbyImageSharpFluid_noBase64
      }
    }
  }
}

# Modern formats for better compression
query {
  file(relativePath: { eq: "image.jpg" }) {
    childImageSharp {  
      fluid(maxWidth: 800) {
        ...GatsbyImageSharpFluid_withWebp
      }
    }
  }
}

# Legacy browser support without modern features
query {
  file(relativePath: { eq: "image.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 800) {
        ...GatsbyImageSharpFluid
      }
    }
  }
}

import { useStaticQuery, graphql } from "gatsby";

const ImageComponent = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "placeholder.png" }) {
        childImageSharp {
          fixed(width: 300, height: 200) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `);

  return <img {...data.placeholderImage.childImageSharp.fixed} />;
};

import { StaticQuery, graphql } from "gatsby";

const ImageGallery = () => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile(filter: { extension: { eq: "jpg" } }) {
          edges {
            node {
              childImageSharp {
                fluid(maxWidth: 400) {
                  ...GatsbyImageSharpFluid_withWebp_noBase64
                }
              }
            }
          }
        }
      }
    `}
    render={data => (
      <div className="gallery">
        {data.images.edges.map(({ node }, index) => (
          <img
            key={index}
            {...node.childImageSharp.fluid}
            alt={`Gallery image ${index + 1}`}
          />
        ))}
      </div>
    )}
  />
);