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

Улучшаем конверсию и поведенческие факторы на сайте за 2 минуты.

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


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

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


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

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

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

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

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


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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

Комментарии (20)
  29.01.2018 18:31
Не читал все, однако спрошу ДАННАЯ ШТУКА ПЛАТНАЯ
  30.01.2018 07:10
До 100 мб бесплатно, дальше за деньги в зависимости от объема изображений для обработки.
  29.01.2018 18:31
Пара вопросов, несмотря на то, что пост проплачен. 1. Зачем пускать на свой сайт хозяйничать посторонний скрипт? 2. Кроме сжатых картинок на скорость загрузки и "конверсию" влияют тысячи параметров, все бы так и делали - оптимизировали картинки и лишь за счет этого становились бы богачами. Не верю (С).
  29.01.2018 19:45
согласен
  30.01.2018 07:08
Здорово, что вы сами умеете решать проблемы со скоростью загрузки сайта. Сервис рассчитан на тех, кто не может автоматизировать процесс самостоятельно или не имеет на это времени. И по второму пункту — мы все знаем, что факторов очень много, но здесь речь идет именно про изображения, будьте лояльнее :)
  30.01.2018 12:35
Здравствуйте! 1. Тенденции web-индустрии уже много лет таковы, что все больше и больше скриптов, модулей и библиотек так или иначе являются "сторонними" для сайта. Их разработчики - отдельные программисты/компании. И несмотря на это они успешно используются на подавляющем большинстве сайтов. Наш скрипт не исключение. И это нормальная практика - всем хочется максимально простого решения задач. Исходный код скрипта интеграции открыт. Вы можете проанализировать его. Если будут конструктивные предложения по улучшению - будем рады обсудить. Скрипт защищен ключом. Не передав ключ скрипту, он ничего не будет делать. 2. Мы не говорим, что использование OptiPic - это абсолютная панацея к ускорению сайта и гарантия поднятия конверсии до небес :) Мы говорим о том, что оптимизация изображения - это одна из важных составляющих ускорения. И с нами согласны лидеры web-индустрии (к примеру, Google). Дополнительно мы приводим исследования httparchive.org, которые показывают что действительно изображения занимают большую долю всех ресурсов на странице. Наша задача - дать максимально простой инструмент для решения важной проблемы.
  29.01.2018 19:28
Ну а вообще есть смысл это делать. У меня страница грузится не быстро 4с. Я бы конечно хотел побыстрее.
  30.01.2018 12:36
Здравствуйте! Если у вас изображения на сайте еще не оптимизированы, то конечно имеет смысл их оптимизировать. Проверить это очень просто - зайдите к нам на страничку и укажите ссылку на страницу вашего сайта https://optipic.io/ru/pagespeed/ Проверка вам покажет - оптимизированы ли у вас изображения (и еще доп. рекомендации по ускорению). Или воспользуйтесь тем же google pagespeed insights для аналогичной проверки.
  29.01.2018 19:43
ща он ляжет под толпами юзверей не желающих вкл фотошоп)) .... купон на скидку ... я призадумался уже лезть туда или нет ... "письмо может попасть в папку спам ..." они даже волшебного кролика не подкупили
  30.01.2018 08:09
Может кто не знает - еще один бесплатный способ получения оптимизированных изображений - PageSpeed Insights от Гугл. Вбиваете страницу и на выходе в самом низу появляется - Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы.
  30.01.2018 08:54
Ну он часто режет изображения или размывает. Так что не всегда можно его юзать
  30.01.2018 12:37
Здравствуйте! Это вариант, если вам надо оптимизировать изображения на 1 странице сайта. Но смысла от оптимизации только 1 страницы сайта достаточно мало. Если и заниматься этим, то надо сразу для всех страниц сайта оптимизировать изображения. В итоге вам придется таким образом перелопатить все страницы вашего сайта - все их прогонять через Google PSI, скачивать архив, выдергивать оттуда картинки, их заливать обратно на сайт. И так по кругу. Если на сайте появилась новая статья/новость/товар - придется повторять процедуру для каждой новой страницы. В итоге быстрее и дешевле подключить автоматику, а свое время (или время наемного сотрудника) пустить на те задачи, которые автоматизации не поддаются.
  07.02.2018 17:05
