Оптимизация изображений как важная составляющая cro-процесса

Posted on by riasevastopol

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

Исходя из этого работа с графикой в контексте CRO — воздействие, которое стоит предпринять как возможно скорее.

Задача довольно несложная, с ней справятся все — и новички, и специалисты. И не смотря на то, что отечественный гайд достаточно долгий, недооценивать этот вопрос не рекомендуется — исходя из этого дочитайте его до конца.

Из-за чего уменьшение веса изображений принципиально важно для CRО?

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

Уменьшение времени загрузки страницы критически принципиально важно для оптимизации конверсии.

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

Для таких интернет-гигантов, как Amazon, кроме того маленькое повышение времени загрузки (на 100 миллисекунд) ведет к 1% потерянных продаж, другими словами к миллиардам потерянной прибыли.

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

Оптимизация изображений как важная составляющая cro-процесса

Одно изображение весом в 100 килобайт при скорости соединения в 1Mbps будет загружаться 2 секунды. Десять таких изображений будут загружаться уже 20 секунд

Оптимизация конверсии — это и оптимизация UX. Хороший пользовательский опыт избавляет визитёра от лишнего напряжения, а совершенный — удивляет и радует. Это очень принципиально важно, потому, что удержание визитёра на сайте увеличивает шансы на его конверсию.

Ваша задача — создать UX, что станете высоко оценен пользователями. На этом уровне запускается одна из лучших форм продвижения — маркетинг из уста в уста (word of mouth marketing).

Просматривайте кроме этого: Как ускорить время загрузки сайта

Из-за чего уменьшение веса изображений принципиально важно для SEO

Время загрузки — серьёзный причиной ранжирования в поисковых совокупностях, и из года в год его значимость все растет. Из нижеприведенного графика за авторством агентства MOZ направляться, что скорость загрузки страницы — четвертый по важности критерий при оптимизации страницы по показателям, не связанным с главными словами (Page-Level Keyword Agnostic Features).

Распределение показателей ранжирования, не связанных с главными словами, по шкале от 0 до 9, где 0 — фактор не воздействует на ранжирование страницы, а 9 — фактор оказывает сильное влияние:

  • уникальность контента;
  • страница оптимизирована под мобильные (для мобильного поиска);
  • CTR страницы в поиске по главному слову;
  • скорость загрузки;
  • количество запросов главного слова;
  • показатель отказов;
  • дизайн либо UX;
  • метрики долгих кликов;
  • новизна контента на странице;
  • повторные визиты по окончании начального запроса;
  • протяженность контента на странице;
  • возраст страницы;
  • средняя скорость просмотра по окончании перехода со страницы результатов поиска;
  • уровень качества дополнительного контента на странице;
  • страница содержит Schema.org;
  • уровень чтения контента на странице;
  • применение изображений;
  • применение видео, слайдеров и пр.;
  • страница поддерживает HTTPS/SSL;
  • авторитет создателя страницы;
  • страница оптимизирована под мобильные (для десктопного поиска);
  • страница содержит Open Graph либо Twitter Cards.

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

Из-за чего от размера изображений зависят затраты на хостинг

Громадные изображения воздействуют и на пропускную свойство хостинга. Исходя из этого, в случае если у вас громадный трафик, то тяжелые изображения повлекут лишние затраты. Одно дело, в то время, когда 50 человек в сутки загружают фото в 1 Мб, но что, в случае если их станет 5000?

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

О том, как это сделать, просматривайте ниже.

Главные форматы изображений

На веб-ресурсах употребляется не так много форматов изображений. Разглядим 5 главных:

  • .jpg;
  • .png;
  • .gif;
  • .svg;
  • .bmp.

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

Сделав это, вы легко выясните формат:

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

На Mac пройдите следующий путь: FinderPreferencesAdvanced — а после этого поставьте галочку рядом с фразой «Show all filename extensions» (Показывать все расширения файлов):

PreferencesAdvanced — а после этого поставьте галочку рядом с фразой «Show all filename extensions» src=https://media.lpgenerator.ru/не/2017/01/23/5_thumb600x500.jpg style=border: none; transform: rotate(0rad); width: 600px; height: 500px; /

