Кстати я вспомнил про Service Worker https://developer.mozilla.org/ru/docs/Web/API/Service_Work... можно закэшировать, но мне так и не удалось закэшировать на localhost.

Кэшировать надо со стороны сервера делать, а браузер и так кэширует, если не отключить в настройках. Популярные CMS уже имеют встроенные средства кэширования, как и полноценные пхп фреймворки(symfony, laravel, yii и др), так что нужно лишь включить кэширование.

Ну в принципе можно, я смотрел видеоурок, там учили делать лейаут в фотошопе

Прототип, можно делать в чём угодно, я просто привёл фотошоп как пример, всё зависит от предпочтений. В общем, какой прогой лучше владеем, в той и делаем прототип, так как большого смысла нет в изучении отдельных прог, если можно тоже самое сделать и в "фотошопе".

Кстати ещё 2 вопроса:

1. clip-path пока ещё экспериментальная фича, и поддерживается боле менее в полной мере только лисой. Использовать её для готовых проектов, это 100% будет конфликт с заказчиком, в стиле - "Почему на другом браузере картинка не в виде сердечка...".

2. WebP не является стандартом, и до сих пор поддерживается не всеми браузерами, а значить придётся использовать тег picture с подключением через sourse WebP изображений. По сути это пока двойная работа, придётся делать не только 2 и больше изображений(с учётом поддержки огрызочной ретины ещё больше), но и изображения выводить в стиле:

<picture>
    <source srcset=”img/WebPImage.webp” type=”image/webp”>
    <img src=”img/OldJPEG.jpg”>
</picture>

Для постоянных изображений, это конечно можно один раз прописать и всё, но для динамически добавляемого контента, придётся писать скрипт, который будет делать обёртку вокруг

<img src=”img/OldJPEG.jpg”>

добавляя недостающее...
В общем, это пока не столь необходимо, можно как и раньше использовать джипег картинки и не парится. Вот когда старые браузеры уйдут в прошлое у большинства, тогда можно будет и на WebP переключиться.