//- content raster image
mixin img({ src, w, h, alt, isLazy = true, className, isVersion = true })
  - const sParams = isVersion ? `?v=${searchId}` : ""
  - const url = src ? `${baseUrl}${src}${sParams}` : undefined
  img(
    class=className
    src=url
    width=w
    height=h
    loading=isLazy && "lazy"
    alt=(alt || "")
  )

//- simple raster image
mixin picture({ src, w, h, alt, isLazy = true, className, isVersion = true })
  - const path = src.split(".")[0]
  - const sParams = isVersion ? `?v=${searchId}` : ""
  picture
    source(type="image/avif" srcset=`${baseUrl}${path}.avif${sParams}`)
    source(type="image/webp" srcset=`${baseUrl}${path}.webp${sParams}`)
    img(
      class=className
      src=`${baseUrl}${src}?v=${sParams}`
      width=w
      height=h
      loading=isLazy && "lazy"
      alt=(alt || "")
    )

//- retina raster image
mixin picture2x({ src, w, h, alt, isLazy = true, className, isVersion = true })
  - const path = src.split("@")[0]
  - const format = src.split(".")[1]
  - const sParams = isVersion ? `?v=${searchId}` : ""
  picture
    source(type=getMime("avif") srcset=getSrcset(path, "avif", sParams))
    source(type=getMime("webp") srcset=getSrcset(path, "webp", sParams))
    img(
      class=className
      src=`${baseUrl}${src}${sParams}`
      srcset=`${baseUrl}${path}@2x.${format}${sParams} 2x`
      width=w
      height=h
      loading=isLazy && "lazy"
      alt=(alt || "")
    )

//- simple vector image
mixin svg({ name, w, h, className })
  if name.includes('/img')
    img(class=className || null src=`${baseUrl}${name}?v=${searchId}` width=w height=h alt="")
  else
    svg(class=className || null width=w height=h)
      use(xlink:href=`#${name}`)
