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

Зачем нужно оптимизировать изображения

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

Требования поисковых систем к изображениям

Расширения

Гугл индексирует изображения с расширениями BMP, GIF, JPEG, PNG и WebP, SVG. Яндекс более избирателен. Для него больше подходят PNG, JPEG, GIF и WebP.

Помимо выбора формата нужно знать, что Yandex не воспринимает динамически загруженный контент (Flash).

Качество

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

Разрешение и вес

Из нескольких одинаковых картинок в поисковой выдаче первые позиции занимают те, что имеют максимальный размер и разрешение. Это не значит, что на сайте стоит использовать фото большого размера. Лучше прибегнуть к использованию миниатюры, а оригинал открывать при клике на превьюшку. Файлы с разрешением менее 100 пикселей могут восприниматься как часть дизайна, поэтому они не будут видны в результатах поиска. Для того чтобы узнать количество px, воспользуйтесь любым графическим редактором. Например, PhotoShop, Sketch, Illustrator. Также для этого есть специальные онлайн-сервисы.

Не применяйте каскадные таблицы стилей (CSS) для изменения размера фотографий. Используя стили, вы не изменяете фактический размер изображения. Картинка сохранит свой вес и будет загружена полностью. Если таких файлов много, HTML-страница загружается медленно и пользователь может закрыть её, не дождавшись полной загрузки. Google и Яндекс учитывают способ сжатия, и считают использование для этого CSS недопустимым.

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

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

Выбор формата

Для разных целей на странице нужно подбирать свой тип изображений. Каждый имеет разную степень оптимизации.

Не ошибитесь с выбором:

  • PNG - элементы дизайна.
  • JPEG - растровая графика.
  • GIF - для анимации.
  • SVG - векторная графика.

Самые популярные сервисы и программы по оптимизации изображений

Рекомендуем использовать в работе следующие программы и сервисы. С ними оптимизация не отнимет много времени.

Программы: преимущества и недостатки

Photoshop

  • "+" Помимо известных возможностей редактирования, контент-менеджеру в работе пригодится команда Save for Web (вызывается комбинацией клавиш Alt + Ctrl + Shift + S). Вкладка «4-Up» покажет три варианта преобразования фото для сайта.
  • "+" Довольно просто изменить формат, ширину и высоту изображения.
  • "+" Можно посмотреть, как будет выглядеть фото на сайте.

Оптимизация изображений в Photoshop

  • "-" Сжатие и оптимизация картинки для Web существенно ухудшает ее качество.
  • "-" Нет пакетной обработки.

Но главное здесь заключается в том, что PhotoShop - профессиональная программа и оптимизация ее главной задачей не является.

FastStone Image Viewer

  • "+" Не только сжимает фото по выставленным параметрам, но и меняет на заданное имя названия файлов. Функционал также дает возможность изменить размер, добавить водяной знак, обрезать и отредактировать картинки.
  • "+" Есть пакетная обработка.

Как работает пакетный режим. Открываем в программе папку с изображениями, требующими оптимизации, и жмем F3. В открывшемся окне выбираем нужные и кликаем «Добавить».

Пакетная обработка изображений в FastStone

Ставим галочку напротив пункта «Изменить настройки» и нажимаем кнопку «Дополнительно». Далее можно:

  • задать параметры только для ширины или высоты и программа автоматически уменьшит все снимки, сохраняя их пропорции;
  • выставить вручную ширину и высоту «В пикселах». При необходимости можно снять галочку сохранения пропорций.

Сжатие изображений в FastStone

Изменение параметров изображений в FastStone

Едва ли не главный минус Fast Stone - вероятность ухудшения качества снимков. Поэтому перед тем как что-либо изменять, нажмите на кнопку предварительного просмотра. Так вы сможете увидеть, что получится на выходе, и при необходимости скорректировать настройки.

Предварительный просмотр в FastStone

Быстрый просмотр фото в FastStone

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

Ставим флажок напротив «Менять имя». (Кнопка со знаком вопроса подскажет расшифровку символов, которые нужно применить).

Изменение имени файла в FastStone

На практике можно обойтись всего двумя - *, #:

