(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[16724],{67216:(e,a,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/en-US/apis/rendering/automatic",function(){return i(28727)}])},28727:(e,a,i)=>{"use strict";i.r(a),i.d(a,{default:()=>g,useTOC:()=>m});var s=i(52676),t=i(96933),r=i(78033),n=i(30805),o=i(87359),l=i(75047),d=i(74574),c=i(58369),h=i.n(c),p=i(20866);function m(e){let a={code:"code",...(0,n.a)()};return[{value:(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.code,{children:"auto=compress"})}),id:"compress",depth:2},{value:(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.code,{children:"auto=enhance"})}),id:"enhance",depth:2},{value:(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.code,{children:"auto=true"})}),id:"true",depth:2},{value:(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.code,{children:"auto=format"})}),id:"format",depth:2},{value:(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.code,{children:"auto=redeye"})}),id:"redeye",depth:2}]}function u(e,a){throw Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}let g=(0,t.c)(function(e){let{toc:a=m(e)}=e,i={a:"a",code:"code",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,n.a)(),...e.components};return p.m||u("Tabs",!1),p.m.Tab||u("Tabs.Tab",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.Z,{title:"Automatic",param:"auto"}),"\n",(0,s.jsxs)(d.g,{columns:2,children:[(0,s.jsx)(d.U,{url:"https://assets.imgix.net/unsplash/bridge.jpg?w=600&q=100",caption:"Original : 185kB",maxWidth:"300px"}),(0,s.jsx)(d.U,{url:"https://assets.imgix.net/unsplash/bridge.jpg?w=600&auto=compress",caption:"<code>auto=compress</code> : 35kB",maxWidth:"300px"})]}),"\n",(0,s.jsxs)(i.p,{children:["The ",(0,s.jsx)(i.code,{children:"auto"})," parameter helps you automate a baseline level of optimization across your entire image catalog. Currently, it has four different methods:"]}),"\n",(0,s.jsxs)(i.ul,{children:["\n",(0,s.jsx)(i.li,{children:"Compression"}),"\n",(0,s.jsx)(i.li,{children:"Visual enhancement"}),"\n",(0,s.jsx)(i.li,{children:"File format conversion"}),"\n",(0,s.jsx)(i.li,{children:"Redeye removal"}),"\n"]}),"\n",(0,s.jsxs)(i.p,{children:["If necessary for your image needs, you can override the settings that ",(0,s.jsx)(i.code,{children:"auto"})," represents, either on a per-image basis or in your code. For example, ",(0,s.jsx)(i.code,{children:"auto=compress"})," removes color profile metadata, but if it’s necessary for your site, you can append a different value for ",(0,s.jsx)(i.a,{href:"/apis/rendering/format/color-space",children:(0,s.jsx)(i.code,{children:"cs"})})," in your image URL such as ",(0,s.jsx)(i.code,{children:"cs=origin"})," or ",(0,s.jsx)(i.code,{children:"cs=srgb"}),"."]}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.strong,{children:"Note:"})," ",(0,s.jsx)(i.code,{children:"auto=format"})," is available as a ",(0,s.jsx)(i.a,{href:"/getting-started/setup/creating-sources/advanced-settings#default-parameters",children:"Default Parameter"})," for paying customers. Customers on our Free plans will be prompted to upgrade their account when attempting to add ",(0,s.jsx)(i.code,{children:"auto=format"})," as a Default parameter."]}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.code,{children:"auto"})," values can be combined with comma separation, e.g. ",(0,s.jsx)(i.code,{children:"auto=compress,enhance"}),". Additionally, it is the only parameter that can be combined by reiteration, e.g. ",(0,s.jsx)(i.code,{children:"auto=compress&auto=enhance&auto=format"}),"."]}),"\n",(0,s.jsx)(i.h2,{id:a[0].id,children:a[0].value}),"\n",(0,s.jsxs)(i.p,{children:["When ",(0,s.jsx)(i.code,{children:"auto=compress"})," is set, imgix will apply best-effort techniques to reduce the size of the image. This includes altering our normal processing algorithm to apply more aggressive image compression."]}),"\n",(0,s.jsxs)(i.p,{children:["If ",(0,s.jsx)(i.code,{children:"auto=format"})," is included in the query, it will be respected. In this case, images will be served in AVIF format whenever possible while still applying compression. When AVIF is not supported, the image will be served as a WebP. If the WebP format is not supported, images that contain transparency will be served in a PNG8 format (if supported) and all others will be served as JPEG. The quality standard (",(0,s.jsx)(i.a,{href:"/apis/rendering/format/output-quality",children:(0,s.jsx)(i.code,{children:"q"})}),") is set to 45."]}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.strong,{children:"Note:"})," We strive to reduce file size while maintaining as much visual information as possible, so the operations applied are subject to change. This becomes visible on images using a high gamut range as seen in the below examples. Adding ",(0,s.jsx)(i.a,{href:"/apis/rendering/format/color-space",children:(0,s.jsx)(i.code,{children:"cs=origin"})})," will resolve color issues by adding the original color space back. Additionally, the default quality standard can be overridden by using the ",(0,s.jsx)(i.a,{href:"/apis/rendering/format/output-quality",children:(0,s.jsx)(i.code,{children:"q"})})," parameter."]}),"\n",(0,s.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6 mb-2 mt-8",children:[(0,s.jsx)("div",{className:"md:col-span-1",children:(0,s.jsx)(h(),{leftImage:"https://assets.imgix.net/unsplash/wide_gamut_colors.jpeg?w=600&q=100",rightImage:"https://assets.imgix.net/unsplash/wide_gamut_colors.jpeg?w=600&auto=compress",sliderLineWidth:2,sliderPositionPercentage:.5,sliderSize:40,leftImageLabel:"Original",rightImageLabel:"auto=compress"})}),(0,s.jsx)("div",{className:"md:col-span-1",children:(0,s.jsx)(h(),{leftImage:"https://assets.imgix.net/unsplash/wide_gamut_colors.jpeg?w=600&q=100",rightImage:"https://assets.imgix.net/unsplash/wide_gamut_colors.jpeg?w=600&auto=compress&cs=origin",sliderLineWidth:2,sliderPositionPercentage:.5,sliderSize:40,leftImageLabel:"Original",rightImageLabel:"auto=compress&cs=origin"})})]}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.strong,{children:"Note:"}),"\nWhen used in conjunction with ",(0,s.jsx)(i.code,{children:"fm"})," for non-animated assets, ",(0,s.jsx)(i.code,{children:"auto=compress"})," will override the ",(0,s.jsx)(i.code,{children:"fm"})," parameter and will use a JPEG or PNG file depending on if an alpha channel is present"]}),"\n",(0,s.jsxs)(d.g,{columns:2,children:[(0,s.jsx)(d.U,{url:"https://assets.imgix.net/unsplash/bridge.jpg?w=600&q=100",caption:"Original : 185kB",maxWidth:"300px"}),(0,s.jsx)(d.U,{url:"https://assets.imgix.net/unsplash/bridge.jpg?w=600&auto=compress",caption:"<code>auto=compress</code> : 35kB",maxWidth:"300px"})]}),"\n",(0,s.jsx)(i.h2,{id:a[1].id,children:a[1].value}),"\n",(0,s.jsxs)(i.p,{children:["When ",(0,s.jsx)(i.code,{children:"auto=enhance"})," is set, the image is adjusted using the distribution of highlights, midtones, and shadows across all three channels—red, green, and blue (RGB). Overall, the enhancement gives images a more vibrant appearance."]}),"\n",(0,s.jsx)(i.p,{children:"The adjustment affects individual images differently, and works best with editorial photography, stock photography, and user-generated content for social media applications."}),"\n",(0,s.jsxs)(p.m,{items:["Side by side","Comparison slider"],children:[(0,s.jsx)(p.m.Tab,{children:(0,s.jsxs)(d.g,{columns:2,children:[(0,s.jsx)(d.U,{url:"https://assets.imgix.net/enhance-examples/example-13.jpeg?w=700&h=640&fit=crop&auto=false",caption:"Original",maxWidth:"350px"}),(0,s.jsx)(d.U,{url:"https://assets.imgix.net/enhance-examples/example-13.jpeg?w=700&h=640&fit=crop&auto=enhance",onlyParamsInCaption:["auto"],maxWidth:"350px"}),(0,s.jsx)(d.U,{url:"https://assets.imgix.net/enhance-examples/example-12.jpeg?w=700&h=420&fit=crop&auto=false",caption:"Original",maxWidth:"350px"}),(0,s.jsx)(d.U,{url:"https://assets.imgix.net/enhance-examples/example-12.jpeg?w=700&h=420&fit=crop&auto=enhance",onlyParamsInCaption:["auto"],maxWidth:"350px"})]})}),(0,s.jsx)(p.m.Tab,{children:(0,s.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2 mt-12",children:[(0,s.jsx)("div",{className:"md:col-span-1",children:(0,s.jsx)(h(),{leftImage:"https://assets.imgix.net/enhance-examples/example-13.jpeg?w=700&h=640&fit=crop&auto=false",rightImage:"https://assets.imgix.net/enhance-examples/example-13.jpeg?w=700&h=640&fit=crop&auto=enhance",sliderLineWidth:2,sliderPositionPercentage:.5,sliderSize:40,leftImageLabel:"Original",rightImageLabel:"auto=enhance"})}),(0,s.jsx)("div",{className:"md:col-span-1",children:(0,s.jsx)(h(),{leftImage:"https://assets.imgix.net/enhance-examples/example-12.jpeg?w=700&h=420&fit=crop&auto=false",rightImage:"https://assets.imgix.net/enhance-examples/example-12.jpeg?w=700&h=420&fit=crop&auto=enhance",sliderLineWidth:2,sliderPositionPercentage:.5,sliderSize:40,leftImageLabel:"Original",rightImageLabel:"auto=enhance"})})]})})]}),"\n",(0,s.jsx)(i.h2,{id:a[2].id,children:a[2].value}),"\n",(0,s.jsxs)(i.p,{children:["When ",(0,s.jsx)(i.code,{children:"auto=true"})," is set, imgix wil automatically adjust your asset by applying additional parameters. To start imgix will apply ",(0,s.jsx)(i.code,{children:"auto=enhance"}),"to your asset."]}),"\n",(0,s.jsxs)(i.p,{children:["Additionally, if you have ",(0,s.jsx)(i.code,{children:"crop=faces"})," set and apply ",(0,s.jsx)(i.code,{children:"auto=true"})," imgix will automatically apply ",(0,s.jsx)(i.code,{children:"auto=redeye"}),"."]}),"\n",(0,s.jsx)(i.h2,{id:a[3].id,children:a[3].value}),"\n",(0,s.jsxs)(i.p,{children:["When ",(0,s.jsx)(i.code,{children:"auto=format"})," is set, imgix determines whether the image can be served in a better format by a process called automatic content negotiation. It compiles the various signals available to us—including headers, user agents, and image analytics—to select the optimal image format for your user. This format is served back and the image is correctly cached."]}),"\n",(0,s.jsxs)(i.p,{children:["The ",(0,s.jsx)(i.code,{children:"auto=format"})," logic will attempt to serve images in AVIF when supported. When AVIF is not supported, the image will be served as WebP. If the WebP format is not supported, it will serve the file as JPG or PNG."]}),"\n",(0,s.jsxs)(i.p,{children:["The fallback logic can be modified by adding ",(0,s.jsx)(i.a,{href:"/apis/rendering/automatic#compress",children:(0,s.jsx)(i.code,{children:"auto=compress"})})," and/or specifying a fallback format with ",(0,s.jsx)(i.a,{href:"/apis/rendering/format/output-format",children:(0,s.jsx)(i.code,{children:"fm"})}),". When used in conjunction with each other, ",(0,s.jsx)(i.a,{href:"/apis/rendering/format/output-format",children:(0,s.jsx)(i.code,{children:"fm"})})," takes priority over ",(0,s.jsx)(i.a,{href:"/apis/rendering/automatic#compress",children:(0,s.jsx)(i.code,{children:"auto=compress"})}),". For example, specifying ",(0,s.jsx)(i.code,{children:"auto=format&fm=jpg"})," works only as a fallback parameter while ",(0,s.jsx)(i.code,{children:"auto=compress&fm=jpg"})," functions as an override for the file type set by ",(0,s.jsx)(i.code,{children:"auto=format"}),".\nTo learn more about ",(0,s.jsx)(i.code,{children:"auto=format"})," and auto content negotiation, ",(0,s.jsx)(i.a,{href:"/getting-started/tutorials/performance-and-metadata/improved-compression-with-automatic-content-negotiation",children:"read our tutorial"}),"."]}),"\n",(0,s.jsx)(l.Z,{type:"info",title:"Format Precedence Update",children:(0,s.jsxs)(i.p,{children:["Note: ",(0,s.jsx)(i.code,{children:"fm=mp4"})," now takes precedence over ",(0,s.jsx)(i.code,{children:"auto=format"})," when both are specified. This ensures that videos are delivered in MP4 format."]})}),"\n",(0,s.jsx)(l.Z,{type:"error",title:"Firefor 66+ warning",children:(0,s.jsx)(i.p,{children:"Starting with Firefox version 66, auto content negotation will only occur when\nan image is being rendered on a webpage. It will not occur when opening a\nsingle image in the browser."})}),"\n",(0,s.jsx)(l.Z,{type:"error",title:"Safari WebP Rendering Warning",children:(0,s.jsxs)(i.p,{children:["A small percentage of WebP images will not render correctly in IOS 14 & Safari >= 14 due to a ",(0,s.jsx)(i.a,{href:"https://bugs.webkit.org/show_bug.cgi?id=219977",children:"systems frameworks issue"})," under WebKit .\nBecause of this, ",(0,s.jsx)(i.a,{href:"/apis/rendering/automatic#format",children:(0,s.jsx)(i.code,{children:"auto=format"})})," will return either a JPEG or a PNG in affected Safari versions."]})}),"\n",(0,s.jsx)(l.Z,{type:"info",title:"Safari >=16.4 AVIF Support",children:(0,s.jsxs)(i.p,{children:["Prior to September 2024, imgix served WebP images to Safari browsers when ",(0,s.jsx)(i.code,{children:"auto=format"})," was applied, due to stability concerns. As of September 2024, imgix now serves AVIF images to Safari browsers on version 16.4 or later when ",(0,s.jsx)(i.code,{children:"auto=format"})," is used."]})}),"\n",(0,s.jsx)(i.h2,{id:a[4].id,children:a[4].value}),"\n",(0,s.jsxs)(i.p,{children:["When ",(0,s.jsx)(i.code,{children:"auto=redeye"})," is set, red-eye removal is applied to any detected faces."]}),"\n",(0,s.jsxs)(d.g,{columns:2,children:[(0,s.jsx)(d.U,{url:"https://assets.imgix.net/enhance-examples/example-007.png?fit=crop&crop=faces&rect=640,167,454,617&h=640&w=640",caption:"Original",maxWidth:"320px"}),(0,s.jsx)(d.U,{url:"https://assets.imgix.net/enhance-examples/example-007.png?fit=crop&auto=redeye&crop=faces&rect=640,167,454,617&h=640&w=640",onlyParamsInCaption:["auto"],maxWidth:"320px"})]}),"\n",(0,s.jsx)(l.Z,{type:"error",title:"No Base64 Variant",icon:!1,children:(0,s.jsx)(i.p,{children:"This parameter does not accept base64-encoded values. All values must be\nprovided as standard UTF8, url-encoded strings."})})]})},"/en-US/apis/rendering/automatic",{filePath:"pages/en-US/apis/rendering/automatic.mdx",timestamp:172930614e4,pageMap:r.v,frontMatter:{title:"Automatic",param:"auto",description:"Applies automatic enhancements to images."},title:"Automatic"},"undefined"==typeof RemoteContent?m:RemoteContent.useTOC)},75047:(e,a,i)=>{"use strict";i.d(a,{Z:()=>r});var s=i(52676),t=i(4825);let r=function(e){let{title:a,type:i,children:r,icon:n=!1}=e;return(0,s.jsxs)(t.U,{type:i,...n?{}:{emoji:""},children:[a&&(0,s.jsx)("p",{className:"text-xl font-bold mt-1",children:a}),(0,s.jsx)("div",{className:"mt-3",children:r})]})}},87359:(e,a,i)=>{"use strict";i.d(a,{Z:()=>t});var s=i(52676);i(75271);let t=function(e){let{title:a,param:i}=e;return(0,s.jsxs)("div",{className:"flex flex-wrap items-baseline mt-2",children:[(0,s.jsx)("h1",{className:"flex-shrink min-w-0 text-4xl font-bold tracking-[-.015em] leading-[54px] text-[#16232d] dark:text-[#F1F5F9]",children:a}),i&&(0,s.jsx)("h2",{className:"flex-shrink-0 text-4xl text-imgix-orange font-code pl-4 ml-4 border-l-2 border-gray-300 dark:border-gray-700",children:i})]})}}},e=>{var a=a=>e(e.s=a);e.O(0,[96933,30620,78033,74574,92888,49774,40179],()=>a(67216)),_N_E=e.O()}]);