Skip to content

Instantly share code, notes, and snippets.

View FlxSaenger's full-sized avatar

Felix Sänger FlxSaenger

View GitHub Profile
@FlxSaenger
FlxSaenger / picture.tsx
Created September 21, 2023 12:57
qwik-image webp fallback component
import { component$, useComputed$, useContext } from '@builder.io/qwik';
import { type ImageProps, getSizes, getSrcSet, ImageContext } from 'qwik-image';
import { webpImageTransformer$ } from '~/routes/layout';
/**
* Custom image component that extends qwik-image in two ways:
*
* - Provides images both in webp and regular (fallback) format
* - Wraps <img> and <source> in <picture>
*