{"record":{"id":"d9358d824545c4b9","repo":"gatsbyjs/gatsby","slug":"cannot-specify-both-jpg-and-png-formats","errorCode":null,"errorMessage":"Cannot specify both JPG and PNG formats","messagePattern":"Cannot specify both JPG and PNG formats","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/utils.ts","lineNumber":16,"sourceCode":"import { ImageFormat, ImageFit, WidthOrHeight } from \"../types\"\n\nexport function validateAndNormalizeFormats(\n  formats: Array<ImageFormat>,\n  sourceFormat: ImageFormat\n): Set<ImageFormat> {\n  const formatSet = new Set<ImageFormat>(formats)\n\n  // convert auto in format of source image\n  if (formatSet.has(`auto`)) {\n    formatSet.delete(`auto`)\n    formatSet.add(sourceFormat)\n  }\n\n  if (formatSet.has(`jpg`) && formatSet.has(`png`)) {\n    throw new Error(`Cannot specify both JPG and PNG formats`)\n  }\n\n  return formatSet\n}\n\n/**\n * Generate correct width and height like sharp will do\n * @see https://sharp.pixelplumbing.com/api-resize#resize\n */\nexport function calculateImageDimensions(\n  originalDimensions: { width: number; height: number },\n  {\n    fit,\n    width: requestedWidth,\n    height: requestedHeight,\n    aspectRatio: requestedAspectRatio,\n  }: { fit: ImageFit; aspectRatio: number } & WidthOrHeight\n): { width: number; height: number; aspectRatio: number } {","sourceCodeStart":1,"sourceCodeEnd":34,"githubUrl":"https://github.com/gatsbyjs/gatsby/blob/8b06340921ffdf23125a365b9c9923690cb62ce6/packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/utils.ts#L1-L34","documentation":"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.","triggerScenarios":"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.","commonSituations":"A query requests formats: ['jpg', 'png'], or formats: ['auto', 'jpg', 'png'] where auto resolves to png making the set contain both.","solutions":["Request only one of 'jpg' or 'png', not both.","Use formats: ['auto', 'webp', 'avif'] (the default) to let the pipeline pick the best format per source.","If you need a raster format, choose 'jpg' for photos or 'png' for graphics with transparency."],"exampleFix":"// before\ngatsbyImageData(source, { formats: ['auto', 'jpg', 'png'] })\n// after\ngatsbyImageData(source, { formats: ['auto', 'webp', 'avif'] })","handlingStrategy":"validation","validationCode":"const formats = ['auto', 'webp', 'avif']\nconst formatSet = new Set(formats)\nif (formatSet.has('jpg') && formatSet.has('png')) {\n  throw new Error('Cannot request both jpg and png')\n}\n// use formatSet for image generation","typeGuard":"const hasNoJpgPngConflict = (formats: string[]): boolean =>\n  !(new Set(formats).has('jpg') && new Set(formats).has('png'))","tryCatchPattern":null,"preventionTips":["Never request both 'jpg' and 'png' in the same formats array.","Use the default formats ['auto', 'webp', 'avif'] unless you have a specific need.","Pick jpg for photos (smaller) or png for transparency, not both."],"tags":["gatsby","image","validation","format","configuration"],"backgroundTag":null,"analyzedSha":"8b06340921ffdf23125a365b9c9923690cb62ce6","analyzedAt":"2026-08-13T02:36:21.405Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}