На Windows 10 откройте Пуск, после этого — ПроводникВидПараметрыПросмотр, снимите флажок с пункта «Скрывать расширения известных типов файлов» и выберите радиокнопку «Показывать скрытые файлы, папки и диски». По окончании надавите «ОК»:

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

К примеру, если вы решите преобразовать картину из .jpg в .png, функция отображения расширений не позволит перепутать файлы, лежащие рядом в папке.

Сейчас о том, как выяснить вес изображения и его габаритный размер. На Маке достаточно кликнуть по изображению правой кнопкой мыши и выбрать пункт Get Info:

Покажется окно, где будет указан размер (ширина, высота) и вес изображения:

Чтобы получить эту же данные на Windows, направляться кликнуть правой кнопкой по изображению и выбрать Свойства:

В окне особенностей будут отображаться все характеристики изображения. Дабы взглянуть размеры, надавите «Подробнее».

И откроется информация о файле изображения:

Обсудим преимущества и недочёты каждого формата. Различные типы файла владеют качествами, оптимальными для одних проектов и не применимыми для других.

Просматривайте кроме этого: Оптимизируйте изображения под web

.JPG

Полное наименование: Joint Photographic Experts Group (по заглавию организации-разработчика).

Год релиза: 1992.

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

Кстати, вы имеете возможность поменять окончание имени файла с .JPEG на .JPG и ничего катастрофического не случится.

Но если вы фото с телефона либо камеры и постараетесь засунуть на сайт без оптимизации, вас ожидает неприятный сюрприз. Несжатое .JPG-изображение с телефона либо цифровой камеры весит довольно много. Под «большое количество» понимается вес от 1 до 10 МБ (время от времени и больше).

Ниже — пример .JPG:

Это снимок картины Винсента ван Гога «Ирисы». Хороший пример того, в то время, когда .JPG — оптимальный выбор. Картина полна красок, безлюдное пространство отсутствует вовсе, нет прямых линий.

Сохранить это великолепие в маленьком по весу файле окажет помощь лишь.JPG.

Выводы:

  • в случае если сомневаетесь, какой формат применять, берите .JPG;
  • это лучший формат для хранения фотографий;
  • количество для того чтобы файла значительно уменьшается без утраты качества.

.PNG

Полное наименование: Portable Network Graphics (портативная сетевая графика).

Год релиза: 1996.

Формат .PNG в один момент именуют благословением и проклятием. Для веб-дизайнеров он воображает красивую альтернативу .GIF.

Данный формат оптимален для крупногабаритных изображений, но не фотографий либо изображений со множеством деталей и цветов (как на картине Ван Гога).

Пример графика

.PNG прекрасно отображает простые графики, диаграммы и чертежи. В этом формате изображение выше весит всего 34 Кб. Обратите внимание, что инфографика выглядит лучше и весит меньше, если она сохранена в формате .PNG.

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

Выводы:

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

.GIF

Полное наименование: Graphics Interchange Format (формат для обмена изображениями).

Год релиза: 1987.

.GIF — весьма ветхий формат, созданный еще до появления публичного интернета. Он прекрасно справлялся со своей задачей, в то время, когда глобальная паутина была довольно новой.

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

Слева — пример декоративной границы окна из маленького размера квадратиков формата .GIF. Любой квадратик весит всего 54 байта

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

Но что по поводу анимированных изображений?

Нам всем по душе так именуемые GIF-анимации. Но, в большинстве случаев, весят они большое количество — порядка 2 Мб и выше. Блогеры склонны применять анимированные картины в постах, жертвуя для этого временем загрузки.

Но в случае если дело того стоит, то из-за чего нет!

Выводы:

  • устаревший формат, замещенный .PNG;
  • применяйте GIF-анимации в крайнем случае — они сверхтяжелые;
  • GIF совершенен для маленьких декоративных элементов страницы, не предназначенных для масштабирования.

.SVG

Полное наименование: Scalable Vector Graphics (масштабируемая векторная графика).

Год релиза: 2001.

Файлы формата .SVG легко немыслимы. Как подсказывает наименование, такие изображения превосходно подходят для масштабирования и смогут весить весьма мало.

