SEO Optimized image

Image commands

image:resize

• Resize image to multiple smaller sizes

image:generate-meta

• Generate image meta data
• meta data for each image are stored as a separate json file respectively

image:webp

• Generate webp image
• for google's image compression guideline

image:move

• Copy image to pre build
• some image (mainly image's original file) are not duplicated to the destination during amny process

image:all

• Automated command to run all steps accordingly
• step 1: image:move
• step 2: image:formating
• step 3: image:resize
• step 4: image:webp
• step 5: image:generate-meta

image:formating

• Automated command to run all steps accordingly
• to process svg images
• default image type for svg should be png

image:init

• Generate image compiler configuration json file

alt commands

alt:init

• Generate alt configuration json file

alt:test

• Test alt configuration
• any warning or error details will be printed in the file /seo-meta.log

Image generator Configs

• default file name: /seo-image-cfg/default.json
• env specific file name: /seo-image-cfg/<NODE_ENV>.json

{
  debug: false
  runtime: {
    gtmAttribute: ''(string)
  }
  urlBase: {
    default: '/images'(string)
    [s: string]: string
  }
  pathBase: {
    imgDir: '/assets/image'(string)
    cacheDir: '/.seo-image-cache'(string)
    destDir: '/dist'(string)
    destImageDir: '/dist/image'(string)
  }
  imageBuilder: {
    sizes: [
      { "imgWidth": 550, "screenWidth": 500 },
      { "imgWidth": 750, "screenWidth": 700 },
      { "imgWidth": 1200, "screenWidth": 1100 },
      { "imgWidth": 1700, "screenWidth": 1600 }
    ](Array<
      imgWidth: (number)
      screenWidth: (number)
    }>)
    webp: true(boolean)
    resize: true(boolean)
    populateSource: true(boolean)
    formating: true(boolean)
    svgToPngDefaultWidth: 1200(number)
  }
  targetSizes: Array<{
    filePattern: (string)
    sizes: (Array<{
      imgWidth: (number)
      screenWidth: (number)
    }>)
  }>
}

Appendix

• targetSizes.filePattern = regexp for the images that needs to apply the sizes (override sizes)

Alt Configs

• use alt:init to auto generate alt config file.
• file name: /seo-image-cfg/meta/alt.json

{
  [original_image_name : string]: alt_text
}

TODO

• duplicate gulp files to project root
• auto generate image generator config file