Precache images for offline PWA - best practice?

[LarsEjaas]

I have made my page at https://larsejaas.com work offline, but I am struggling to find a better way to precache images.

Right now I have told my serviceworker to precache all webP images at first visit, and that obviously is not feasible in the long run (some of the large images come in up to 6 different sizes - dooh!).

My solution right now is using gatsby-plugin-offline with these settings:

resolve: "gatsby-plugin-offline",
      options: {
        precachePages: [
          `/index.html`,
          `/en/artikler/*`,
          `/en/artikler/*/*`,
          `/en/`,
          `/artikler/*`,
          `/artikler/*/*`,
          `/webudvikling/*`,
          `/en/webudvikling/*`,
          `/grafik/*`,
          `/en/grafik/*`,
          `/kompetencer/*`,
          `/en/kompetencer/*`,
        ],
        workboxConfig: {
          globPatterns: [
            "**/*{.html,.webp,.webmanifest,.woff2,.css,.svg,.mp3,icons/icon*,.ico}",
          ],
        },
      },

Anyone found a good solution for this? Is there a way to get gatsby image to add some sort of size-prefix or similar so I could just precache a "medium" size for all images in png as an offline fallback or am I missing something obvious here???