Но имеется значительный недочёт — фотографии не смогут быть векторными. Но любое второе векторное изображение возможно сохранено в этом формате (если оно было создано в программе Adobe Illustrator либо Corel Draw, то его возможно экспортировать в .SVG).

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

Логотип NASA сохранен в .SVG-формате и весит всего 14 Кб. Не смотря на то, что, как вы имеете возможность подметить, само по себе изображение громадное и достаточно четкое. В этом вся прелесть векторной графики.

Пикселизации не появится, независимо от того, как очень сильно вы измените размер изображения.

Основная неприятность с этим форматом содержится в том, что такие изображения практически в любое время создаются умелыми живописцами (в случае если, само собой разумеется, вы не скачаете таковой файл с какого-нибудь сайта). Но если вы трудитесь над сайтом с громадным потоком трафика, будет разумно инвестировать ресурсы на создание SVG-файлов, если они вправду нужны.

Выводы:

  • мелкий размер;
  • подходит для адаптивных сайтов, где необходимы изображения, масштабируемые без утраты качества;
  • не пригоден для фотографий;
  • требует развитых дизайнерских навыков для корректного применения.

.BMP

Полное наименование: Windows Bitmap, Bitmap Picture.

Год релиза: 1985.

.BMP — формат хранения растровых изображений, созданный компанией Микрософт. Это старейший из всех файловый форматов интернета.

Если вы когда-либо пользовались программой Микрософт Paint, то создавали файлы с расширением .BMP. Большая часть современных браузеров без неприятностей отображают файлы этого формата, но употребляются они редко. Эти файлы тяжелы и подвержены пикселизации при масштабировании.

Вывод: данный формат применять не нужно.

Просматривайте кроме этого: Форматы изображений для веб-применения

Уменьшение веса изображений без утраты качества

Тут окажут помощь следующие инструменты.

Photoshop

Adobe Photoshop — отраслевой стандарт при редактировании изображений. Это платная программа, которая обойдется в $19.99 каждый месяц. Если не хотите платить, то имеете возможность отыскать в сети Adobe CS6, последнюю версию программы, которая не требует абонентской платы.

Одна из нужнейших для оптимизации изображений функций Photoshop — сохранение изображения в один из веб-форматов («Save for Web»). Разрешает скоро преобразовать его качество и вес изображения для разных типов файлов.

Сперва откройте в программе изображение, которое собираетесь оптимизировать:

Потом, быть может, вы захотите поменять ширину либо высоту .Это также сокращает вес картины еще перед тем, как вы определитесь с конечным типом файла.

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

Разберем пример. Допустим, вы захотели засунуть изображение в блог и начали поменять его размеры.

Ширина поля для контента — 800 пикселей

Представим, что вы желаете разместить снимок приятеля в собственном блоге. Ширина изображения — 4 000 пикселей. Разумеется, что размер в разы превышает требуемый.

Да и шансы, что вес файла будет маленьким, очень малы.

Имеете возможность поменять размер до 800 пикселей в ширину — но время от времени, наоборот, стоит масштабировать его до 1000 пикселей. На экранах Retina, установленных в Mac, достаточно легко выявить изображения низкого качества. А потому у многих дизайнеров имеется необходимое правило: ширина изображения обязана как минимум вдвое быть больше ширину поля с контентом.

Это делается чтобы изображения смотрелись кристально чистыми кроме того на экранах от Apple.

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

В нашем случае, ширина изображения равна 8 000 пикселей.

Чтобы поменять его размер, на Mac потребуется кликнуть по вкладке «Изображение», а после этого выбрать пункт «Размер изображения»:

Размер направляться уменьшить до 1 000 пикселей, потому, что ширина блога немного меньше:

Потом — открываем вкладку «Файл», выбираем «Сохранить для Web»:

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

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

Опробовав все форматы, остановите выбор на том, при котором количество файла был мельчайшим, а уровень качества — таким же высоким. В примере таким форматом был .JPG. Как раз в нем было решено сохранить изображение:

Обратите внимание, что вес файла в формате .PNG равен 731 KB!

Другие форматы могут быть предпочтительнее. Но если вы оптимизируете чертежи и графики, то .PNG будет оптимальным выбором.

TinyPNG

