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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разница в размере фотографии в 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.

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

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

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

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

ШАГ №1Б Если компьютер на Виндовс?

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

Как это сделать:

• Откройте программу, нажав «Пуск»― «Paint»

• Загрузите изображение для редактирования, нажав «Открыть».

• Откройте раздел «Изменить размер», и поставьте флажок напротив «пиксели».

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

• Потом выберите «Сохранить как…» и нужный формат для сохранения. Оптимальный вариант для файла — это тип JPEG.

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

Сайт - tinypng.com

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

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

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

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

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

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

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

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

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

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