37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import sharp from 'sharp'
|
|
import { createSignal } from 'solid-js'
|
|
import fs from 'fs'
|
|
|
|
interface Props {
|
|
src: string
|
|
size?: number
|
|
alt?: string
|
|
}
|
|
|
|
const convertImage = async (props: Props) => {
|
|
const webpOutputPath = `src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`
|
|
const avifOutputPath = `src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`
|
|
|
|
if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
|
|
const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
|
|
await sharp(webpBuffer).toFile(webpOutputPath)
|
|
|
|
const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
|
|
await sharp(avifBuffer).toFile(avifOutputPath)
|
|
}
|
|
}
|
|
|
|
export default (props: Props) => {
|
|
let [imageSrc] = createSignal(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`)
|
|
convertImage(props)
|
|
|
|
return (
|
|
<>
|
|
<picture>
|
|
<source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" />
|
|
<source srcset={imageSrc()} type="image/webp" />
|
|
<img src={imageSrc()} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
|
|
</picture>
|
|
</>
|
|
)
|
|
}
|