Тем, у кого нет Photoshop, подойдет бесплатный онлайн-сервис TinyPNG. Само собой разумеется, совершенной оптимизации не окажется, но снизить вес файла возможно и тут. Основной недочёт — ресурс не разрешает поменять размер изображения:

Дабы начать работу, перенесите изображение в центр основной страницы сервиса, в область, очерченную пунктиром — вес изображения тут же уменьшится машинально:

Сейчас — новый файл на компьютер.

В случае если его вес велик (больше 350 Кб), вначале уменьшите размер изображения, а после этого обращайтесь к TinyPNG. В случае если загружаете фотографии с iPhone, имеете возможность послать их по почте, предварительно указав размер, хороший от уникального. В большинстве случаев, громадный и средний размеры самый предпочтительны.

GIMP

GIMP — немыслимый инструмент. Это бесплатная десктопная альтернатива вездесущему Photoshop. Наряду с этим GIMP может все, на что способно детище Adobe. Так что если вы ограничены в средствах, обратите на эту программу внимание.

Она доступна для Windows, Mac OS и Linux.

Просматривайте кроме этого: Как сделать совершенное изображение для социальных медиа?

Какой количество файла предпочтительнее?

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

В случае если картины утратили четкость, стали зернистыми либо тусклыми, заново оптимизируйте их, дабы уровень качества файлов повысилось. В случае если используете Photoshop и сохраняете изображения в .JPG, попытайтесь переместить ползунок качества изображения до 80% и более. В случае если сохраняете изображение в .PNG, попытайтесь вместо .PNG-8 применять .PNG-24.

Определим совершенные показатели количества файлов для главных типов ресурсов.

Веб-магазины

На страницах среднего вебмагазина размещено от много до тысячи изображений продуктов. Исходя из этого оптимизация визуального контента очень важна для сайтов eCommerce.

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

Блоги

В большинстве случаев, вес изображений для блогов не превышает 100 Кб. Но ваша задача — добиться минимального количества при сохранении качества. Откажитесь от GIF-анимации, в случае если это не нужно.

SaaS-порталы

На этих ресурсах имеется три основных вида изображений: на основной странице (hero shot), иконки и скриншоты. Самая ответственная страница сервиса — основная, так что и все работы по оптимизации стоит начать из этого.

Основное изображение

В большинстве случаев это огромные изображения на целый экран. Но ваш целевой количество — 250 Кб либо меньше. Это будет непросто. Но очень результативно.

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

Иконки

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

Скриншоты

В случае если скриншоты такие же широкие, как и основное изображение, попытайтесь уменьшить их вес до 250 Кб, в случае если нет — 100 Кб и меньше. Лучший формат для скриншотов — .JPG.

Просматривайте кроме этого: Оптимизация изображений для улучшения юзабилити вебмагазинов

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

Бесплатные онлайн-сервисы

  • TinyPNG. Основная сокровище ресурса — в его простоте. Достаточно перенести изображение на основной экран, как его вес понижается;
  • Pixlr. Интерфейс сервиса похож на Photoshop. Он кроме этого показывает вес файла при том либо другом качестве картины;
  • Picmonkey. Нужные функции дешёвы, а интерфейс интуитивно понятен.

Бесплатные десктопные инструменты

  • GIMP;
  • Paint.net. Лучшая версия Микрософт Paint. Одна из нужных функций — неограниченная история. Имеете возможность отменить столько действий, сколько необходимо;
  • Seashore. Приложение с открытым исходным кодом для Mac. Известно собственными багами, но все еще возможно нужным.

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

Пара финальных советов по оптимизации для поисковых машин. Имена файлов должны быть описательными. К примеру, не требуется давать изображению в веб-магазине наименование наподобие 324q345q345.png.

Отразите в имени файла товар, изображенный на картине. Кроме этого убедитесь, что каждое изображение имеет соответствующий тег Alt в коде изображения:

Эта информация разрешит картине принимать участие в поиске по изображениям Гугл либо Яндекс.

Секреты изображений и оптимизации заголовков от ведущих контент-ресурсов

Заключение

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

Высоких вам конверсий!

По данным: blog.crazyegg.com

Случайные статьи:

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


Подборка похожих статей:

riasevastopol

More Posts