Hey, I am using strapi (https://strapi.io/) for a blog as a part of my site.

Strapi holds the ressources. On generating the static content my plan is to download the images.

Are there any ideas how to handle external ressources? Saving them manually does not sounds like fun :)

Thanks in advanced - Alex

Hey all -- I've got a growing list of plugin ideas but I'm a solo developer who is also the CEO of several bootstrapped startups so my resources are limited.

That said, I'd like to put out some of my plugin ideas for discussion along with allow users to add their own plugin ideas.

When you propose a plugin idea please provide a specification of what the problem is, what the plugin should do, complexities, and goals/non-goals.

This will help us pool our community's resources so that we can work on developing out these ideas together.

Please see the plugin discussions here: https://github.com/Elderjs/elderjs/discussions/categories/plugin-ideas

I imagine it in three differents way:

• converting svg to png/jpg, then use it as a png or jpg
• keep the svg but add the blur effect
• svg inline (for logo or tiny stuff, related to: #118)

Here is my config regarding plugin-seo-check:

    '@elderjs/plugin-seo-check': {
      display: process.NODE_ENV === 'production' ? ['errors', 'warnings'] : [], // disables reporting unless you in production building.
      preferences: {
        internalLinksLowerCase: true,
        internalLinksTrailingSlash: false
      },
      writeLocation: './report.json',
    },

But I still have warning Internal links should include a trailing slash, did I miss something ?

In my company, as I don't manage the content of the site, I don't need to be warn about most of the seo-check. It could be more handy to have a final report during build time. What I actually think of for my use case is to send a report to a slack channel at every build.

• seo-check is a bit verbose in dev mode, we should be able to disable it.
• in build mode, generate a full report and print a resume instead of printing it for each routes

Currently, markdown is compiled in init(), and it seems that a large markdown file can block the entire process when developing (npm run dev).

Will it be better if we move compilation into a data hook? And maybe move it to a subprocess? As I understood, data hook is only called when requested.

I think we can prepare slug and front matter in init() and move everything else to data hook.

I'm trying to use syntax highlighting by setting useSyntaxHighlighting in the plugin config.
When I build I get this stacktrace:

Error: `processSync` finished async. Use `process` instead
    at assertDone (.../node_modules/unified/index.js:469:11)
    at Function.processSync (.../node_modules/unified/index.js:401:5)
    at Object.init (.../node_modules/@elderjs/plugin-markdown/index.js:58:60)
    at new Elder (.../node_modules/@elderjs/elderjs/build/Elder.js:77:24)
    at Object.<anonymous> (.../src/server.js:10:15)

I think it's because the rehype-shiki plugin is asynchronous and unified will throw if there is an asynchronous plugin and you run it synchronously, which is what it's doing in the plugin init function.

Am I missing something?

Should email links be excluded from the trailing slash check?
'Internal links should include a trailing slash: [[email protected]](mailto:[email protected]) does not.'

Getting this kind of error messages:

Error: Hook: "processImages" threw an error: ENOENT: no such file or directory, copyfile 'D:/Projects/elderjs-images/images/image.jpg' -> 'D:\Projects\elderjs-images\public\images\D:\Projects\elderjs-imagesimage.jpg'

...

at async D:\Projects\elderjs-images\node_modules\@elderjs\elderjs\build\Elder.js:297:13 {
	errno: -4058,
	syscall: 'copyfile',
	code: 'ENOENT',
	path: 'D:/Projects/Kadastiku/web/elder/elderjs-images/images/image.jpg',
	dest: 'D:\\Projects\\elderjs-images\\public\\images\\D:\\Projects\\elderjs-imagesimage.jpg'
}

This result in its using the default config neglecting user config.

For example if i set additional fileTypes as empty string,

config: {
    fileTypes: [''], // file types in addition to jpeg/png
}

The plugin will still generate webp image ignoring the config.

I already fixed in my fork, but i'm not sure if it's a bug or intentional. I can make a PR for a quick fix.

I have the following widths configured:

widths: [1800, 1200, 900, 600, 350]

On an image with original width 1500 and using the following code for src: helpers.images.largest('/images/photo-2.jpg',{maxWidth:400}).relative

Expected:
return value of photo-2-ejs-350.jpg

Actual:
return value of photo-2-ejs-1200.jpg

I have deleted my manifest and regenerated to no avail.

I had some tags in my frontmatter like this:

---
draft: true
title: My Title
excerpt: My Excerpt
date: 2022-06-22
tags:
  - One
	- Two
---

Since my editor shows tabs as two spaces, I didn't notice that Two was tab-indented.

The way this presents when building will depend on your setup, but for me it was:

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'draft' of undefined
at /Users/mark/Sites/example/node_modules/@elderjs/plugin-markdown/index.js:131:32

But my custom slug formatter also uses frontmatter, so before I made the accessing of frontmatter there safe, it was erroring in there.

I think the markdown plugin should detect when frontmatter parsing has resulted in undefined, as otherwise spooky things are gonna happen downstream.

Deleting (or renaming) image files from source folder doesn't remove related generated images and entries from ejs-image-manifest.json. Is this intended behaviour?

Looking into npm, I find two plugins made by users:

• elderjs-plugin-wp
• elderjs-plugin-google-fonts

Is it possible to generate single sitemap.xml with just the page urls and not generate individual sitemap files?

Thank you!

Title. It'd be neat to support generating AVIF images.

Hi,

When using the images plugin together with the Markdown plugin, the inserted <div> containers for the images break out of the paragraphs and links from the Markdown.

The images plugin inserts something like this: <div class="ejs" style="padding-bottom: 45.73%;">....

But, paragraphs tags can't contain <div>

<span>tags worked great as a replacement.

Would it make sense to change that in the plugin?

Feature request: It'd be nice if the image plugin could try to catch file changes, maybe by tracking file metadata or hashes of the image

I've done this before with a couple one-off image processors using node's crypto library to stream the original image file and spit out a sha1 hash, but that was for an internal tool so no promises that it's the best solution for an open-source plugin!

Is there any reason sitemap plugin generates sitemap-[slug].xml files with empty urlset for excluded routes that will also be included in the main sitemap.xml? Not sure if it's valid or not but wouldn't it be cleaner to just not generate them?

This is the static site builder I have been waiting for! Truly static Svelte, selective hydration, and the hooks system are awesome.

The only problem is that the images plugin seems to take a lot longer to process than the Gatsby alternative.

I used the standard settings and folders:
'@elderjs/plugin-images': { folders: [ { src: '/images/*', // glob of where your original images are. Relative to rootDir/process.cwd() defined in your elder.config.js. Careful with **. output: '/images/', // where files should be put within the distDir defined in your elder.config.js. }, ], },

Even with 7 images, it takes 4 minutes to build on Netlify. Most of that is spent on processing the images:

The real site has several hundred images and is going to take forever to build.

Any idea what I am doing wrong or how it can be made faster?

Thanks!

I thought I might be able to write:

    '@elderjs/plugin-markdown': {
      routes: ['blog'],
      remarkPlugins: [
        [require("remark-shiki-twoslash"), { theme: "nord"}]
      ]
    },

But that crashes the template because it (very reasonably) assumes the availability of yml front-matter. Ideally I could do something like:

    '@elderjs/plugin-markdown': {
      routes: ['blog'],
      remarkPlugins: [
         ...require("@elderjs/plugin-markdown").plugins,
        [require("remark-shiki-twoslash"), { theme: "nord"}]
      ]
    },

The markdown plugin has a nice and simple way to configure how it deals with content, by just passing the name of the routes you want it to handle. However, this "magic" limits the devs on the way they organize the content inside their repository: they simply can't take their markdown files out of src/routes/[route]/ . This feels similar to Nextjs' routing system. It's not bad, but it has its limitations, and when for Nextjs it's justified by the fact that this is core to their build system, that they do a lot of optimizations on top of it, I think it's not justified for the markdown plugin.
I'd like to discuss the possibilities there are to change the config so that the plugin can handle markdown content anywhere inside the repository, and link it with a route.
Here is a proposal: the routes property can accept an array of objects of the following form:

const routes = [
  { content : [ "articles/travelling/*"], route: "travelling" }, // content is a list of globs
  { content : [ "articles/**/*.md", route: "allArticles"},
]

For backwards compatibility and ease of use, the current configuration can be kept as a shorthand for the following :

{ content: ["src/routes/travelling/*.md"], route: "travelling" }

Tell me what you think of this API, maybe improve it, and I can work on a PR

This element class attribute cannot be change with cssString option since it is hardcoded into the element itself in utils/imageStore.js. I'm not sure about the use cases here, but it break my styling by adding 29% padding bottom and other element down.

let pictureWithWrap = `<div class="ejs" style="padding-bottom: ${
    Math.round((file.height / file.width) * 10000) / 100
}%;">`;

My suggestion is to add a config option like ejsPaddingBottom: false and you can easily opt out from the paddingBottom

let pictureWithWrap = `<div class="ejs" 
    ${plugin.config.ejsPaddingBottom ? 
     'style="padding-bottom:' + Math.round((file.height / file.width) * 10000) / 100 + '%;' : ''}>`;

As the current state of the plugin, whenever we set addVanillaLazy: false no image will be shown in chrome as it will use the fallback img tag whereas the current output of plugin images still using the placeholder for the img tag with class lazy blur-up (which added at line 38 in utils/ImageStore.js as shown below. This is because by default browser thinks the base64 image is 10x4 pixel (which is the size the plugin resized it to). Not sure how the vanillaylazyload bypass this behavior, but without the script, it will show nothing.

<div class="md-img">
    <div class="ejs">
        <picture class="">
            <source type="image/webp" data-srcset="/images/my-image-ejs-1000.webp, /images/[email protected] 2x">
            <source type="image/png" data-srcset="/images/my-image-ejs-1000.png, /images/[email protected] 2x">
            <img src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGIE//EABQQAQAAAAAAAAAAAAAAAAAAABD/2gAIAQEAAQUCP//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Bf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABQQAQAAAAAAAAAAAAAAAAAAABD/2gAIAQEABj8CP//EABUQAQEAAAAAAAAAAAAAAAAAABAR/9oACAEBAAE/Iaf/2gAMAwEAAgADAAAAEAf/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oACAEDAQE/EH//xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oACAECAQE/EH//xAAWEAEBAQAAAAAAAAAAAAAAAAABEQD/2gAIAQEAAT8QUhY67//Z" alt="my-image" class="lazy blur-up">
        </picture>
    </div>
</div>

With the addVanillaLazy: false, the img tag should contain the original image or optimized version of the original image instead of the blurred placeholder as below:

<picture>
  <source type="image/webp" data-srcset="/images/my-image-ejs-1000.webp, /images/[email protected] 2x">
     <source type="image/png" data-srcset="/images/my-image-ejs-1000.png, /images/[email protected] 2x">
  <img src="my-image.png" alt="my image">
</picture>

Additional info
elderjs version: 1.4.13
plugin version: 1.0.0
Browser: Chrome version 90
OS: MacOS Mojave

References:

• https://stackoverflow.com/questions/39236087/html5-picture-element-does-not-seem-to-be-supported-by-chrome-52-srcset-not-wor
• https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Shiki is out of date, and doesn't support many grammars that are now available in recent versions of the plugin.

In particular, I have code blocks that use nginx and apache formatting, which trigger:

Error: No language registration for nginx

Error: No language registration for apache

If you look at the images plugin fetched via npm, it's missing files in the build/workers directory.

❯ ls @elderjs/plugin-images/build
index.js  index.mjs

But if you look at the markdown plugin, its utils directory is there.

❯ ls @elderjs/plugin-markdown/build
index.cjs  index.d.ts index.js   utils

Of note: the images plugin is not "type": "module". If you convert it to that, you'll have to fix the use of __dirname to use ESM-friendly stuff. Not sure if just doing that is enough to fix the build issue, or if something else is going on.

The latest possible version that can be installed is 3.5.0 because of the following conflicting dependency:

@elderjs/[email protected] requires engine.io@~3.5.0 via [email protected]

The earliest fixed version is 4.1.2.

Hey, I know that the esbuild run option isn't out of beta, but I wanted to let you know that for some reason, the image plugin currently gets the reload-on-file-change stuck somewhere. I'm not quite sure where it's breaking, so I'll do some more exploration.

Thanks for the great tool :).

As of it current state, it will generate lazyload js to every html file in public directory whether it have images generated by the plugin or not, my proposal based on what i've been experimented that work, we can check if it contain part of the shortcodes for example data.html.includes('{{picture') in the elderPluginImagesManagevanillaLazy hook.

the second one is to disable placeholder completely for user that doesn't want to use javascript at all on the pages (if it is not needed), for this i propose that we add disablePlaceholder: false by default and we check the config before injecting the placeholder code. However we can also add an option for user to add their own jsString and check if addVanillaLazy: false and jsString is undefined or empty, we can disable the placeholder as well in the imageStore.

I can work on the PR if needed.

Default config array props

widths: [1280, 992, 768, 576, 400, 350, 200], 
scales: [1, 2],

are not replaced with custom values from elder.config.js

widths: [1000, 750, 500], 
scales: [1],

but updated resulting config values like this

widths: [1000, 750, 500, 576, 400, 350, 200], 
scales: [1, 2],

https://github.com/woltapp/blurhash

TL;DR: Images are encoded into base 83 strings that are then sent with the HTML (probably as an attribute on the image). The client takes the string and decodes it into a beautiful canvas that acts as a placeholder until the real image is downloaded. Not sure how hard/complicated it would be to add support for this to the image plugin?

I've added the plugin configuration like below, everything else in elder.config.js is unchanged from demo project.

'@elderjs/plugin-images': {
      debug: true, // help with debugging
      s3: {
        USE_S3_HOSTING: false, // images will be hosted on s3 instead of inserting relative url.
      },
  
      folders: [
        {
          src: '/images/', // where your original images are. Relative to rootDir/process.cwd() defined in your elder.config.js.
          output: '/images/', // where files should be put within the distDir defined in your elder.config.js.
        },
      ],
      widths: [1280, 992, 768, 576, 400, 350, 200], // Sizes the images will be resized to.
      fileTypes: ['webp'], // file types in addition to jpeg/png.
      imageManifest: '/images/ejs-image-manifest.json', // relative to root dir or an async function
      cacheFolder: '/images/sizes/', // relative to root dir
      scales: [1, 2], // 1x, 2x sizes
      svg: false, // experimental... you can play with it.
      quality: 70, // quality to save the resized images in.
      cssString: ``, // if you want to overwrite the default css added
      addVanillaLazy: true, // if you want to disable the lazyload plugin and add your own.
      vanillaLazyLocation: '/static/vanillaLazy.min.js', // vanillaLazy's location relative to the root of the site. The plugin will move it to your public folder for you.
    }

But when I run yarn start, I get

> Elder.js running on http://localhost:3000
elderjs-plugin-images: no manifest found at /Users/path/to/project/elderjs-app/images/ejs-image-manifest.json
elderjs-plugin-images: Done.

There is no manifest generated anywhere – what am I doing wrong?
The documentation says the default file structure is

root (which is /Users/path/to/project/elderjs-app/, right?)
| -- images
| -- | -- image files
| -- | -- ejs-image-manifest.json
| -- | -- sizes
| -- | -- | -- (resized images)

Thank you for any pointers!

Hey,

I insstalled the plugin via npm and added the full configuration to elder.config.js.

I am trying to place the picture directly into my svelte-Route-File:

{@html helpers.picture("images/ecommerce.jpg", {maxWidth: 200, class:'', alt: ''})}

Roll up prompts the following error:
TypeError: helpers.picture is not a function at /home/alex/Docker/Projekte/netadvising_new/___ELDER___/compiled/routes/Homepage.js:33:140 at Object.each (/home/alex/Docker/Projekte/netadvising_new/___ELDER___/compiled/index-20d95f96.js:1323:16) at /home/alex/Docker/Projekte/netadvising_new/___ELDER___/compiled/routes/Homepage.js:33:13 at $$render (/home/alex/Docker/Projekte/netadvising_new/___ELDER___/compiled/index-20d95f96.js:1357:22) at render (/home/alex/Docker/Projekte/netadvising_new/___ELDER___/compiled/index-20d95f96.js:1365:26) at Object.templateComponent (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/elderjs/build/utils/svelteComponent.js:41:44) at buildPage (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/elderjs/build/utils/Page.js:43:40) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Object.run (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/elderjs/build/hooks/index.js:81:34) at async /home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/elderjs/build/utils/prepareRunHook.js:45:44, Error: Hook: "elderProcessShortcodes" threw an error: Cannot find source image with /images/ecommerce.jpg at Object.picture (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/plugin-images/utils/imageStore.js:57:17) at Object.run (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/plugin-images/index.js:171:34) at Object.<anonymous> (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/elderjs/build/utils/prepareShortcodeParser.js:18:55) at ShortcodeParser.parsers.process (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/shortcodes/lib/parser.js:276:59) at Tokenizer.tokenize (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/shortcodes/lib/tokenizer.js:251:31) at ShortcodeParser.parse (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/shortcodes/lib/parser.js:45:19) at Object.run (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/elderjs/build/hooks/index.js:115:48) at /home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/elderjs/build/utils/prepareRunHook.js:45:55 at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Page.processHook [as runHook] (/home/alex/Docker/Projekte/netadvising_new/node_modules/@elderjs/elderjs/build/utils/prepareRunHook.js:40:13)

I did a console output on the helpers opject and it shows me the following:

{
  permalinks: {
    blog: [Function (anonymous)],
    cms: [Function (anonymous)],
    homepage: [Function (anonymous)]
  },
  inlineSvelteComponent: [Function: inlineSvelteComponent],
  shortcode: [Function (anonymous)],
  images: {
    src: [Function: src],
    largest: [Function: largest],
    picture: [Function: picture]
  }
}

According to the documentation, the helper should be be heaving a picture-function:

{@html helpers.picture("images/ecommerce.jpg", {maxWidth: 200, class:'', alt: ''})}

Is the documentation outdated or am I missing something?

edit:
When changing the folder to /images/* (star is missing in part of the documentation) I am able to render the pictures with

{@html helpers.shortcode({name: 'picture',  props: { src: "/images/ecommerce.jpg", maxWidth: 200, class:'', alt: '' }})}

Should this also work?:

{@html helpers.picture("images/ecommerce.jpg", {maxWidth: 200, class:'', alt: ''})}

Thanks in advanced,

Alex

Hello, after installing the plugin, I'm trying to use an image with {{picture src="/img/Myimage.jpg" /}}.

I'm getting an unexpected token error for src. Is the shortcode only to be used in a markdown file? Or can we use it in svelte files as well?

I noticed on Windows the plugin breaks on copying the images from /images to /public/images.
The fix is trivial: use plugin.crossPlatformRoot instead of plugin.settings.rootDir (because it has windows backslash instead of forward slash)

The initial error looks like:
elderjs-plugin-images: Processing 1 local source images.
Error: ENOENT: no such file or directory, copyfile 'C:/Users/user/src/elderjs-app/images/test.jpg' -> 'C:\Users\user\src\elderjs-app\public\images\images\test.jpg'
at Object.copyFileSync (fs.js:1907:3)
at processImages (C:\Users\user\src\elderjs-app\src\plugins\plugin-images\index.js:69:14)
at Object.run (C:\Users\user\src\elderjs-app\src\plugins\plugin-images\index.js:363:35)
at Object.run (C:\Users\user\src\elderjs-app\node_modules@elderjs\elderjs\build\plugins\index.js:112:55)
at C:\Users\user\src\elderjs-app\node_modules@elderjs\elderjs\build\utils\prepareRunHook.js:46:55
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Elder.processHook [as runHook] (C:\Users\user\src\elderjs-app\node_modules@elderjs\elderjs\build\utils\prepareRunHook.js:41:13)
at async C:\Users\user\src\elderjs-app\node_modules@elderjs\elderjs\build\Elder.js:169:17 {
errno: -4058,
syscall: 'copyfile',
code: 'ENOENT',
path: 'C:/Users/user/src/elderjs-app/images/test.jpg',
dest: 'C:\Users\user\src\elderjs-app\public\images\images\test.jpg'
}

The current limit is 120 characters, and if I want to please seo-check I stay under it – but that then often results in complaints from ahref, which recommends 110-160 characters.

I'd love to be able to both please seo-check and Ahrefs.

Wondering if this just logs to the console or could be used to output to a csv file.

Not sure if this is the correct place, feel free to move and/or remove it.

Yesterday I had to do some work on optimizing fonts for Svelte Summit and realized this is one of those places where an automatic tool is probably very nice to have in order to speed up initial setup of a project.

Most often I use Google Fonts and sometimes they are HUGE, payload wise. It would be cool to have a plugin that takes an array of fonts (or all fonts in some folder like the image plugin) fetches the correct subset and uses that instead of the font file containing all glyphs.

I'm imagining something like this config:

'@elderjs/plugin-fonts': {
        folders: [
            {
                src: '/fonts/*'
            },
        ],
        options: {
            subset: 'latin',
        }
    }

or in the case of font names:

'@elderjs/plugin-fonts': {
        fonts: [
            ['Roboto', 'latin'],
            ['Overpass', 'latin'],
        ]
    }

I'll take a look at the image plugin and see if I can get this set up some how.

One major limitation of this is that it might be limited to just Google Fonts. Not sure how this could be solved for local fonts. The fonts in the folder

Shouldn't this and the other reference to localhost be what is set as origin from the main elder config?

Elder.js' Markdown plugin wraps any shortcode placed on its own line in <p></p>, including any Svelte component called via {{svelteComponent name='...' /}}. This creates invalid HTML if any non-inline tags are wrapped into <p>. Elder.js' Markdown parser should remove these

tags from the resulting HTML.

My folders option for the image plugin looks like this

folders: [
        {
          src: '/assets/img/**/*',
          output: '/img',
        },
      ],

my folder structure in the assets directory looks like this

assets/img/blog/{blog-title}/{image-name}.png

right now using this config I'm getting an error that the destination path doesn't exist because it is looking for a path like this

/path-to-the-project/public/img/assets/img/blog/{blog-title}/{image-name}.png

I would like the generated path to be like this

/path-to-the-project/public/img/blog/{blog-title}/{image-name}.png

and if the directories are not there then it should create the directories, manually creating directories for the public folder wouldn't make much sense

Is there a fix for this?

During the build, I'm having these error that I didn't have in the previous version of seo-check. I don't have time to investigate today so I post it here and I will dig more in the next days.

Full log taht appears several times in a row:

Error: Starting a new rule when there are errors that haven't been added to results. Did you run 'finishRule'?
    at startRule (/home/equinox/Programming/opo/website/node_modules/@nickreese/seo-lint/build/Tester.js:114:19)
    at test (/home/equinox/Programming/opo/website/node_modules/@nickreese/seo-lint/build/Tester.js:171:17)
    at Object.folder (/home/equinox/Programming/opo/website/node_modules/@nickreese/seo-lint/build/Tester.js:219:23)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.run (/home/equinox/Programming/opo/website/node_modules/@elderjs/plugin-seo-check/index.js:72:40)
    at async Object.run (/home/equinox/Programming/opo/website/node_modules/@elderjs/elderjs/build/plugins/index.js:111:44)
    at async /home/equinox/Programming/opo/website/node_modules/@elderjs/elderjs/build/utils/prepareRunHook.js:46:44
    at async Elder.processHook [as runHook] (/home/equinox/Programming/opo/website/node_modules/@elderjs/elderjs/build/utils/prepareRunHook.js:41:13)
    at async build (/home/equinox/Programming/opo/website/node_modules/@elderjs/elderjs/build/build/build.js:207:13)
    ```

The sources inside a element rendered after a {{picture}} shortcode have a min-width equal to the width of the image inside their srcset.For the following widths setting : [1000, 500, 300] if the width of the element is 950px, the original image used will be 500px wide, and we will be losing quality.So I think you want to offset the min-width setting to be the next lowest width, to turn this:

<picture>
  <source srcset="cat-1000.jpg" media="(min-width: 1000px)">
  <source srcset="cat-500.jpg" media="(min-width: 500px)">
  <source srcset="cat-300.jpg" >
</picture>

into this:

<picture>
  <source srcset="cat-1000.jpg" media="(min-width: 500px)">
  <source srcset="cat-500.jpg" media="(min-width: 300px)">
  <source srcset="cat-300.jpg" >
</picture>

This will mean that the image loaded is the smallest possible, without being smaller than the rendered element.

I noticed that if you turn off JS for a page containing images using the image plugin it won't work:

(From https://nicholasreese.com/that uses elderjs image plugin)

But if we do the same with a site that uses gatsby image plugin it works:

(From https://gatsby-image-v2.surge.sh/ that uses gatsby image plugin)

I don't really know how we could achieve the same as gatsby but at least it seems possible.