Оптимізуйте свої зображення для 3-байтового SEO
Опубліковано 2 січня 2017 року
Навіщо оптимізувати розмір і вагу ваших зображень ?
Зменшуючи вагу зображення, ми пришвидшуємо час його завантаження з веб-сайту. Це має два ефекти:
- Підвищити якість сайту та відповідність стандартам SEO для пошукових систем,
- Покращити взаємодію з користувачем: сторінка завантажується швидше, зменшує розлад очікування, зменшує ризик того, що користувач покине сторінку до закінчення завантаження.
Скорочення часу завантаження зображень - це поліпшення, яке легко зробити, не займає багато часу і не вимагає великих навичок.
Різниця між 2 зображеннями, оптимізованими чи ні
До стиснення (876кб)
Після стиснення (169kb)
Дізнайтеся більше про час завантаження сторінки
Коли ви завантажуєте веб-сторінку, браузер (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge тощо) отримує ресурси, присутні на цій самій сторінці:
- Таблиця стилів (CSS): керує дизайном сторінки (шрифт, колір тексту, організація елементів тощо)
- Сценарії (JS): покращує взаємодію з динамічними функціями (наприклад, оновлення діаграми кожні 5 секунд без перезавантаження сторінки)
- Зображення (JPG, JPEG, PNG, GIF тощо), усі зображення, присутні на сторінці
Залежно від швидкості підключення відвідувача до Інтернету, час завантаження цих різних ресурсів буде довшим або коротшим.
Сьогодні ми можемо класифікувати швидкості з'єднання за цими групами:
200 кб/с): підключення смартфона до 3G, Wi-Fi загального користування, ADSL за межами міських районів, Шлях (
500 кб/с): Wi-Fi у міських районах, підключення смартфона 4G,
Таким чином, зображення розміром 1 Мб займе 5 секунд для завантаження з повільним з'єднанням, 2 секунди із середнім з'єднанням і менше секунди із швидким з'єднанням.
Помножте це на кількість зображень на вашій сторінці, і ви швидко побачите, як це може негативно вплинути на навігацію на вашому веб-сайті.
Запам’ятайте одне: Те, що у вас складається враження, що веб-сайт швидко завантажується, коли ви перебуваєте вдома чи в бізнесі, не означає, що це робиться для всіх ваших відвідувачів.
Керуйте розміром ваших зображень
Тепер, коли ви досвідчені користувачі, першим кроком є звернення уваги на розміри зображення.
Спочатку трохи інформації:
- 24-мегапіксельна фотографія: 6000 × 4000
- Екран комп'ютера Full HD: 1920 × 1080
- Класичний екран ноутбука: 1368 × 768
Тому зображення в повну ширину не має підстав бути більшим за 1920x1080px. На практиці це інша справа, що тіло сторінки рідко має ширину більше 1000 пікселів, тому теоретично ваші зображення не повинні перевищувати це значення
Змініть розмір ваших зображень:
- У Photoshop: використовуйте "розмір зображення" на вкладці зображення.
- Без програмного забезпечення для обробки зображень існує декілька інструментів в Інтернеті, наприклад, ви можете використовувати інструмент з Bloggif (http://www.bloggif.com/resize). Вкажіть максимальну ширину 1000 пікселів та максимальну висоту 1000 пікселів
Інструменти та методи для ефективного зменшення ваги зображень
Існує кілька методів стиснення зображень, локально за допомогою програмного забезпечення (наприклад, Photoshop) або в Інтернеті (наприклад, TinyJPG)
Маленька точка щодо форматів зображень
У цій статті формат означає тип файлу, а не портретний/альбомний формат. Тож JPG - це формат зображення, такий як GIF та PNG.
Ці формати мають свої переваги та недоліки:
GIF ідеально підходить для невеликих зображень і підтримує прозорість
JPG дуже добре працює при середньому та великому стисненні зображення, але не підтримує прозорість
PNG зберігає всі деталі фотографії та підтримує прозорість (з альфа-каналом), однак вона важча за JPG
Як зробити вибір:
Для фотографії віддайте перевагу JPG, для менш складного зображення (наприклад, логотипу) PNG може бути потужнішим.
Будьте обережні, не забудьте спочатку змінити розмір зображення, перш ніж стискати його !
Зменште вагу зображення за допомогою фотошопу
Якщо у вас є програмне забезпечення Photoshop, вам потрібно буде скористатися інструментом «Зберегти для Інтернету та пристроїв», який знаходиться на вкладці «Файл». Якщо ви не можете його знайти, скористайтеся комбінаціями клавіш: ALT + CTRL + SHIFT + S (Windows) Option + Shift + Command + S (MacOS)
Потім відкриється вікно:
Тут обраний вихідний формат - JPEG, зображення велике (960px у ширину та 698px у висоту) та складне.
Вибрано якість 20, саме цей параметр ви повинні змінювати, чим нижче це значення, тим більше зображення буде втрачати в деталях, але вага буде дуже зменшений (ви можете побачити вагу внизу ліворуч на зображенні, тут: 168,7 тис.).
При якості 100 це зображення становить 855 кб, тож це приріст понад 80%.
Інтернет-засоби стиснення зображень
Якщо у вас немає Photoshop, дуже потужні інструменти доступні безкоштовно в Інтернеті.
Тут ми будемо використовувати TinyJPG, стиснення дуже хороше, майже не втрачаючи якості зображення.
Спочатку перейдіть на https://tinyjpg.com/ і натисніть на кнопку "Опустити ваші файли .png або .jpg сюди"
Як зазначено під кнопкою, ви можете додати 20 зображень одночасно, якщо кожне з них важить менше 5 Мб.
Після вибору нашого зображення воно завантажується на сервер TinyJPG, який стискає його і дозволяє побачити ступінь стиснення:
TinyJPG не дозволяє вибрати якість, однак стиснення залишається дуже хорошим (тут 73%), якість зображення дуже мало погіршується.
Щоб отримати своє зображення, натисніть на посилання "завантажити" в кінці рядка.
Зменшення розмірів та стиснення зображення дозволяє пришвидшити завантаження сторінки, зробити користувальницький досвід приємнішим, зменшити вплив на сервер. Це робиться або за допомогою програмного забезпечення, такого як Photoshop, або за допомогою онлайн-інструментів (Bloggif та TinyJPG).