PatAlcala9/fwt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New builtin-component for images

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-08-26 15:10:47 +08:00
parent 3cc94b18a6
commit 8e0469a194
1 changed files with 29 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/builtin-components/Image/Image.tsx Normal file
View file

@ -0,0 +1,29 @@
import sharp from 'sharp'
interface Props {
src: string
size?: number
alt?: string
}
const convertImage = async (props: Props) => {
const webp = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
await sharp(webp).toFile(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`)
const avif = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
await sharp(avif).toFile(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`)
}
export default (props: Props) => {
convertImage(props)
return (
<>
<picture class="fullscreen">
<source srcset={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`} type="image/avif" />
<source srcset={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`} type="image/webp" />
<img src={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
</picture>
</>
)
}