Если загружать на сайт неоптимизированные картинки, большие и не сжатые — это приводит к увеличению веса всей страницы сайта, медленной загрузке и увеличению отказов. Плюс гугл и яндекс ругаются на такие страницы и используют это как негативный фактор. Старайтесь не выходить за размер 200Кб без лишней на то надобности.
Допустим мы сняли на айфон фотографию, перекинули её как файл на компьютер, она имеет формат HEIC размеры размер 3024*4032 px и размер 1,9Мб.
Не многие сайты и браузеры даже смогут её открыть. Допустим мы её сконвертировали в PNG и нанесли текст (она стала весить 12Мб:
Это очень много!
Я рекомендую вначале уменьшить размер картинки до того размера, в котором она будет на сайте, например наша картинка была 3024*4032 px, нам такая большая на экране монитора не нужна, сожмём её допустим до 800px по ширине, отрежем лишнее по высоте и получим размер 800*622 px (я делал это в фигме, но подойдёт и фотошоп и любой другой редактор):
Получился файл размером 956Кб и формат всё тот же PNG:
Применяем сервисы сжатия картинок.
to.imagestool.com
https://to.imagestool.com/ru/jpeg-to-webp
Этот сервис умеет работать с пакетом фотографий и поддерживает все популярные форматы:
Выставляем качество и размеры:
Получаем сжатие 978Кб в 29Кб:
Ползунком качества управляйте чтобы на фото не появились артефакты, вот как они выглядят если выставить качество например на 10% (видите вокруг текста):
converttool.org
Другой сервис, он хуже потому что не умеет сразу сжимать размеры:
https://converttool.org/ru/ (поддерживает разные форматы и настройку качества)
Вбиваете в поиск из какого в какой формат хотите сжать картинку:
Двигая качество можно уменьшать размер картинки, но проверяйте чтобы не было артефактов:
Посмотрите фотка была 11,89Мб а после конвертации стала 348Кб!
Это мы её ещё по размеру не уменьшали!
Я рекомендую вначале уменьшить размер картинки до того размера, в котором она будет на сайте, например наша картинка была 3024*4032 px, нам такая большая на экране монитора не нужна, сожмём её допустим до 800px по ширине, отрежем лишнее по высоте и получим размер 800*622 px (я делал это в фигме, но подойдёт и фотошоп и любой другой редактор):
Получился файл размером 956Кб и формат всё тот же PNG:
Загоняем в конвертер, выставляем качество 10% и получаем файл весом 45Кб:
Вот как он выглядит:
Вокруг текста видим артефакты, да и деревья на горизонте смазанные, нам такое качество не подходит. Снова загружаем исходную фотографию в конвертер и повышаем качество до 50%
Теперь фотография весит уже 93Кб и нет практически артефактов:
Точных настроек я вам не скажу, они всегда зависят от исходника. Чем больше вы выставите качество тем тяжелее станет фотография.
