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

Оптимизация изображения для интернет-магазина

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

Начнем с маленький детской игры. Найти 10 отличий на моей фотке ниже.

10 отличий

Уверен, что отличия не получиться найти. Конечно есть шанс, что ты именно тот человек, который может рассмотреть пиксели даже на retina экране iphone, но этот шанс ничтожно мал. Верно?

Ты можешь бороться за высокое качество фото на своем сайте или интернет-магазине, но это может плохо кончиться. Читай дальше внимательно. Договорились? Если статья будет полезной и интересной, то жду комментарий внизу :)

А зачем вообще оптимизировать изображения?

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

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

Как оптимизировать изображения и фото для сайта интернет-магазина?
Оценка 47 из 100 для мобильной версии сайта

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

Сегодня будем говорить (ну или читать) о том, как оптимизировать изображения и фото для сайта интернет-магазина?

Нужно ли мне оптимизировать свой сайт?

Это очень легко проверить, возможно тебе и не нужно оптимизировать изображения и фото для сайта интернет-магазина. 

  1. Нужно зайти на сайт Google PageSpeed: Ссылка
  2.  Если у тебя просто блог, можно проверить только главную страницу
  3. Если интернет-магазин, то:
    1. Главную страницу
    2. Страницу каталога
    3. Страницу товара (карточку товара)

Поочередно проверяем ссылки в тест и смотрим какие результаты будут выдаваться. Если ты увидишь в отчетах «Оптимизируйте изображения»:

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

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

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

Сравните две мои фотографии.

Фото №1. 3264×4661 пикселей, размер 7.8 мегабайта, сразу после фотосессии. Можете скачать и проверить размер.

Оригинал Антон Проценко

 

Фото №2.
1000×1428 пикселя, 184 килобайта. Скачайте и проверьте самостоятельно.

Сжатый вариант Антон Проценко

 

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

Давайте я вам даже рядом эти фото поставлю:

2 фото Антон Проценко

Разница в размере фотографии в 43,4 раза! А для покупателя внешней разницы никакой.

Тут одни плюсы. 

  1. Меньше размер — быстрее загружается;
  2. Меньше размер — качество то же;
  3. Меньше размер — довольны поисковые системы.

Кейсы из интернета по увеличению скорости загрузки сайта:

Скорость загрузки сайта


Грег Линден, работая в Amazon, проанализировал то, как задержка загрузки страниц влияет на общую прибыль компании. Так, задержка всего в 100 мс способна привести к падению заработков компании на один процент.

За прошлый год доход Amazon составил 74,5 млрд. долларов. Таким образом, повышение времени загрузки страницы на долю секунды обойдется Amazon в 745 млн. дол. в год! 


Bing

Эрик Шурман (Bing) и Джейк Брутлэг (Google) на своей совместной конференции обсудили важность задержек в работе серверов.

Если страницы будут грузиться на 1,5 сек. дольше, чем обычно, то удовлетворенность пользователей снизится на 3,8%, количество кликов на 4,4%, а выручка с одного клиента на 4,3%.


Как я оптимизирую изображения?

ШАГ №1. Нужно уменьшить разрешение фотографии. Зачем нам 3264×4661, если 1000px нам точно хватит.

Я делаю достаточно топорно. Когда у меня был PC — я пользовался бесплатной программой Paint. Сейчас на macbook я пользуюсь Photoshop.

Ставим Высоту 1000 px

Ставим высоту 1000px и файл уже весит не 7,8 МБ, а 1,1 МБ. Уменьшили размер в 7 раз!

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

Разница в 7 раз, а качество изображения и восприятие его пользователем вообще не изменилось!

Думаю, что вопрос о том, как оптимизировать изображения и фото для сайта интернет-магазина уже не стоит. Полезная статья?

Как создать Баннеры для своего магазина быстро и бесплатно. Читать.

ШАГ №2. Оптимизируем изображение с помощью онлайн сервиса tinypng.com

Сайт - tinypng.com

В бесплатной версии максимальный размер файла максимум 5 МБ (вот поэтому я и уменьшил фотку в фотошопе)

  1. Перетаскиваем фото в это поле

https://tinypng.com/

      2. Ждем пару секунд и скачиваем его :)

https://tinypng.com/

Из 1.1 МБ размер стал 183 КБ

Какой можно сделать вывод?

Преумущества оптимизации изображений на сайте:

  1. Существенно возрастает скорость загрузки. Ведь нужно загружать меньше данных. Никому не нравиться ждать долгую загрузку сайтов.
  2. Пользователи с мобильных устройств и мобильным интернетом буду довольны :)
  3. Экономия места на хостинге.
  4. Поисковые системы будут выше ранжировать твой сайт.

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

Сайт protsenko2.ru
Нужно еще подтянуть мобильную версию :)

Данная статья отвечает на вопрос: «Как оптимизировать изображения и фото для сайта интернет-магазина?»  Я понимаю, что может быть лень все это делать, но такие мелочи на дистанции сделают огромный плюс для твоего сайта.

Если есть вопросы по запуску своего магазина, то пиши в комментариях.

Получите список 398 ниш для своего интернет-магзина на e-mail

Комментарии к этой статье

anton-protsenko

Присоединяйтесь к 4 000+ читателям моего блога. Список ниш для интернет-магазина в подарок

Наверх