Качественная фотография на главную страницу сайта, но как уменьшить её вес?

Question

[Алексей Черемных]

Доброго дня!
Необходимо разместить на титульной странице сайта (лэйдинг с прокруткой) фотографию разрешения 1440 и более.
Единственное требование: малый размер файла с целью лёгкой загрузки страницы.
Пример применения "крупных картинок": www.templatemonster.com/ru/website-templates-type/...

Возможно ли фотографии большого разрешения сжимать до 300-400 кб? Способы?
Какой формат применить JPG или PNG или...?
Или в погоде за меньшим "весом" графики применять альтернативные графические способы, ухудшая качество? Какие и как?

Благодарю за помощь!

Answer 1

[automatik]

https://tinypng.com/

очень хороший сервис по сжатию jpg и png без потерь качества. Если самому не хочется возиться с ПО и настройками сжатия, то эта штука незаменима. Обычно мои картинки до 70-85% сжимает.

Comments

[Алексей Черемных]

Хмм...а если стоковая фотография весом 5-8 Мб....?)))

[automatik]

Алексей Черемных: до 5 мбайт они пишут, однако можно пересохранить с чуть меньшим размером и потом скорпить tinypng

Answer 2

[Марк Розенталь]

Выбирайте любые:

https://compressor.io/
www.jpegmini.com
resizeimage.net
https://tinypng.com/
www.optimizepng.com

www.jpegmini.com - самый ок. Израильский стартап с крутым алгоритмом сжатия без потерь.

Answer 3

[Алексей Черемных]

Товарищи, спасибо за оперативные ответы. Приму все советы и поэкспериментирую.
Но я пытался в своем вопросы раскрыть еще одну тему, не только сжатия фотографии....а графически её ухудшение для минимизации размера....но дело касается не разрешения или удаления метаданных,...а, например: добавить с определенным интервалом "пустые" (белые пиксели)....визуально ухудшиться качество, но и наверное при замене на "белый" - уменьшается и размер?

Answer 4

[Александр Черных]

у меня в линуксе есть imagemagic

Answer 5

[Дмитрий]

я делаю так:
1 делаю превьюшку меньшего разрешения и весом в 5-15 кб с таким же соотношением сторон
2 вставляю ее как инлайн картинку
3 к этой картинке применяю фильтр blur
4 вешаю скрипт, либо на document ready, либо сразу, либо при скролле, чтоб начинало грузить картинку в полном размере
5 после загрузки картинки меняю заинлайненный вариант на полный размер, и анимирую blur в 0
выходит примерно так
https://youtu.be/PhSVRzYsSFA
на medium примерно так же картинки грузили

подключаем CDN и выносим туда картинки
уменьшаем вес самих картинок, список утилит для оптимизации размера вам в других ответах написали
дополнительно, в шапке пихаем ссылку на большую картинку с rel="prefetch" или подобными.
включаем на хостинге кэширование, gzip
и прочее для улучшения скорости работы

из минусов - трафик так будет чуть больше