SEO Optimized image

commands

• max flexibility

| command | description | | --- | --- | | generate:image-vue | make a copy of SeoImage to your repository |

| command | description | | --- | --- | | image:all | automated command to run all steps accordingly | | image:generate | - generate webp image | | image:move | copy image to serve directory | | image:resize | resize image to multiple smaller sizes | | image:webp | generate webp image |

Max flexibility

• to allow fully tweaking on the nuxt component yarn seo-generate generate:image-vue
• this command will generate a few files
  • components/optimize/image.vue
  • nuxt-seo-image/
• find all // custom -> remove it and remove the line below them

Configs

file name: seo-img.config.json | seo-img.config.<NODE_ENV>.json

• useNuxtDefault?: boolean
• imageBase?: string
• gtmAttribute?: string
• sizes?: Array<{     imgWidth: number     screenWidth: number }>
• imgDir?: string
• imgDest?: string
• cacheDir?: string
• webp?: boolean
• resize?: boolean
• readFromSource?: boolean
• populateSource?: boolean

Vue Tag

OptimizeImage(
  :allowCrossorigin='true'
  :alt='alt text'
  :async='true'
  :fit='true'
  :[gtmAttribute]='gtm value'
  :imgStyle='{}'
  :loadMethod='true'
  :src='osrc.png'
)

DEfault nuxtf setup

{ 
  "gtmAttribute": "gtm-label",
  "imgDir": "assets/images",
  "imgDest": "images",
  "cacheDir": ".cache",
  "imageBase": "images",
  "sizes": [
    { "imgWidth": 380, "screenWidth": 460 },
    { "imgWidth": 720, "screenWidth": 700 },
    { "imgWidth": 1000, "screenWidth": 950 }
  ],
  "webp": false,
  "resize": false,
  "populateSource": false,
  "readFromSource": true,
  "useNuxtDefault": true
}