SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 🏗️ improve global responsive image defaults

Browse source
This commit is contained in:
Sebin Nyshkim 2025-07-17 21:43:52 +02:00
parent db32cb2ee1
commit f48dc3e7ee
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
7 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

14
eleventy.config.js
View file

@ -6,7 +6,19 @@ import htmlminifier from 'html-minifier-terser';
import markdownIt from 'markdown-it';
const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
const IMAGE_BASE_WIDTHS = [500, 750, 1000];
const IMAGE_COMPUTED_WIDTHS = new Set(IMAGE_BASE_WIDTHS.flatMap((w) => [w * 1, w * 2, w * 3]));
const IMAGE_ATTR_SIZES = [
{ minw: '120em', size: '1000px' },
{ minw: '64em', size: '750px' },
{ minw: '40em', size: '700px' },
{ minw: '35em', size: '500px' },
{ minw: null, size: 'calc(100vw - 3rem)' }
];
const IMAGE_TRANSFORM_OPTS = {
widths: [...IMAGE_COMPUTED_WIDTHS, 'auto'],
formats: ['avif', 'webp', 'auto'],
sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
sharpPngOptions: { compressionLevel: 9 },
@ -15,7 +27,7 @@ const IMAGE_TRANSFORM_OPTS = {
defaultAttributes: {
loading: 'lazy',
decoding: 'async',
sizes: '(min-width: 64em) 500px, (min-width: 50em) 420px, 375px'
sizes: IMAGE_ATTR_SIZES.map(({ minw, size }) => (minw ? `(min-width: ${minw}): ${size}` : size))
}
};