По большому счёту особого смысла сильно оптимизировать картинку нет. Они просто должны быть разумного разрешения и размера.
Но если очень хочется, то посмотрите какие разрешения выбирают различные библиотеки вроде бутстрапа и других.
По моему опыту, могу сказать что оптимальнее всего для критичных (крупных, наполненных деталями итд) картинок лучше всего делать три размера - для самых маленьких экранов (для мобильных, с размером viewport до 600 включительно), для средних экранов (с размерами до 1920 включительно) и для крупных. И, соответственно делаете картинки нужного размера, ориентируясь на каждый из размеров экрана.
Для некритичных - заниматься смысла нет, много не выйграете. Но если у вас само пережимается под нужные размеры, можете и их пережимать по тем же правилась.
Да, еще для оптимизации - используйте ленивую загрузку картинок (загрузка при прокрутке). Заглушки для картинок (чтобы контент не прыгал пока картинки нет) можно делать с помощью генерируемого svg нужного размера, такая картинка будет весить около 500 байт. Например, по адресу
site.ru/svg?x=826&y=800 возвращать svg указанного размера.
Далее, чтобы загружать картинки не по мере прокручивания, а сразу после того как загрузилась вся страница, можно использовать link rel="prefetch". Тогда вся страница загрузится разу, а "ленивые" картинки загрузятся после и положатся в кеш. И пока человек будет крутить, загружаться они будут уже из кеша а не по сети.