Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 1x 6x 2x 2x 1x 1x 3x 3x | export interface PjResponsiveImageSource {
type: "image/avif" | "image/webp";
srcset: string;
}
export interface PjResponsiveImageDelivery {
src: string;
sources: PjResponsiveImageSource[];
width?: number;
height?: number;
}
interface BundledCatalogImage {
width: number;
height: number;
widths: readonly number[];
}
const BUNDLED_CATALOG_IMAGES: Readonly<Record<string, BundledCatalogImage>> = {
"/images/catalog/canvas-commuter-tote.png": {
width: 1122,
height: 1402,
widths: [480, 800, 1122],
},
"/images/catalog/mist-blue-notebook.png": {
width: 1122,
height: 1402,
widths: [480, 800, 1122],
},
};
function replaceExtension(
source: string,
width: number,
extension: "avif" | "webp",
): string {
return source.replace(/\.png$/u, `-${width}.${extension}`);
}
export function resolveCatalogImageDelivery(
source: string,
): PjResponsiveImageDelivery {
const image = BUNDLED_CATALOG_IMAGES[source];
if (!image) {
return {
src: source,
sources: [],
};
}
return {
src: source,
width: image.width,
height: image.height,
sources: [
{
type: "image/avif",
srcset: image.widths
.map((width) => `${replaceExtension(source, width, "avif")} ${width}w`)
.join(", "),
},
{
type: "image/webp",
srcset: image.widths
.map((width) => `${replaceExtension(source, width, "webp")} ${width}w`)
.join(", "),
},
],
};
}
|