Ответ
Оптимизация изображений для повышения конверсии Опции темы
Старый 06.04.2014, 16:33
  #1
Ребиллер
 
Регистрация: 01.01.2012
Сообщений: 423

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





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

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

Как влияет размер файла изображения на клиентов?

Все довольно просто. Если у вас есть целевая страница с изображением в 700Кб, то страница будет дольше загружаться, чем, если бы вы использовали 30Кб изображение. Когда веб-страница очень долго грузиться, происходит следующее:





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

Чем быстрее загрузка страницы, тем больше переходов

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





Размер изображения - в КБ | Время загрузки страницы - в секундах | CVR - Коэффициент конверсии

Как вы можете видеть, коэффициенты конверсии увеличились на каждой целевой странице. Средний курс конверсии увеличился на 11% , с 31,8% до 35,6% . Появились четыре лишних привода на каждые 100 посетителей, что мы не получили бы раньше.

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

Как можно оптимизировать размер файла вашего изображения?

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

1) Вырежьте все пробелы вокруг изображения.

Вам не нужно все, что занимает дополнительное место. Потом на сайте вы можете использовать HTML/CSS, чтобы добавить дополнительное пространство вокруг изображения на целевой странице. В Photoshop, используйте инструмент кадрирования, чтобы устранить лишние пробелы.





2) Сделайте изображение тем размером, каким оно должно быть на странице.

По умолчанию, изображение высокой четкости может быть 2000 пикселей в ширину. Это слишком много и его сжимают посредством стилей. И в результате на большинстве целевых страниц изображение будет иметь 600-800 пикселей в ширину, но это виртуальный размер не реальный, а пользователь грузить все те же 2000 пикселей. Чтоб изменить размер в Photoshop, нажмите Image > Image Size > edit the width. Ставьте нужную ширину, например 300. Кстати, убедитесь в том что "Сохранить пропорции" выбран еще до редактирования.





3) Сделайте изображение прозрачным.

Удалите белый фон за вашим изображением. Иногда это просто удаление фонового слоя.





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





Затем с помощью волшебной палочки, Polygonal Lasso или Quick selection, выберите белый фон. Как только белый фон выбран, удалите его, и вы будете иметь прозрачное изображение.





4) Сохраните изображение как файл PNG-8.

Теперь сохраните изображение в наименьшем размере файла без ущерба для визуального качества изображения. В Photoshop, нажмите File > Save for Web. Затем выберите PNG-8 и нажмите кнопку «Сохранить». Вот мои настройки:





Альтернативные методы оптимизации изображения

Если у вас нет Photoshop, то это не беда, так как есть и другие способы, чтобы уменьшить размер изображения, но вы можете потерять контроль над качеством. Вот некоторые ресурсы, которые можно использовать:

http://www.smushit.com/ysmush.it/ - бесплатный онлайн оптимизатор изображений на базе Yahoo!

http://www.imageoptimizer.net/Pages/Home.aspx - еще один бесплатный онлайн оптимизатор изображения

http://office.microsoft.com/en-us/po...010192200.aspx - оптимизация изображений через PPT.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CRO - Оптимизация коэффициента конверсии Alsu Магазины 0 23.05.2013 22:33
MyShot – загрузка изображений и создание скриншотов 1Pic.org Сервисы 5 10.04.2013 07:25
В трёх шагах до повышения конверсии Alsu Аналитика 2 19.02.2013 15:03
Методы повышения конверсии интернет-магазина 0pium Аналитика 3 07.01.2013 16:49

Метки
photoshop, изображения, оптимизация, сайтостроение


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 23:22. Часовой пояс GMT +3.