Все посты
Обновлено 9999+ 19 Знания

Как быстро сжать изображения на сайте

Зачем нужно оптимизировать картинки и как сделать это автоматически.

Текст от нашего партнера — OptiPic.

Ускорение сайта улучшает поведенческие факторы и поднимает конверсию. Для примера — график зависимости конверсии от времени загрузки, который основан на исследовании Walmart:

график ускорения сайта

На графике видно: чем больше времени загружается страница, тем меньше клиентов совершают целевые действия на сайте. Ускорение сайта позволит улучшить конверсию и за счет этого получить больше потенциальных клиентов и увеличить выручку.

Как оптимизация изображений ускоряет сайт

Страница сайта обычно состоит из:

  • HTML-кода: разметка, верстка, тексты;
  • JavaScript-скриптов с логикой, которая будет выполняться на стороне браузера;
  • CSS-файлов со стилями страницы;
  • видео;
  • изображений.

Если посмотреть в среднем картину в разрезе и сравнить объем в байтах всех этих типов ресурсов на странице, то можно увидеть, что изображения на страницах — это самая большая часть:

как ускорить сайт

Оптимизация изображений позволяет значительно ускорить загрузку сайта. Сжатие уменьшает объем изображений на 70-98% без визуальной потери качества:

как оптимизировать изображения для ускорения сайта

Что такое оптимизация изображения


Оптимизация изображений — это обработка файла с целью уменьшить его «вес», желательно без потери качества.

Для этого существует множество сложных алгоритмов. Суть их примерно одинакова — из файла удаляются все служебные данные, например, название программы, в котором сохранялся файл, а также специальным образом объединяются/сглаживаются похожие цвета. На выходе получается то же самое изображение, и невооруженным глазом даже не видно, что в нем что-то изменилось, но размер такого оптимизированного изображения будет в разы меньше оригинала.

При правильной обработке можно добиться уменьшения файла на 70-98% без видимой потери качества.

В результате оптимизации изображений вы получите

  • Ускорение загрузки страниц;
  • Увеличение конверсии;
  • Увеличение показателей Google Pagespeed Insights;
  • Снижение отказов, улучшение поведенческих факторов на сайте;
  • Улучшенное ранжирование сайта в поисковой выдаче;
  • Снижение нагрузки на хостинг/сервер;
  • Экономию места на диске.

Как оптимизировать изображения

Первый способ — вручную оптимизировать каждое изображение на сайте. Для этого можно использовать Photoshop или другой инструмент. Обычно при сохранении изображения в редакторе есть пункт «сохранить для web».

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

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

Дешевле и быстрее — автоматизировать процесс

Сервис OptiPic.io специально предназначен для решения этой проблемы.
Буквально за две минуты вы сможете подключить свой сайт к системе, которая просканирует весь сайт, найдет и оптимизирует все найденные изображения.

Оптимизация всех изображений на сайте проходит в на полном автопилоте в фоновом режиме. Сервис сам находит на сайте все изображения и оптимизирует их.

При добавлении новых картинок на сайт или изменении старых все они автоматом ставятся в очередь на оптимизацию. Система сама мониторит эти изменения и реагирует на них.

OptiPic легко подключается к любому сайту практически в 2 клика.
Поддерживаются все CMS и фреймворки, а также самописные сайты на PHP.

Преимущества OptiPic

  • Полная автоматизация.
    Оптимизируются не только уже существующие на сайте изображения, но и добавляемые в дальнейшем новые. Сервис работает сам по себе в фоновом режиме;
  • URL изображений не меняется. Сжатые изображения хранятся на вашем сайте;
  • Простая интеграция с любым сайтом на PHP - даже самописным;
  • Русская техподдержка;
  • Система не имеет каких-либо ограничений на объем или размер изображений;
  • Работает на обычных хостингах, не требуется vps или выделенного сервера;
  • Не требуются навыки системного администрирования и программирования для установки и использования;
  • Бесплатная помощь в подключении;
  • Без ежемесячных платежей.

Оценить эффективность оптимизации можно на сайте OptiPic.io. Это бесплатно и не требует регистрации.

