Перерыл кучу статей, везде написано используйте srcset для разных устройств это хорошо и тп. Только так и не понял как мы указываем разные картинки для разных устройств при помощи media ? это на сервере должны быть три разных картинки разного размера? или разного разрешения? а какого разрешения допустим экран/планшет/ноутбук или я вообще не понял как оно работает?
Если есть возможность, то храним разные версии файлов, браузер сам выбирает. Эту статью читали? https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Да, читал, разобрался про разные изображения да, но не могу понять до конца, какое качество изображения делать от исходного для того же смартфона? ведь в названии файла pic-320w.webp - 320 это лишь название, фактический его размер остается 480 но с меньшим качеством, ведь в верстке блок под эту картинку 480х480 ? или нет? есть какие то рекомендации по оптимальному качеству? например jpg исходный 600х600 100%, для экрана я его конвертирую 260х260 100% (такой размер на сайте), кладу в папку img/fullsize для планшета конвертация аналогичная 260х260 но допустим, качество 80% ? img/mediumsize для смартфона 260х260 75% ? img/lowsize не понимаю как объяснить чего я не понимаю )))
Телефоны бывают и с 4k, по этому сначала нужно поставить задачу, где должно работать, и уже будет понятно какие размеры использовать.
по ТЗ - потенциальный клиент сегмент средний+ / премиум так что да, работать должно на apple, sams X, топах. Но при этом не тормозить и нравиться гуглю )))