gatsbyjs/gatsby · error · Error

Cannot specify both JPG and PNG formats

Error message

Cannot specify both JPG and PNG formats

What it means

Thrown by validateAndNormalizeFormats in the polyfill-remote-file image utils when both 'jpg' and 'png' are present in the requested formats set. Gatsby's image pipeline cannot output both JPEG and PNG for the same source simultaneously because they serve the same use-case and would bloat output.

Source

Thrown at packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/utils.ts:16

import { ImageFormat, ImageFit, WidthOrHeight } from "../types"

export function validateAndNormalizeFormats(
  formats: Array<ImageFormat>,
  sourceFormat: ImageFormat
): Set<ImageFormat> {
  const formatSet = new Set<ImageFormat>(formats)

  // convert auto in format of source image
  if (formatSet.has(`auto`)) {
    formatSet.delete(`auto`)
    formatSet.add(sourceFormat)
  }

  if (formatSet.has(`jpg`) && formatSet.has(`png`)) {
    throw new Error(`Cannot specify both JPG and PNG formats`)
  }

  return formatSet
}

/**
 * Generate correct width and height like sharp will do
 * @see https://sharp.pixelplumbing.com/api-resize#resize
 */
export function calculateImageDimensions(
  originalDimensions: { width: number; height: number },
  {
    fit,
    width: requestedWidth,
    height: requestedHeight,
    aspectRatio: requestedAspectRatio,
  }: { fit: ImageFit; aspectRatio: number } & WidthOrHeight
): { width: number; height: number; aspectRatio: number } {

View on GitHub (pinned to 8b06340921)

Solutions

1. Request only one of 'jpg' or 'png', not both.
2. Use formats: ['auto', 'webp', 'avif'] (the default) to let the pipeline pick the best format per source.
3. If you need a raster format, choose 'jpg' for photos or 'png' for graphics with transparency.

Example fix

// before
gatsbyImageData(source, { formats: ['auto', 'jpg', 'png'] })
// after
gatsbyImageData(source, { formats: ['auto', 'webp', 'avif'] })

const formats = ['auto', 'webp', 'avif']
const formatSet = new Set(formats)
if (formatSet.has('jpg') && formatSet.has('png')) {
  throw new Error('Cannot request both jpg and png')
}
// use formatSet for image generation

const hasNoJpgPngConflict = (formats: string[]): boolean =>
  !(new Set(formats).has('jpg') && new Set(formats).has('png'))

When it happens

Trigger: The formats array contains both 'jpg' and 'png'; after 'auto' is expanded to the source format, the resulting set still contains both, triggering the conflict check.

Common situations: A query requests formats: ['jpg', 'png'], or formats: ['auto', 'jpg', 'png'] where auto resolves to png making the set contain both.

Related errors

• Unknown format "${args.format}" was given to resize ${source
• Invalid plugin options for "gatsby-plugin-sitemap":
• The "layout" argument is required for "${source.url}"
• Either the "width" or "height" argument is required f
• The provided width of "${width}" is incorrect. Dimensions sh

AI-assisted analysis of gatsbyjs/gatsby@8b06340921 (2026-08-13). Data as JSON: /api/errors/d9358d824545c4b9. Report an issue: GitHub.