А сколько они должны занимать?

30-100кб

При чём тут, кстати, CORS?

crossorigin="anonymous" - Это не помогло

Accept-Ranges: bytes
Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Length,Content-Range

Заголовки у картинок такие

Я это читал, там рассказано почему так происходит, но не рассказано как пофиксить

Там написано, что в реальности столько места оно не занимает

А можешь конкретную строчку кинуть

The details of this padding vary from browser to browser, but for Google Chrome, this means that the minimum size that any single cached opaque response contributes to the overall storage usage is approximately 7 megabytes. You should keep this in mind when determining how many opaque responses you want to cache, since you could easily exceeded storage quota limitations much sooner than you'd otherwise expect based on the actual size of the opaque resources.

Тут разве не указано то, что реально по 7мб занимается и то что нужно следить за количеством кэшируемых данных?

Тут написано, что кэш думает, что каждый элемент занимает по 7 мб

Ну и квота в итоге исчерпается

Мне вообще непонятно, зачем кэшировать картинки программно

Их сервис воркер кэширует

Сам по себе без вызова cache.put?

Не знаю как он внутри устроен

Но руками я ничего не пишу, только указываю какие запросы кэшировать а какие нет

По логике вещей браузер радостно кэширует картинки самостоятельно

какие нужны настройки чтобы убрать эти ошибки ? https://i.imgur.com/ODKYKeK.png