Як ми бачили в статті про 4 прості методики для покращення позиціонування вашого веб-сайту, розмір і вага зображень суттєво вплинуть на швидкість завантаження вашої сторінки.
Повільна швидкість завантаження змусить людей швидше покидати вашу сторінку, що безпосередньо вплине на ваші продажі та вкаже на Google, що взаємодія з користувачем не дуже привітна.
Якщо сторінка, про яку ми говоримо, є сторінкою товару, вплив може бути негайним. Amazon провела дослідження, в якому підрахувала, що «приблизно через кожні 3 секунди, що перевищує кількість завантажених кожної її сторінки, вони втрачають від 5% до 7% річних продажів» (Джерело: Fast Company)
За додаткову секунду завантаження сторінки вони можуть втрачати 16 мільярдів щороку. Лише за секунду.
Поговоримо про важливість швидкості заряду .
Гаразд ... Я знаю, ми не говоримо про ці цифри у нашому бізнесі, але річний вплив 5% або 7% дуже великий, щоб щось просте для поліпшення.
Тому сьогодні я хочу поетапно показати вам, як змінити розмір і вагу зображення, перш ніж завантажувати його на свій веб-сайт.
Тому що щось таке, що здається таким простим, може мати величезний вплив .
Це стосується ВСІХ зображень, які у вас є. Будь то у вашому домі, фотографії кожного вашого товару або кожна фотографія у статтях, якщо у вас є блог.
Уявімо, що ви сфотографуєте новий продукт, який ви хочете завантажити у свій інтернет-магазин. Ви завантажуєте фотографію з камери та зберігаєте на комп’ютері.
Уявімо, що ви продаєте сумки та гаманці, і ось це фото:
Коли ви завантажуєте його з камери, зображення матиме певний розмір і вагу.
Щоб дізнатись, що це таке, перейдіть до розділу "Отримати інформацію":
У цьому випадку зображення важить 977 КБ і має розмір 2304 x 1536 пікселів.
Тепер уявімо, що це ваш Інтернет-магазин, і ось як виглядає типова сторінка ваших товарів:
Наприклад, зображення в цьому випадку квадратне. Щоб зберегти узгодженість усіх ваших продуктів, ми повинні завантажувати їх у тих самих розмірах.
В адміністраторі вашого магазину ви побачите, який саме цей розмір залежить від шаблону, який ви використовуєте, але припустимо, це 1000 x 1000 пікселів.
1000 х 1000 пікселів означає, що це зображення матиме 1 000 000 пікселів інформації для обробки. Завантаження цього займе більше часу, ніж зображення 800 х 800 пікселів, але менше 1500 х 1500 пікселів.
Як ми бачили на початку, у нас є оригінальна фотографія розміром 2304 x 1536 пікселів, тому перше, що ми збираємося зробити, це відрегулювати ці вимірювання, щоб довести її до 1000 x 1000, а потім ми зменшимо вагу.
Якщо ви знаєте, як користуватися Photoshop, ви можете це зробити там, але я збираюся показати це за допомогою https://www.canva.com/, який є безкоштовним і для мене набагато простішим у використанні.
1 - Ви натискаєте "використовувати спеціальні розміри"
два - Доповніть потрібний розмір, дотримуючись цього прикладу 1000 х 1000, виберіть пікселі та натисніть "Дизайн":
3 - На наступному екрані ви побачите білий квадрат розміром 1000 х 1000, в який ви збираєтеся помістити зображення свого товару:
4 - Потім тиснеш на "Завантажити власне зображення" і завантажуєш оригінальну фотографію, яку маєш на своєму комп’ютері:
5 - Після завантаження фотографії перетягніть її в білий квадрат:
6 - У цьому прикладі, оскільки зображення прямокутне, у мене є багато порожнього місця вгорі та внизу, тому останнім кроком є збільшення зображення за допомогою миші, поки воно не займе весь простір:
7 - Коли зображення буде таким, як вам подобається, натисніть кнопку "Завантажити", завантажте та збережіть на своєму комп'ютері:
Перший крок готовий, ваша фотографія вже потрібного розміру!
Цей крок набагато швидший, оскільки ми маємо безкоштовні програми, які з радістю допомагають нам це робити, не втрачаючи якості зображення. Він буде важити набагато менше, але на вашому веб-сайті він і надалі буде виглядати ідеально.
Чим менше вона важить, тим швидше завантажується ваша сторінка, і тим більше людей буде її переглядати.
Для цього використовується кілька програм, одну з яких я використовую: https://tinypng.com/
1 - Ви просто перетягуєте зображення або зображення, до яких ви хочете схуднути, до вікна, яке там з’являється:
два - Він автоматично почне стискатися і точно повідомить, який відсоток зниження ваги він зробив:
У цьому випадку він знизив його з 677 КБ до 102 КБ, що на 85% менше. 🙂
3 - Ви натискаєте "завантажити" або "завантажити все", якщо ви завантажили кілька зображень і зберегли їх на своєму комп'ютері.
Розумні! Тепер у вас є зображення правильного розміру та набагато меншої ваги.
Якщо ви хочете продовжувати зменшувати вагу ще більше, ви можете завантажити це зображення ще раз, але продовжуйте перевіряти, що ви не зменшуєте його настільки, що в підсумку втрачає якість.
Тепер, коли ви знаєте, як змінити розмір і вагу зображення, ви можете застосувати цей самий процес до всіх зображень на вашому веб-сайті!
Таким чином сторінки завантажуватимуться набагато швидше, а також матимуть візуальну узгодженість, оскільки всі продукти завантажуватимуться з однаковими розмірами .
Сподіваюсь, цей маленький підручник про те, як змінити розмір та вагу зображення, вам допоміг, і будь-які запитання щодо будь-якого з цих кроків дайте мені знати 🙂