npmpackage.info

Gathering detailed insights and metrics for @ivorgri/sveltekit-pluggable-static-adapter-webp-plugin

@ivorgri/sveltekit-pluggable-static-adapter-webp-plugin - 1.0.2 | npmpackage.info

@ivorgri/sveltekit-pluggable-static-adapter-webp-plugin

Plugin for generating Webp images from a static Sveltekit build. To be used with @ivorgri/sveltekit-pluggable-static-adapter

1.0.2

MIT

TypeScript

5.25 kB

Installations

npm install @ivorgri/sveltekit-pluggable-static-adapter-webp-plugin

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

17.3.0

NPM Version

8.3.0 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

TypeScript (100%)

Developer

ivorgri

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

7 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Feb 20, 2022

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.0.2

Package Id

@ivorgri/sveltekit-pluggable-static-adapter-webp-plugin@1.0.2

Unpacked Size

5.25 kB

Size

2.50 kB

File Count

NPM Version

8.3.0

Node Version

17.3.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

sharp tiny-glob

Dev Dependencies

@types/sharp @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier typescript

sveltekit-pluggable-static-adapter-webp-plugin

Plugin for generating Webp images from a static Sveltekit build. To be used with @ivorgri/sveltekit-pluggable-static-adapter. The function will take all the JPG/JPEG/PNG files it can find, and convert those to WEBP files. This option should be used in conjunction with a specific implementation for a component. It should convert the existing URL for an image to a WEBP variant. When running this in a development environment, without having access to the WEBP file, a condition is added which checks if a WEBP source set should be used. Make sure to change this when running the build, so the sourceset is added to the result.

How to call the function:

1// svelte.config.js
2
3// ...
4
5import convertAssetsToWebp from '@ivorgri/sveltekit-pluggable-static-adapter-webp-plugin';
6
7//...
8
9export default {
10	kit: {
11		adapter: adapter({
12            // ...
13            afterPrerenderCallback: async (builder, pages, assets) => {
14				await convertAssetsToWebp(builder,assets);
15			},
16		})
17	}
18};

Possible implementation of a <picture> tag:

1<script lang="ts">
2    export let imageSrc:string;
3    export let imageAlt:string;
4    
5    let useWebp = import.meta.env.VITE_USE_WEBP; // Or another environment variable that you would like to use
6
7    $: imageSrcWebp = imageSrc.replace(/jpg|jpeg|png/g,"webp");
8</script>
9
10<picture>
11    {#if useWebp}
12        <source srcset="{imageSrcWebp}" type="image/webp"> 
13    {/if}
14    <img src="{imageSrc}" alt="{imageAlt}">
15</picture>

No vulnerabilities found.

No security vulnerabilities found.