Пишем общее название для всех картинок и для их автоматической нумерации ставим решетку (#). Например, name# или name_#. Соответственно всем фото будут присвоены названия вида: name1.jpg (name_1.jpg), name 2.jpg (name_2.jpg), name 3.jpg (name_3.jpg).

Когда нужно создать уменьшенное изображение с сохранением исходного файла (сделать превью) в поле замены имени введите: *_sm или *_thumb. Где звездочка – название исходного файла.

Перед тем, как нажать кнопку «Старт», не забудьте выбрать формат и папку для оптимизированных файлов («Выходной формат» и «Выходная папка»).

Сохранение изображений в FastStone

Screaming Frog Seo Spider

Эта программа будет полезна для определения веса уже размещенных на сайте картинок. Его можно посмотреть во вкладке «Images», столбце «Size».

Узнать вес фото в Screaming Frog

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

  1. В таблице «Address» кликните на нужную ссылку.
  2. Ниже выберите вкладку «Inlinks». В поле «From» и будет ссылка на ту страницу, где размещено изображение.
  3. Открыть страницу можно, кликнув «Open From in Browser».

Узнать местоположение картинки в Screaming Frog

Сервисы: плюсы и минусы

tinypng.com - (бесплатный)

  • "+" Пакетное сжатие изображений без потери качества. Осуществляется за считанные секунды.
  • "+" Удобный и интуитивно понятный интерфейс. Достаточно перетащить файлы из любой папки или «рабочего стола» прямо на страницу.
  • "+" Картинки можно сохранять по отдельности или все сразу, кликнув «Download All». На компьютер скачается архив со сжатыми файлами.

Оптимизация изображений в Tinypng

"-" За один раз получится оптимизировать не больше 20 фото. Для обработки последующих изображений придется покупать подписку или каждый раз обновлять страницу Tinypng.

imagecompressor.com/ru/ - optimizilla.com (бесплатный)

Optimizilla.com - фото

  • "+" Аналог предыдущего сервиса по функционалу и возможностям с сохранением высокого качества исходных данных.
  • "-" Также имеет ограничения по количеству в 20 штук.
  • "-" После сжатия файлы переименовываются.

iloveimg.com/ru - (бесплатная)

Iloveimg.com - фото

  • "+" Многофункциональный сервис, позволяющий:
    • пакетно сжимать;
    • массово преобразовывать в нужный формат;
    • менять размер в пикселях или процентах;
    • обрезать;
    • ставить водяной знак;
    • править в фоторедакторе.
  • "-" После сжатия сохраняется качество и пропорции изображений.
  • "-" Ограничение в 60 изображений для пакетной обработки, что одновременно является и плюсом по сравнению с предыдущими сервисами.

Итоги

Обязательно сжимайте картинки и следите за их размером. Ведь фото - один из аспектов успешного продвижения сайта.

При оптимизации помните о следующем:

  • Специализированные программы или сервисы существенно сэкономят ваше время.
  • Выбирайте корректные форматы файлов.
  • Лучше, если фото сделаны вами. Или куплены в стоках.
  • Избавляйтесь «лишнего веса» изображений.
  • Включите программное сжатие на сервере.
  • Не забывайте прописывать теги alt.

 

Обсудим сотрудничество?

Какие задачи нужно решить:
Разработка сайта / интернет-магазина
Продвижение (SEO, Директ и т.п.)
Контент-маркетинг
Поддержка сайта (информационная, техническая)
Аудит сайта / интернет-магазина
Консультация
Задать вопрос специалисту
Заполните форму и мы вам быстро ответим

Комментарии

07.09.2021 в 05:50 | макс

1)Какой приблизительный размер должен быть в идеале для сайта ? 2)Для комиксов 4000×4000 пиксель 3,8 Мб. Это много или мало ?

Комментировать
08.09.2021 в 09:31 | Полушкин Николай (dius)
1)Какой приблизительный размер должен быть в идеале для сайта?
Зависит, естественно, от параметров картинки и допустимого веса загрузки, если это не ваш сайт. Приходится балансировать между потерей качества и сохранением чёткости. В любом случае, если картинка не предназначена для детального рассматривания, вес не должен превышать 500 Кб.

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

2)Для комиксов 4000×4000 пиксель 3,8 Мб. Это много или мало ?
Зависит от того, можно ли прочитать комикс. Если выкладывать работы на стороннем ресурсе, то качество, естественно, будет в приоритете. О весе можно задуматься, если есть ограничения по закачке. Если же волнует скорость загрузки на собственном сайте, то можно привязать ссылку с полным файлом на файлообменник, а на сайте выложить максимально сжатое превью.
Комментировать

Добавить комментарий

* Поля, обязательные для заполнения
Добавляйся в наши социальны сети:
Каждый день интересные материалы про маркетинг и не только.

Провести бесплатный SEO-аудит вашего сайта?

Провести бесплатный SEO-аудит вашего сайта?

Хочу бесплатный аудит
Заказ сайта
Оставить заявку
Заявка на расчет
Оставить заявку
Оставить заявку
Заказ услуги
Заказ услуги
Заказ работ
Продвижение от 10.000 рублей
Form
X
Хочу быть автором