[PRO-74] image optimization option

[alvarosabu]

This PR implements an optimizeImages option for the rich text resolver based on Storyblok Image Service and the current DX present on https://github.com/storyblok/storyblok-js-client

const options: SbRichtextOptions<string> = {
  resolvers: {
    /* [MarkTypes.LINK]: (node: Node<string>) => {
      return `<button href="${node.attrs?.href}" target="${node.attrs?.target}">${node.children}</button>`
    }, */
  },
  optimizeImages: {
    class: 'w-full my-8 border-b border-black',
    width: 640, // image width
    height: 360, // image height
    loading: 'lazy', // 'lazy' | 'eager'
    filters: {
      blur: 0, // 0 to 100
      brightness: 0, // -100 to 100
      fill: 'transparent', // Or any hexadecimal value like FFCC99
      format: 'webp', // 'webp' | 'jpeg' | 'png'
      grayscale: false,
      quality: 95, // 0 to 100
      rotate: 0, // 0 | 90 | 180 | 270
    },
    // srcset accepts an array with image widths.
    // Example: [720, 1024, 1533]
    // will render srcset="//../m/720x0 720w", "//../m/1024x0 1024w", "//../m/1533x0 1280w"
    // Also accept an array to pass width and height.
    // Example: [[720,500], 1024, [1500, 1000]]
    // will render srcset="//../m/720x500 720w", "//../m/1024x0 1024w", "//../m/1500x1000 1280w"
    srcset: [720, 1024, 1533],
    sizes: ['(max-width: 767px) 100vw', '(max-width: 1024px) 768px', '1500px'],
  },
}

const html = RichTextResolver(options).render(doc)

• [x] Added optimizeImages option: boolean or object
• [x] Attributes
• [x] Filters
• [x] srcset
• [x] sizes
• [x] test-coverage > 80%
• [x] filter conditions (ex blur >= 0 && blur <= 100)