Image 🎨

Transform your images to modern formats during the build process.

Installation

import Image from '@belkins-group/image'

vite: {
  plugins: [
    Image({
      formats: ['avif', 'webp']

      breakpoints: {
        mobile: '1000px'
      },
    })
  ],
}

Usage

To convert image you need add data-weblands:image attribute to <img /> tag.

<img
  src="@/assets/img/pages/sdr-approach/alla-ivanova-mobile.png"
  alt="Alla Ivanova"
  width="49"
  height="48"
  data-weblands:image
/>

During build process <img /> tag will be transformed to <picture> with formats from plugin options.

<picture>
  <source srcset="/assets/alla-ivanova-mobile-4d297bba.avif" type="image/avif">
  <source srcset="/assets/alla-ivanova-mobile-19fe8f4c.webp" type="image/webp">
  <img
    src="/assets/alla-ivanova-mobile-17a8e23b.png"
    alt="Alla Ivanova"
    width="49"
    height="48"
    data-weblands:image
    data-weblabds:image-optimized
  />
</picture>

To prevent image loading on mobile you need to add data-weblands:image-mobile-hidden attribute to <img /> tag.

<img
  src="@/assets/img/pages/sdr-approach/welcome.png"
  alt="Alla Ivanova"
  width="400"
  height="600"
  data-weblands:image
  data-weblands:image-mobile-hidden
/>

During build process <img /> tag will be transformed to <picture> with formats and gif placeholder for mobile breakpoint from plugin options.

<picture>
  <source media="(max-width: 1000px)" srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  <source srcset="/assets/welcome-ef76c3d7.avif" type="image/avif">
  <source srcset="/assets/welcome-8999f706.webp" type="image/webp">
  <img
    src="/assets/welcome-84e1df50.png"
    alt="Alla Ivanova"
    width="400"
    height="600"
    data-weblands:image
    data-weblands:image-mobile-hidden
    data-weblabds:image-optimized
  />
</picture>