3 прості методи ефективної оптимізації веб-зображень
40% людей залишають сайт, який завантажується важче 3 секунд, і кожна отримана секунда збільшує коефіцієнт конверсії на 7% і покращує досвід.
Відсутність оптимізації зображення - головний фактор, для якого важко завантажити сайт. Дізнайтеся, як ефективно оптимізувати свої фотографії, щоб опублікувати їх на своєму сайті за допомогою стиснення, зміни розміру та SEO-оптимізації. Крім того, ви можете заощадити на 70% більше місця на сервері.
№1. Стиснення зображення - швидше завантажуйте сайт на 40-70%
Це найважливіший процес оптимізації зображень із навіть більшою цінністю, ніж зміна розміру зображень. Крім того, якщо ваш сайт в основному візуальний, ви можете заощадити 50% місця на сервері та пропускну здатність, що споживається щомісяця.
Що таке стиснення/стиснення зображення
Стиснення зображення має на меті усунути інформацію про тип використовуваної камери, об’єктив, фокус, автора та багато інших деталей. У той же час відбувається процес стиснення та оптимізації якості зображення без видимих втрат якості.
Після того, як дані, які нам не потрібні, буде видалено, стиснення зображення також має на меті оптимізувати якість зображення без значних втрат якості.
Чому корисно стискати зображення
Стиснення фотографії зменшується до 40% від розміру вже оброблених фотографій. Наприклад, якщо ви використовуєте pixabay.com або 12 інших безкоштовних сайтів зображень для свого блогу, ви можете заощадити в середньому 30-40% кожного зображення.
У випадку фотографій з камери стиснення економить до 70%. Таким чином, стиснення зменшує розмір зображень, корисних як для швидшого завантаження сайту, так і для економії місця на сервері, і може представляти для вас особливий інтерес, якщо ваш сайт призначений для туризму, кулінарії, дизайну або здебільшого візуального.
Методи компресії
Є два основні варіанти: коли ви використовуєте платформу WordPress, ви можете встановити плагін TinyJPG, будь-яке завантажене вами зображення буде автоматично стиснуто. Якщо у вас є сайт, створений повністю з нуля, або ви просто хочете стиснути зображення, ви можете скористатися онлайн-версією tinyjpg.com.
Спосіб 1: Стиснення зображень за допомогою tinyjpg.com
39% стиснення для 5 зображень на pixabay.com.
79% стиснення для 5 фотографій із камери.
Ви можете перетягувати до 20 зображень одночасно, і за кілька секунд їх розмір значно зменшується.
веб-сайт
перетягни та Впусти
Зменшення розміру зображення на 40-80%
Перевірте фотографію прямо зараз, щоб точно побачити відсоток, який ви можете заощадити.
Спосіб 2: Автоматичне стиснення зображення за допомогою плагіна WordPress TinyJPG
Плагін WordPress
повністю автоматичний процес
Зменшення розміру зображення на 40-80%
Порівняльний плагін даних VS Інтернет-версія
Плагін WordPress виявляється більш ефективним, як за рахунок кращого стиснення, економії декількох КБ на додаток до онлайн-версії, так і за рахунок економії часу, при цьому процес автоматичного завантаження зображень на сайт:
325,5 КБ оригінал: 142,2 КБ - tinyjpg.com, 125 Кб - WordPress
208 КБ оригіналу: 86,6 КБ - tinyjpg.com, 85 КБ - WordPress
Оригінал 133,7 КБ: 100,1 КБ - tinyjpg.com, 98 КБ - WordPress
Оригінал 162,4 КБ: 128,5 КБ - tinyjpg.com, 119 КБ - WordPress
256,2 КБ оригінал: 208,4 КБ - tinyjpg.com, 203 КБ - WordPress
# 2.Змініть розмір малюнків
Зміна розміру зображення стосується зменшення розмірів, виражених у пікселях, ширині та висоті. Це також призводить до зменшення розміру зображення в КБ (кілограм приманки). Після зміни розміру також необхідне стиснення, що призводить до значного зменшення фотографії.
Змінення розміру фотографій в Інтернеті
Ви можете змінити розмір своїх фотографій, зроблених із камери, за допомогою picresize.com.
Змінення розміру офлайн-фото
Ви можете використовувати безкоштовне програмне забезпечення PIXresizer для зменшення розміру фотографій в режимі офлайн
Який оптимальний розмір для мого блогу?
Оптимальний розмір відрізняється від теми до теми та від сайту до сайту.
Щоб знайти точний розмір WordPress, перейдіть на сторінку, де розміщено зображення, і натисніть Редагувати зображення> Деталі зображення> Розмір> Великий.
Тут ви знайдете вказаний розмір, він відповідає вибраній вами темі і може варіюватися від 600 до 1024 пікселів. Отримавши доступ до аналітичних даних, ви можете побачити особливості своїх відвідувачів, включаючи рішення, з яких вони переходять на ваш сайт. Швидше за все понад 55% користуються мобільним телефоном.
Ідеальний розмір: 768 пікселів
Більшість тем WordPress використовують фреймворк Bootstrap. Так само як і презентаційні сайти, зроблені після 2015 року. Bootstrap допомагає створювати чуйні сайти і має точку переходу з мобільного на планшетний при ширині 768 пікселів.
Цього розміру достатньо для відображення зображень як для блогу з двоколонковою структурою, так і для одного, як на мобільному, так і на планшетному ПК, ноутбуці, робочому столі. Якщо у вашій темі немає повноформатних зображень на робочому столі чи інших особливих вимог, тоді ширина 768 пікселів - це розмір, який допоможе отримати максимальну оптимізацію.
№3. Оптимізація зображень для SEO
Для кожного опублікованого вами зображення ви можете сприяти оптимізації сторінки, а також відображенню зображень Google.
Значимість картинок
Фотографії повинні підтримувати те, що ви сказали в назві та змісті сайту. Як для читачів, так і для Google, який наразі досить добре уявляє, що таке фотографія.
Перейменування картинок
Після того, як ви знайшли правильне зображення, корисно змінити його назву. Замість 38732145_IMG ви можете поставити слова, для яких ви хочете бути оптимізовані, наприклад optimizare_imagini_web.jpg у випадку з цією статтею.
Атрибут ALT
Це атрибут, який Google оцінює, коли зображення недоступне, цей текст відображається. Крім того, люди із вадами зору дізнаються більше про образ.
Атрибути заголовка, заголовка, опису Якщо ви використовуєте платформу WordPress, ви можете легко заповнити ці атрибути, щоб надати більше інформації про свою фотографію.
Висновок
Збільшення швидкості завантаження сайту призводить до кращого досвіду, збільшення коефіцієнта конверсії, утримання та повернення на сайт. Кожна отримана секунда збільшує коефіцієнт конверсії на 7% і покращує досвід.
Фотографії, додані на веб-сайти, часто обробляються, що є основним фактором, чому сайт важко завантажувати. Навіть використовуючи вже оброблені фотографії, ви можете отримати значне зменшення.
Ефективна оптимізація зображення має на увазі 3 аспекти:
1. стиснення, завдяки якому можна отримати на 40-70% зменшення розміру зображення в КБ.
2. Змініть розмір і надайте зображення у розмірах вашої теми чи сайту у пікселях.
3. SEO оптимізація, за допомогою якої ви можете залучити відповідний трафік.
Застосовуючи ці речі, для яких вам не потрібні технічні знання, ви можете значно покращити швидкість завантаження свого сайту, заощадити місце на сервері та збільшити кількість пошуків у Google. Крім того, приємний досвід перегляду приваблює задоволених відвідувачів.
Підпишіться, щоб отримувати товари, курси та знижки безпосередньо у своїй поштовій скриньці