У Google есть бесплатный модуль PageSpeed для Ngnix\Apache, который оптимизирует десятки параметров, включая сжатие изображений. Модуль сделает всё сам, на полном автомате. https://developers.google.com/speed/pagespeed/module/ Какие у Вас преимущества перед их разработкой?
  30.01.2018 10:29
Ай... Лучше написать скрипт который сжимает изображения при загрузке как у DLE. А то не верю что с таким способом можно оптимизировать сайт с 120к постом.
  30.01.2018 12:38
Здравствуйте! Наша система легко справляется с большим объемом изображений (миллионы изображений на сайте). Свой скрипт написать, конечно, можно. Но для чего изобретать велосипед? :) Обычно руководитель сайта нацелен на максимально эффективное решение задач. Критериями является минимальная стоимость внедрения и дальнейшего сопровождения. Плюс максимальный набор функций и гибкость при этом. Мы работает без ежемесячных платежей, поддержка бесплатная. Система постоянно мониторит добавление новых изображений и сжимает их. В итоге стоимость использования минимальная при максимальной гибкости. Также у нас есть партнерская программа, по которой вы сможете получать 40% от продаж своим клиентам. Будем рады видеть вас в числе партнеров :)
  02.02.2018 08:59
Бесплатный FastStone Image Viewer делает буквально тоже самое, и абсолютно даром, только что проверил, размер один в один оптимизированной картинки )))
  03.02.2018 07:54
Здравствуйте! По всей видимости, вы не дочитали до блока "Дешевле и быстрее — автоматизировать процесс" :) Для ручного сжатия инструментов достаточно много - это понятно. Но вручную оптимизировать изображения в итоге выходит очень долго и дорого, если их более 10-20 штук на сайте. В этом случае как раз понадобится OptiPic. Он позволит вам разгрузить себя или наемного сотрудника. К примеру, когда встает задача оптимизировать все изображения на сайте, которые накопились за несколько лет - тут ручные инструменты уже не подойдут. Неразумно сидеть и оптимизировать вручную каждое изображение из сотен, тысяч или даже миллионов избражений, которые есть на сайте. Другой пример - когда контент сайта постоянно обновляется. Вы не сможете каждый раз сжимать вручную изображения при добавлении нового контента (интернет-магазины, доски объявлений, коллективные блоги, каталоги недвижимости и т.п.). Использование OptiPic - это сэкономленное время, силы и деньги.
  05.02.2018 06:34
ВFastStone Image Viewer я могу легко сделать конвертирование в пакетном режиме
  05.02.2018 10:12
В любом случае это не полная автоматизация. 1. Вам придется все файлы сайта сначала закачивать к себе на компьютер, находить там все изображения и их оптимизировать. После этой процедуры вам нужно обратно скопировать оптимизированные изображения - со своего компьютера на сайт. 2. Надо постоянно мониторить добавление/изменение изображений на сайте и запускать оптимизацию новых/измененных изображений повторно. Т.е. это еще более сложная процедура, чем случай №1. На всем сайте вам нужно будет найти только новые (и измененные) изображения. И только их оптимизировать. Т.к. повторная оптимизация может привести к значительной потери качества. И чем чаще будет повторяться эта процедура с уже оптимизированными картинками, тем сильнее ухудшается их качество. В итоге получается экономия на спичках - полностью задачу вы с себя не снимаете, а лишь частично упрощаете. А скорее всего и совсем забудете о периодической дооптимизации новых изображений. В итоге задача останется не решена. Проще подключить сайт к OptiPic и полностью решить задачу.
Здесь был комментарий, который удалил модератор.
К данной записи нельзя добавлять комментарии т.к. она очень старая.