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

155

Оптимизация изображений

Як правильно оптимізувати зображення на сайті

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

1. Оптимізація імені зображення

Якщо у вас є сотні фотографій у вашому магазині, оптимізація кожного з них може бути непростим завданням. Але існують певні переваги для того, щоб витрачати свій час і зробити це. Назви файлів зображень є таким же контентом, як і текст на сторінці. Таким чином, правильне використання ключових слів у назви файлів зображень може позитивно впливати на рейтинг сторінок сайту в пошукових системах. В якості прикладу візьмемо зображення чоловічого костюма.

Серый 3 пуговичный мужской костюм

Імена файлів зображень ваших товарів повинні бути зрозумілими, і включати в себе потрібну кількість ключових слів, які розподіляються наступним чином:

  • ім’я файлу зображення
  • Alt тег зображення
  • Назва (Title) зображення

Для цього продукту, наприклад, замість того, щоб IMAGE_322.jpg для імені файлу, кращим вибором буде ім’я файлу: seriy-3-pugovitsy-muzhskoy-kostym.jpg.
Є безліч варіантів, які ви можете використовувати, щоб назвати цей файл, але в цілому це краще використовувати сервіси по вибору ключових слів, щоб називати зображення найбільш затребуваними при пошуку товарів ключовими словами, або використовувати слова із заздалегідь створеного семантичного ядра сайту.
Alt тег для зображення вкрай важливий, так як браузер буде відображати альтернативний текст зображення не може бути відображено правильно. Alt теги також важливі для слабозорих, так як вони покладаються на програмне забезпечення для читання тегів зображення Alt, що повідомляє їм, що знаходиться на зображенні.
Кожна фотографія повинна мати свій унікальний і відповідний тег Alt. Для простоти, ви можете використовувати ім’я файлу Alt тег зображення, але без дефіса:

Рекомендую до прочитання: Цільовий запит

”Серый.

2. Оптимізація завантаження зображення

Це може здатися не так багато, але декілька додаткових секунд часу завантаження вашого сайту може коштувати вам клієнтів. Згідно з даними статистики сайту kissmetrics.com більшість споживачів чекають відкриття сторінок сайту близько 5 секунд на своєму мобільному пристрої, перш ніж покидають сайт. Користувачі настільних комп’ютерів чекають і того менше 3 секунди в середньому. Ось хороше правило для зображення: чим більше розмір файлу, тим більше часу потрібно для завантаження сторінки. Для боротьби з цією проблемою, ви можете зменшити розмір кожного зображення, стискаючи їх. Якщо ваш сайт електронної комерції має тільки кілька стислих зображень, ви можете використовувати будь-який з цих інструментів для редагування зображень (всі посилання відкриваються в новому вікні):

  • PicMonkey
  • Pixlr
  • Pic Resize
  • Gimp
  • FotoFlexer

Якщо ж у вас є сотні (або тисячі) фотографій, стискання їх по одній за раз не є життєздатним варіантом. Пропоную використовувати такі сервіси, які можуть стискати зображення в пакетному режимі.
Якщо ваш сайт працює на WordPress, завантажити будь-який з цих плагінів:

  • WP Smush.it
  • Cloudinary
  • EWWW Image Optimizer

Є подібні інструменти і розширення для інших CMS, таких, як наприклад Magento і Joomla.

3. Вибрати оптимальні типи файлів зображень

Різні типи графічних файлів можуть вплинути на продуктивність веб-сайту, тому дуже важливо правильно вибрати тип файлів для правильної ситуації.
Три з найбільш поширених типів файлів зображень:

  • JPEG
  • PNG
  • GIF

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

Рекомендую до прочитання: Анкорные і якірні посилання

Куртки зимние

. JPG файлів на 68,7 KB

Kurtki-PNG

. PNG файлів на 195,3 КБ

Kurtki-GIF

. GIF файлів на 51,3 KB

4. Створення образу Карти сайту

Поряд з оптимізацією зображення, ви можете збільшити шанс потрапляння зображення вашого продукту в індекс ПС шляхом додавання зображення в карту сайту, та відправлення її в Google Webmaster Tools. Це особливо важливо, якщо ваші зображення продукту створюються з використанням JavaScript, і не відображаються у вихідному коді сторінки.
Є цілий ряд інструментів, які можуть генерувати карту сайту:

  • XML-Sitemaps.com
  • Inspyder
  • Google sitemap generator

Ну ось в принципі і все, що я хотів сьогодні розповісти.
[stextbox id=”info” caption=”Не забуваємо підписуватися на оновлення!”]Підписуйтесь на RSS, E-mail розсилку, слідуйте за мною на Twitter, що б отримувати першими нові та корисні статті.[/stextbox]