Возьмите под контроль продвижение своего сайта
Исправьте ошибки, которые мешают сайту выйти в топ, и вы увидите рост трафика и дохода.
🔍 Подпишись на @prcynews в телеграм — оставайся в курсе последних SEO новостей и свежих материалов.

Теги поста или какие разделы почитать еще:

Комментарии (19)
garik1331   29.01.2018 18:31
Не читал все, однако спрошу ДАННАЯ ШТУКА ПЛАТНАЯ





Inna_S   30.01.2018 07:10
До 100 мб бесплатно, дальше за деньги в зависимости от объема изображений для обработки.
vituson   29.01.2018 18:31
Пара вопросов, несмотря на то, что пост проплачен.

1. Зачем пускать на свой сайт хозяйничать посторонний скрипт?
2. Кроме сжатых картинок на скорость загрузки и "конверсию" влияют тысячи параметров, все бы так и делали - оптимизировали картинки и лишь за счет этого становились бы богачами.

Не верю (С).
Cooljob   29.01.2018 19:45
согласен
Inna_S   30.01.2018 07:08
Здорово, что вы сами умеете решать проблемы со скоростью загрузки сайта. Сервис рассчитан на тех, кто не может автоматизировать процесс самостоятельно или не имеет на это времени.
И по второму пункту — мы все знаем, что факторов очень много, но здесь речь идет именно про изображения, будьте лояльнее :)
optipic   30.01.2018 12:35
Здравствуйте!

1. Тенденции web-индустрии уже много лет таковы, что все больше и больше скриптов, модулей и библиотек так или иначе являются "сторонними" для сайта. Их разработчики - отдельные программисты/компании. И несмотря на это они успешно используются на подавляющем большинстве сайтов. Наш скрипт не исключение. И это нормальная практика - всем хочется максимально простого решения задач.
Исходный код скрипта интеграции открыт. Вы можете проанализировать его. Если будут конструктивные предложения по улучшению - будем рады обсудить.
Скрипт защищен ключом. Не передав ключ скрипту, он ничего не будет делать.

2. Мы не говорим, что использование OptiPic - это абсолютная панацея к ускорению сайта и гарантия поднятия конверсии до небес :)
Мы говорим о том, что оптимизация изображения - это одна из важных составляющих ускорения. И с нами согласны лидеры web-индустрии (к примеру, Google). Дополнительно мы приводим исследования httparchive.org, которые показывают что действительно изображения занимают большую долю всех ресурсов на странице.
Наша задача - дать максимально простой инструмент для решения важной проблемы.
Berkuchio   29.01.2018 19:28
Ну а вообще есть смысл это делать. У меня страница грузится не быстро 4с. Я бы конечно хотел побыстрее.
optipic   30.01.2018 12:36
Здравствуйте!


Если у вас изображения на сайте еще не оптимизированы, то конечно имеет смысл их оптимизировать.
Проверить это очень просто - зайдите к нам на страничку и укажите ссылку на страницу вашего сайта
https://optipic.io/ru/pagespeed/
Проверка вам покажет - оптимизированы ли у вас изображения (и еще доп. рекомендации по ускорению).
Или воспользуйтесь тем же google pagespeed insights для аналогичной проверки.
Cooljob   29.01.2018 19:43
ща он ляжет под толпами юзверей не желающих вкл фотошоп)) .... купон на скидку ... я призадумался уже лезть туда или нет ... "письмо может попасть в папку спам ..." они даже волшебного кролика не подкупили
abuzz   30.01.2018 08:09
Может кто не знает - еще один бесплатный способ получения оптимизированных изображений - PageSpeed Insights от Гугл.
Вбиваете страницу и на выходе в самом низу появляется - Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы.
wap_masterok   30.01.2018 08:54
Ну он часто режет изображения или размывает. Так что не всегда можно его юзать
optipic   30.01.2018 12:37
Здравствуйте!
Это вариант, если вам надо оптимизировать изображения на 1 странице сайта. Но смысла от оптимизации только 1 страницы сайта достаточно мало. Если и заниматься этим, то надо сразу для всех страниц сайта оптимизировать изображения.
В итоге вам придется таким образом перелопатить все страницы вашего сайта - все их прогонять через Google PSI, скачивать архив, выдергивать оттуда картинки, их заливать обратно на сайт. И так по кругу.
Если на сайте появилась новая статья/новость/товар - придется повторять процедуру для каждой новой страницы.
В итоге быстрее и дешевле подключить автоматику, а свое время (или время наемного сотрудника) пустить на те задачи, которые автоматизации не поддаются.
ibred   07.02.2018 17:05
У Google есть бесплатный модуль PageSpeed для Ngnix\Apache, который оптимизирует десятки параметров, включая сжатие изображений. Модуль сделает всё сам, на полном автомате.
https://developers.google.com/speed/pagespeed/module/

