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>