[{"_path":"/getting-started/static","_draft":false,"_partial":false,"_empty":false,"title":"Static Images","description":"Optimizing images for static websites.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are building a static site Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. (This only works with server-side rendered pages. If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssr: false"}]},{"type":"text","value":", won't work)"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are using another provider, you can opt-in to this generate behaviour for a particular image by setting "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider=\"static\""}]},{"type":"text","value":" directly. (See "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"text","value":"component documentation"}]},{"type":"text","value":" for more information.)"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are building a static site Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. (This only works with server-side rendered pages. If you use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssr: false"}]},{"type":"text","value":", won't work)"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are using another provider, you can opt-in to this generate behaviour for a particular image by setting "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider=\"static\""}]},{"type":"text","value":" directly. (See "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img"},"children":[{"type":"text","value":"component documentation"}]},{"type":"text","value":" for more information.)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:1.getting-started:3.static.md","_source":"content","_file":"1.getting-started/3.static.md","_extension":"md"},{"_path":"/components/nuxt-picture","_draft":false,"_partial":false,"_empty":false,"title":"<nuxt-picture>","description":"Discover how to use and configure the nuxt-picture component.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" is a drop-in replacement for the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<picture>"}]},{"type":"text","value":" tag."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" is almost identical to "},{"type":"element","tag":"a","props":{"href":"nuxt-img"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]}]},{"type":"text","value":"\nbut also allows serving modern formats like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":" when possible."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more about the "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<picture>"}]},{"type":"text","value":" tag on MDN"}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See props supported by "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#props"},"children":[{"type":"text","value":"nuxt-img"}]}]}]},{"type":"element","tag":"h3","props":{"id":"legacyformat"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"legacyFormat"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Format used for fallback. Default is conditional:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If original format supports transparency ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":"), "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":" is used for fallback"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Otherwise "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":" is used for fallback"}]}]},{"type":"element","tag":"h3","props":{"id":"imgattrs"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imgAttrs"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Allows you to set additional HTML-attributes on the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":" element."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-picture\n  src=\"/nuxt-icon.png\"\n  :imgAttrs=\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-picture\n  src=\"/nuxt-icon.png\"\n  :imgAttrs=\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\"\n/>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" is a drop-in replacement for the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<picture>"}]},{"type":"text","value":" tag."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" is almost identical to "},{"type":"element","tag":"a","props":{"href":"nuxt-img"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]}]},{"type":"text","value":"\nbut also allows serving modern formats like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":" when possible."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn more about the "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<picture>"}]},{"type":"text","value":" tag on MDN"}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See props supported by "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#props"},"children":[{"type":"text","value":"nuxt-img"}]}]}]},{"type":"element","tag":"h3","props":{"id":"legacyformat"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"legacyFormat"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Format used for fallback. Default is conditional:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If original format supports transparency ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":"), "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":" is used for fallback"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Otherwise "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":" is used for fallback"}]}]},{"type":"element","tag":"h3","props":{"id":"imgattrs"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imgAttrs"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Allows you to set additional HTML-attributes on the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":" element."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-picture\n  src=\"/nuxt-icon.png\"\n  :imgAttrs=\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\"\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-373c4d"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ef15f5"},"children":[{"type":"text","value":"nuxt-picture"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-016dbb"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-320411"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-016dbb"},"children":[{"type":"text","value":":imgAttrs"}]},{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-320411"},"children":[{"type":"text","value":"\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-373c4d"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-320411{color:#98C379}.ct-016dbb{color:#D19A66}.ct-ef15f5{color:#E06C75}.ct-373c4d{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"props","depth":2,"text":"Props","children":[{"id":"legacyformat","depth":3,"text":"legacyFormat"},{"id":"imgattrs","depth":3,"text":"imgAttrs"}]}]}},"_type":"markdown","_id":"content:2.components:2.nuxt-picture.md","_source":"content","_file":"2.components/2.nuxt-picture.md","_extension":"md"}]