[Ребиллер]

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

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

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

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

Все довольно просто. Если у вас есть целевая страница с изображением в 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.