Як оптимізувати зображення і фото для сайту інтернет-магазину, створюємо інтернет магазин самі з

Зліва зображення до оптимізації, а праворуч після.

У мене теж не вийшло знайти 10 відмінностей, так як їх просто немає. Власне, до чого це я взагалі?

Для початку зрозуміємо навіщо взагалі треба це робити?

Адже всі ми з вами боремося за якість фотографій в картках товарів і на сайті в цілому, але мало хто замислюється про те, що це може призвести і до негативних наслідків. Часто бачу як власники магазинів завантажують фото по 5 МБ відразу після фотосесії до себе в магазин, а потім дивуються чому їх сайт так довго завантажується.

Причому це бачать не тільки користувачі, це також успішно «січуть» і пошукові системи. Наприклад, у Google є відмінний сервіс Google PageSpeed, який легко знаходить такі помилки і ставить низьку оцінку сайту:

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

Тому в сьогоднішній статті я хочу вам розповісти про просту методику оптимізації зображень як до. так і після завантаження їх на сайт. Цією помилкою «грішать» майже всі сайти, які потрапляють мені в роботу.

Вам НЕ потрібно підключення будь-яких модулів на сайті, так як вся оптимізація буде виконана на вашому комп'ютері пакетно. Тобто не доведеться обробляти кожне зображення вручну.

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

Щоб зрозуміти чи є актуальною взагалі це завдання для вас, проведіть експеримент.

Читайте також: Як відстеження пошуку по сайту може підняти вам продажу?

крок №2
Беремо три посилання з вашого сайту:

1. Головна сторінка
2. сторінка каталогу
3. сторінка товару

По черзі перевіряємо посилання в тест і дивимося які результати будуть видаватися.

Якщо ви побачите в звітах «Оптимізувати зображення»:

Те перевірте які зображення Google рекомендує оптимізувати. Шлях до цього зображення буде показаний в звіті.

І якщо серед них будуть фото товарів та / або великі банери на вашому сайті, то час приступити до їх оптимізації.

Що таке оптимізація зображень?

Порівняйте дві фотографії наших піжам.

Фото №1.
2640х3960 пікселів, розмір 4.5 мегабайта, відразу після фотосесії. Можете скачати і перевірити розмір.

Фото №2.
682х1024 пікселів, 73 кілобайт. Скачайте і перевірте :)

Чи бачите ви різницю між ними на своєму екрані? Тільки якщо дуже придивитися, то можна побачити різну глибину кольору.

Давайте я вам навіть поруч ці фото поставлю:

Різниця в розмірі фотографії в 60 разів! А для покупця зовнішньої різниці ніякої.

Так що суцільні плюси:

1. Менше розмір - швидше завантажується;
2. Менше розмір - якість то же;
3. Менше розмір - задоволені пошукові системи.

Тепер давайте зрозуміємо як це робити.

Яку я використовую програму для оптимізації зображень?

У цих справах мені допомагає безкоштовна програма XnConvert. Завантажити її можна тут. Працює під Windows / Linux / Mac.

Як приклад візьму папку з зображеннями з однією з наших фотосесій. 50 фотографій загальним розміром в 164 мегабайта:

крок №1
Завантажуємо і встановлюємо програму. На першій вкладці додаємо файли або папку в якості вхідних даних.

крок №2
Налаштовуємо 3 правила в цій програмі для оптимізації зображень.

На другій вкладці натискаємо «Додати дію» -> «Зображення» -> «Видалення метаданих»

Читайте також: Як відкрити інтернет-магазин?

Отримуємо таку картинку:

Знову «Додати дію» -> «Зображення» -> «Зміна кольору»

Налаштовуємо як на скріншоті:

Знову «Додати дію» -> «Зображення» -> «Зміна розміру»

Розмір в пікселях ви можете підібрати під себе. Якщо ваше фото менше, ніж 1024 пікселів по найбільшій стороні, то воно, навпаки, буде розтягнуто:

крок №3
Вказуємо папку куди потрібно буде вивантажити оптимізовані зображення і натискаємо «Перетворити»

крок №4
порівнюємо результат

Нагадаю, що до цього розмір усіх фотографій був 164 мегабайта, а став ...

Різниця в 32 рази. при тому, що візуально якість фотографій не змінилося.

Як оптимізувати зображення і якою програмою ми розібралися, тепер зрозуміємо що робити вам прямо зараз.

Зазвичай ситуації дві:

1. Зображення ще не завантажені на сайт, треба їх оптимізувати перед завантаженням. В такому випадку необхідно лише дотримуватися по покрокової інструкції вище і потім завантажуйте;
2. Зображення вже завантажені і треба їх їх оптимізувати з мінімальними зусиллями. У такому випадку за допомогою FTP клієнта вивантажуєте зі свого сайту зображення на комп'ютер, оптимізуєте їх (не міняйте назву фото!) І завантажуєте назад. На жаль, XnConvert не вміє зберігати структуру папок, тому доведеться оптимізувати кожну папку окремо. Але це все одно швидше, ніж робити поштучно.

Які ще варіанти існують?

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

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

крок №1
Завантажуємо фото, перетягуючи в робочу область.

крок №2
Викачуємо оптимізоване фото.

В результаті той же фото мало розмір 4.5 мегабайта, а стало 400 кілобайт без втрати якості. Розмір в пікселях залишився колишнім.

Читайте також: Як має виглядати лист підтвердження замовлення - приклади і шаблон.

Роблю висновок, що онлайн оптимізація зображень буде корисна тільки у випадках коли треба «тут і зараз».

Які висновки?

Досить сказати, що це безпосередньо впливає на продажі.

Причина №1
Швидкість роботи сайту істотно зростає, так як не доводиться довантажувати зайві дані. Згадайте самі, чи комфортно вам здійснювати покупки на повільно працюючому сайті?

Причина №2
А користувачі з мобільних пристроїв з мобільним інтернетом будуть вдячні вам подвійно.

Причина №3
Самі файли сайту будуть менше займати місця на хостингу. А тут копійка рубль береже.

Причина №4
Пошукові системи не будуть високо ранжувати повільно працюють сайти. А їх алгоритми легко вирахують такі сайти.

Так що оптимізуйте зображення на своєму сайті, виженете його через тест PageSpeed ​​і ви побачите як у вас виросла оцінка сайту. Критичних помилок немає:

І візьміть собі за правило оптимізувати зображення перед їх завантаженням на сайт.

Буду радий відповісти на будь-які ваші питання :)

• Схожих статей, не знайдено.

Андрій, вітаю. Корисно написав все. Є один момент: здається мені, якщо робити фото до 70кб, то при збільшенні лупою, якість буде кульгати.
Ми методом проб і помилок прийшли до висновку, що 150-250 кб - найбільш прийнятний варіант.

При всій моїй досвіді, не відразу зрозумів, що потрібно проскролліть вниз, щоб побачити саму форму підписки. Мені здається, було б краще зробити форму зліва, а всі «плюшки» праворуч))) в одному екрані без скролла.

Так, тут треба експериментувати. Якщо чесно, я був навіть здивований, що всього 70кб вийшло.
За сторінці підписки тебе зрозумів, все поправив. Я просто дивився на великому моніторі і в мене все влазило на один екран. В черговий раз зрозумів, що судити по собі небезпечно.

Доброго времени суток, Андрію!

Вікторія, дякую! Щиро бажаю вам успіхів і буду радий допомогти в майбутньому :)