[{"_path":"/providers/imageengine","_draft":false,"_partial":false,"_empty":false,"title":"ImageEngine","description":"Nuxt Image has first class integration with ImageEngine","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"At a minimum, you must configure the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imageengine"}]},{"type":"text","value":" provider with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]},{"type":"text","value":" set to your ImageEngine Delivery Address:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    imageengine: {\n      baseURL: 'https://xxxxx.imgeng.in'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    imageengine: {\n      baseURL: 'https://xxxxx.imgeng.in'\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-fit-values"},"children":[{"type":"text","value":"ImageEngine "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" map onto "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/docs/directives","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine Directives"}]},{"type":"text","value":" as follows:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_cropbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_letterbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_stretch"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_box"}]},{"type":"text","value":", this is the default fit method for the ImageEngine provider."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":": This fit method is not supported and functions the same as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-modifiers"},"children":[{"type":"text","value":"ImageEngine modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also use all "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/docs/directives","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine Directives"}]},{"type":"text","value":" by adding them to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" property with the following attribute names:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"f"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"passThrough"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pass"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharpen"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"s"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"r"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screenPercent"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pc"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cr"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inline"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"in"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"meta"}]},{"type":"text","value":" directive"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note that the standard "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":" attribute is converted to the ImageEngine "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cmpr"}]},{"type":"text","value":" compression directive.  "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":" is the opposite of compression, so 80% quality equals 20% compression.  Since ImageEngine automatically adapts image quality the visitor's device, browser and network quality, it is recommended that you do not explicitly set the quality.  If you want to completely disable all optimizations to an image, you should use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":":modifiers=\"{ passThrough: 'true' }\""}]},{"type":"text","value":", which will serve the unaltered image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example 1: Cropping an image to a width and height of 100x80, starting 10 pixels from the top and 20 pixels from the left:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  provider=\"imageengine\"\n  src=\"/some-image.jpg\"\n  width=\"100\"\n  height=\"80\"\n  :modifiers=\"{ cr: '100,80,10,20' }\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img\n  provider=\"imageengine\"\n  src=\"/some-image.jpg\"\n  width=\"100\"\n  height=\"80\"\n  :modifiers=\"{ cr: '100,80,10,20' }\"\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example 2: Instruct ImageEngine to keep the image's EXIF metadata (which is normally removed to reduce the image byte size):"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  provider=\"imageengine\"\n  src=\"/some-image.jpg\"\n  width=\"100\"\n  height=\"80\"\n  :modifiers=\"{ meta: 'true' }\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img\n  provider=\"imageengine\"\n  src=\"/some-image.jpg\"\n  width=\"100\"\n  height=\"80\"\n  :modifiers=\"{ meta: 'true' }\"\n/>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-best-practices"},"children":[{"type":"text","value":"ImageEngine best practices"}]},{"type":"element","tag":"h3","props":{"id":"automatic-format-and-quality-detection"},"children":[{"type":"text","value":"Automatic format and quality detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageEngine automatically detects the best format and quality for your image based on the characteristics of the specific device that requested it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is very effective and it is not recommended that you disable it, but if you must, you can manually specify the format (ex: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format='webp'"}]},{"type":"text","value":") and quality ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality='80'"}]},{"type":"text","value":")."}]},{"type":"element","tag":"h3","props":{"id":"imageengine-settings"},"children":[{"type":"text","value":"ImageEngine settings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageEngine allows you to set all of the modifiers/directives in the ImageEngine control panel under advanced settings.  This is a good place to set default adjustments since you can modify them without having to make changes to your Nuxt codebase.  If a directive is set in both Nuxt and the ImageEngine User-Adjustable Settings, the value in Nuxt takes priority."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"At a minimum, you must configure the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imageengine"}]},{"type":"text","value":" provider with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]},{"type":"text","value":" set to your ImageEngine Delivery Address:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    imageengine: {\n      baseURL: 'https://xxxxx.imgeng.in'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e7221"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e7221"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"imageengine"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"'https://xxxxx.imgeng.in'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-fit-values"},"children":[{"type":"text","value":"ImageEngine "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" map onto "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/docs/directives","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine Directives"}]},{"type":"text","value":" as follows:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_cropbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_letterbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_stretch"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m_box"}]},{"type":"text","value":", this is the default fit method for the ImageEngine provider."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":": This fit method is not supported and functions the same as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-modifiers"},"children":[{"type":"text","value":"ImageEngine modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also use all "},{"type":"element","tag":"a","props":{"href":"https://imageengine.io/docs/directives","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageEngine Directives"}]},{"type":"text","value":" by adding them to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" property with the following attribute names:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"f"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"m"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"passThrough"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pass"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharpen"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"s"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"r"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screenPercent"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pc"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cr"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inline"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"in"}]},{"type":"text","value":" directive"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"text","value":": "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"meta"}]},{"type":"text","value":" directive"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note that the standard "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":" attribute is converted to the ImageEngine "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cmpr"}]},{"type":"text","value":" compression directive.  "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":" is the opposite of compression, so 80% quality equals 20% compression.  Since ImageEngine automatically adapts image quality the visitor's device, browser and network quality, it is recommended that you do not explicitly set the quality.  If you want to completely disable all optimizations to an image, you should use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":":modifiers=\"{ passThrough: 'true' }\""}]},{"type":"text","value":", which will serve the unaltered image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example 1: Cropping an image to a width and height of 100x80, starting 10 pixels from the top and 20 pixels from the left:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  provider=\"imageengine\"\n  src=\"/some-image.jpg\"\n  width=\"100\"\n  height=\"80\"\n  :modifiers=\"{ cr: '100,80,10,20' }\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"imageengine\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"/some-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"100\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"80\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"{ cr: '100,80,10,20' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example 2: Instruct ImageEngine to keep the image's EXIF metadata (which is normally removed to reduce the image byte size):"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  provider=\"imageengine\"\n  src=\"/some-image.jpg\"\n  width=\"100\"\n  height=\"80\"\n  :modifiers=\"{ meta: 'true' }\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9f6fdf"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"imageengine\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"/some-image.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"100\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"80\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03793d"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-672c6f"},"children":[{"type":"text","value":"\"{ meta: 'true' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3e64a6"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"imageengine-best-practices"},"children":[{"type":"text","value":"ImageEngine best practices"}]},{"type":"element","tag":"h3","props":{"id":"automatic-format-and-quality-detection"},"children":[{"type":"text","value":"Automatic format and quality detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageEngine automatically detects the best format and quality for your image based on the characteristics of the specific device that requested it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is very effective and it is not recommended that you disable it, but if you must, you can manually specify the format (ex: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format='webp'"}]},{"type":"text","value":") and quality ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality='80'"}]},{"type":"text","value":")."}]},{"type":"element","tag":"h3","props":{"id":"imageengine-settings"},"children":[{"type":"text","value":"ImageEngine settings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ImageEngine allows you to set all of the modifiers/directives in the ImageEngine control panel under advanced settings.  This is a good place to set default adjustments since you can modify them without having to make changes to your Nuxt codebase.  If a directive is set in both Nuxt and the ImageEngine User-Adjustable Settings, the value in Nuxt takes priority."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-03793d{color:#D19A66}.ct-672c6f{color:#98C379}.ct-9f6fdf{color:#E06C75}.ct-3e64a6{color:#ABB2BF}.ct-6e7221{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"imageengine-fit-values","depth":2,"text":"ImageEngine fit values"},{"id":"imageengine-modifiers","depth":2,"text":"ImageEngine modifiers"},{"id":"imageengine-best-practices","depth":2,"text":"ImageEngine best practices","children":[{"id":"automatic-format-and-quality-detection","depth":3,"text":"Automatic format and quality detection"},{"id":"imageengine-settings","depth":3,"text":"ImageEngine settings"}]}]}},"_type":"markdown","_id":"content:4.providers:imageengine.md","_source":"content","_file":"4.providers/imageengine.md","_extension":"md"},{"_path":"/providers/imgix","_draft":false,"_partial":false,"_empty":false,"title":"Imgix","description":"Nuxt Image has first class integration with Imgix","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Imgix"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Imgix."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    imgix: {\n      baseURL: 'https://assets.imgix.net'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    imgix: {\n      baseURL: 'https://assets.imgix.net'\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"imgix-fit-values"},"children":[{"type":"text","value":"imgix "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, imgix offers the following for extra resizing experience:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clamp"}]},{"type":"text","value":" - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, and the remaining space is filled with extended pixels from the edge of the image. The resulting image will match the constraining dimensions. The pixel extension is called an affine clamp, hence the value name, \"clamp\"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clip"}]},{"type":"text","value":" - The default fit setting for imgix images. Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"facearea"}]},{"type":"text","value":" - Finds the area containing all faces, or a specific face in an image, and scales it to specified width and height dimensions. Can be used in conjunction with "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering/face-detection/faceindex","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"faceindex"}]},{"type":"text","value":" to identify a specific face, as well as "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering/face-detection/facepad","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"facepad"}]},{"type":"text","value":" to include additional padded area around the face to zoom out from the immediate area around the faces."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fillMax"}]},{"type":"text","value":" - Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. If the requested width or height exceeds that of the original, the original image remains the same size. The excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions."}]}]},{"type":"element","tag":"h2","props":{"id":"imgix-modifiers"},"children":[{"type":"text","value":"imgix modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also pass all imgix-specific render API parameters to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a full list of these modifiers and their uses, check out "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"imgix's image Rendering API documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"imgix-best-practices"},"children":[{"type":"text","value":"imgix best practices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some common best practices when using imgix, would be to include our auto parameter, which will automatically apply the best format for an image and compress the image as well.  Combine this with some top of intelligent cropping and resizing and you will have a great image!"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  provider=\"imgix\"\n  src=\"/blog/woman-hat.jpg\"\n  width=\"300\"\n  height=\"500\"\n  fit=\"cover\"\n  :modifiers=\"{ auto: 'format,compress', crop: 'faces' }\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img\n  provider=\"imgix\"\n  src=\"/blog/woman-hat.jpg\"\n  width=\"300\"\n  height=\"500\"\n  fit=\"cover\"\n  :modifiers=\"{ auto: 'format,compress', crop: 'faces' }\"\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the "},{"type":"element","tag":"a","props":{"href":"https://assets.imgix.net/blog/woman-hat.jpg?w=300&h=500&fit=crop&crop=faces","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"woman in the hat"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-documentation"},"children":[{"type":"text","value":"Additional Documentation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can find additional documentation and a step-by-step tutorial in an imgix blog article titled "},{"type":"element","tag":"a","props":{"href":"https://blog.imgix.com/2021/09/14/nuxt-image-component","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Using the New Nuxt Component with imgix"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Imgix"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url of your service in Imgix."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    imgix: {\n      baseURL: 'https://assets.imgix.net'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2daae"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2daae"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d24328"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-d24328"},"children":[{"type":"text","value":"imgix"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-d24328"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"'https://assets.imgix.net'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"imgix-fit-values"},"children":[{"type":"text","value":"imgix "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, imgix offers the following for extra resizing experience:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clamp"}]},{"type":"text","value":" - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, and the remaining space is filled with extended pixels from the edge of the image. The resulting image will match the constraining dimensions. The pixel extension is called an affine clamp, hence the value name, \"clamp\"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clip"}]},{"type":"text","value":" - The default fit setting for imgix images. Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"facearea"}]},{"type":"text","value":" - Finds the area containing all faces, or a specific face in an image, and scales it to specified width and height dimensions. Can be used in conjunction with "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering/face-detection/faceindex","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"faceindex"}]},{"type":"text","value":" to identify a specific face, as well as "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering/face-detection/facepad","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"facepad"}]},{"type":"text","value":" to include additional padded area around the face to zoom out from the immediate area around the faces."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fillMax"}]},{"type":"text","value":" - Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. If the requested width or height exceeds that of the original, the original image remains the same size. The excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions."}]}]},{"type":"element","tag":"h2","props":{"id":"imgix-modifiers"},"children":[{"type":"text","value":"imgix modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", you can also pass all imgix-specific render API parameters to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a full list of these modifiers and their uses, check out "},{"type":"element","tag":"a","props":{"href":"https://docs.imgix.com/apis/rendering","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"imgix's image Rendering API documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"imgix-best-practices"},"children":[{"type":"text","value":"imgix best practices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some common best practices when using imgix, would be to include our auto parameter, which will automatically apply the best format for an image and compress the image as well.  Combine this with some top of intelligent cropping and resizing and you will have a great image!"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  provider=\"imgix\"\n  src=\"/blog/woman-hat.jpg\"\n  width=\"300\"\n  height=\"500\"\n  fit=\"cover\"\n  :modifiers=\"{ auto: 'format,compress', crop: 'faces' }\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-d24328"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"imgix\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"/blog/woman-hat.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"cover\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ed49eb"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ba1968"},"children":[{"type":"text","value":"\"{ auto: 'format,compress', crop: 'faces' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb589"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the "},{"type":"element","tag":"a","props":{"href":"https://assets.imgix.net/blog/woman-hat.jpg?w=300&h=500&fit=crop&crop=faces","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"woman in the hat"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-documentation"},"children":[{"type":"text","value":"Additional Documentation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can find additional documentation and a step-by-step tutorial in an imgix blog article titled "},{"type":"element","tag":"a","props":{"href":"https://blog.imgix.com/2021/09/14/nuxt-image-component","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Using the New Nuxt Component with imgix"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ed49eb{color:#D19A66}.ct-ba1968{color:#98C379}.ct-d24328{color:#E06C75}.ct-0eb589{color:#ABB2BF}.ct-b2daae{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"imgix-fit-values","depth":2,"text":"imgix fit values"},{"id":"imgix-modifiers","depth":2,"text":"imgix modifiers"},{"id":"imgix-best-practices","depth":2,"text":"imgix best practices"},{"id":"additional-documentation","depth":2,"text":"Additional Documentation"}]}},"_type":"markdown","_id":"content:4.providers:imgix.md","_source":"content","_file":"4.providers/imgix.md","_extension":"md"}]