Какие у Вас преимущества перед их разработкой?
imtii   30.01.2018 10:29
Ай... Лучше написать скрипт который сжимает изображения при загрузке как у DLE. А то не верю что с таким способом можно оптимизировать сайт с 120к постом.
optipic   30.01.2018 12:38
Здравствуйте!
Наша система легко справляется с большим объемом изображений (миллионы изображений на сайте).
Свой скрипт написать, конечно, можно.
Но для чего изобретать велосипед? :)
Обычно руководитель сайта нацелен на максимально эффективное решение задач. Критериями является минимальная стоимость внедрения и дальнейшего сопровождения. Плюс максимальный набор функций и гибкость при этом.
Мы работает без ежемесячных платежей, поддержка бесплатная. Система постоянно мониторит добавление новых изображений и сжимает их.
В итоге стоимость использования минимальная при максимальной гибкости.
Также у нас есть партнерская программа, по которой вы сможете получать 40% от продаж своим клиентам.
Будем рады видеть вас в числе партнеров :)
Saskozp   02.02.2018 08:59
Бесплатный FastStone Image Viewer делает буквально тоже самое, и абсолютно даром, только что проверил, размер один в один оптимизированной картинки )))
optipic   03.02.2018 07:54
Здравствуйте!

По всей видимости, вы не дочитали до блока "Дешевле и быстрее — автоматизировать процесс" :)

Для ручного сжатия инструментов достаточно много - это понятно.
Но вручную оптимизировать изображения в итоге выходит очень долго и дорого, если их более 10-20 штук на сайте.
В этом случае как раз понадобится OptiPic.
Он позволит вам разгрузить себя или наемного сотрудника.

К примеру, когда встает задача оптимизировать все изображения на сайте, которые накопились за несколько лет - тут ручные инструменты уже не подойдут.
Неразумно сидеть и оптимизировать вручную каждое изображение из сотен, тысяч или даже миллионов избражений, которые есть на сайте.

Другой пример - когда контент сайта постоянно обновляется.
Вы не сможете каждый раз сжимать вручную изображения при добавлении нового контента (интернет-магазины, доски объявлений, коллективные блоги, каталоги недвижимости и т.п.).

Использование OptiPic - это сэкономленное время, силы и деньги.
Saskozp   05.02.2018 06:34
ВFastStone Image Viewer я могу легко сделать конвертирование в пакетном режиме
optipic   05.02.2018 10:12
В любом случае это не полная автоматизация.

1. Вам придется все файлы сайта сначала закачивать к себе на компьютер, находить там все изображения и их оптимизировать. После этой процедуры вам нужно обратно скопировать оптимизированные изображения - со своего компьютера на сайт.

2. Надо постоянно мониторить добавление/изменение изображений на сайте и запускать оптимизацию новых/измененных изображений повторно.
Т.е. это еще более сложная процедура, чем случай №1. На всем сайте вам нужно будет найти только новые (и измененные) изображения. И только их оптимизировать. Т.к. повторная оптимизация может привести к значительной потери качества. И чем чаще будет повторяться эта процедура с уже оптимизированными картинками, тем сильнее ухудшается их качество.

В итоге получается экономия на спичках - полностью задачу вы с себя не снимаете, а лишь частично упрощаете. А скорее всего и совсем забудете о периодической дооптимизации новых изображений. В итоге задача останется не решена.
Проще подключить сайт к OptiPic и полностью решить задачу.
К данной записи нельзя добавлять комментарии, т.к. она очень старая.
🔥 Внутренняя оптимизация сайта — большой гайд по самостоятельной проверке
Core Web Vitals и новая метрика INP: ускорение сайта актуальными методами
🔥 Где брать картинки для сайта: много ссылок на нейросети и фотостоки