WordPress оптимізація зображень: етапи та підходи

Last Updated on: Липень 24th, 2018Elena B. 8 Хв Читання

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

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

Нижче ми розповімо вам чому обов’язково потрібно проводити оптимізацію зображень і вивчимо п’ять способів виконати процедуру WordPress оптимізація зображень.

Зміст

  • Чому так важлива WordPress оптимізація зображень
  • 5 способів WordPress оптимізації зображень
  • Висновок

Чому так важлива WordPress оптимізація зображень

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

От декілька основних причин для оптимізації зображень.

Ваш сайт буде завантажуватися швидше

Повільне завантаження сайту не дає користувачам нормально з ним взаємодіяти. Це приводить до небажання користувачів перебувати на такому сайті і швидше його покинути. Ви не можете очікувати від своїх відвідувачів, що вони будуть залишатися і чекати завантаження ваших зображень.

Ваш сайт буде займати менше місця на сервері

Звичайно, ви не можете вплинути на обмеження дискового простору, надану вашим хостинг-провайдером.

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

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

Ваш рейтинг в пошукових системах покращитися

Google та інші пошукові системи не люблять повільні сайти.

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

З оптимізованими картинками Google буде індексувати і ранжувати їх значно швидше, це дасть прекрасний приріст трафіку.

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

Нижче ми розповімо вам, як ви може виконати оптимізацію своїх зображень в WordPress таким чином, щоб зберегти якість і не жертвувати продуктивністю.

5 способів WordPress оптимізації зображень

Ваша мета оптимізації зображень на сайті – зменшити розмір файлу без зниження якості зображення. Ідеального способу для оптимізації немає, але замість цього, ви можете знайти баланс.

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

Читайте далі, щоб дізнатися п’ять різних методів, які ви зможете легко застосувати для оптимізації зображень для веб.

1. Вибираємо правильний формат файлу

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

Два найбільш поширених формату JPEG та PNG.

JPEG-і зазвичай використовуються для фотографій і в цілому картинок з причини:

  • порівняно меншого розміру,
  • однорідного якості зображення,
  • можливості змінити розмір або стискання без втрати якості.

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

Крім PNG і JPEG ви можете виявити ще дуже багато типів файлів. Але вони не рекомендуються для використання у веб.

Звичайно, є винятки. Ви напевно помітили велику популярність формату GIF в останні роки. Це невелике анімоване зображення, подібне відео, може бути використано для розширення вашого існуючого контенту. Якщо ви плануєте додати невелику відео, зробіть його у форматі GIF, а не MP4.

2. Стискаємо зображення

При стисненні зображення вам необхідно знайти баланс між якістю стиснення і розміром зображення.

При мінімальному стисненні ви отримаєте більший розмір файла, але зображення більш високої якості. При високому рівні стиснення розмір зображення буде дуже невеликим, але якість зображення буде страждати.

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

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

Нижче ми відчуваємо інструменти для використання локально на комп’ютері, онлайн у вебі і навіть деякі плагіни WordPress, які ви можете використовувати для оптимізації зображень без втрати якості.

Інструменти оптимізації зображень вручну

Десктопні інструменти (встановлені на вашому локальному комп’ютері) пропонують вам більше налаштувань управління оптимізацією. Якщо ви, наприклад, працюєте в редакторі зображень на зразок Photoshop, тоді вам може підійти більше цей варіант.

Найбільш популярні декстоп інструменти:

  • Adobe Photoshop – Photoshop має свій власний будований інструмент стиску зображень, який готує їх до публікації в інтернеті.
  • Gimp – безкоштовна альтернатива Photoshop, має круту криву навчання, але теж має вбудовану оптимізацію.
  • Affinity Photo – це сама дешева альтернатива Photoshop, з вбудованою функцією оптимізації.
  • Paint.NET – редактор картинок для користувачів Windows, впевнена альтернатива Photoshop і має стиснення зображень.

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

Інструменти автоматичної оптимізації зображень

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

Ці інструменти прекрасні, якщо ви не хочете витрачати час на вивчення подробиці роботи редакторів.

Деякі найпоширеніші редактори – JPEGmimi і TinyPNG.

При цьому все, що вам потрібно зробити, це завантажити свої фотографії, інструмент запуститься, і ви скачаєте оптимізовані фотографії.

Якщо ви віддаєте перевагу запускати частину програми на своєму комп’ютері, тоді вам можуть підійти ImageOptim, OptiPNG і Trimage.

Плагіни WordPress для стиснення

У WordPress є плагіни для вирішення різних завдань.

Наступні плагіни будуть оптимізувати ваші зображення при завантаженні і навіть оптимізувати будь-які зображення вже в медіа-бібліотеці:

  • Imagify Image Optimizer – Цей плагін пропонує кілька рівнів стиснення, зміна розміру зображення, відновлення зображень і багато іншого.
  • ShortPixel Image Optimizer – Це безкоштовний плагін дозволяє вам стискати до 100 зображень на місяць і обробляти кілька різних форматів зображень. Крім того, він має вбудовану функцію відновлення і групову оптимізацію.
  • WP Smush – Цей плагін буде оптимізувати зображення при їх завантаженні на ваш сайт, а також оптимізувати існуючу медіа-бібліотеку. Це зменшить розмір ваших зображень, не надаючи впливу на якість.
  • Optimus Image Optimizer – Це легкий плагін оптимізує ваші зображення за допомогою стиснення без втрати загальної якості, просто за рахунок зменшення розміру файлу.

3. Змінюємо розмір зображень для найкращого їх відображення

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

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

Наприклад, скажімо, вам потрібно зображення 300×300 пікселів, але замість цього ви завантажуєте зображення розміром 3000×3000 пікселів і перекладаєте на тему WordPress завдання правильного відображення зображення.

Це збільшить навантаження на канал і призведе до повільне завантаження картинки.

Кращим підходом буде визначити необхідний розмір зображення відповідно до вимог вашої теми та підготувати його відповідним чином. Потім пропустити його через інструмент оптимізації та завантажити своє зображення.

4. Перевіряємо акуратність обрізки зображення

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

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

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

Виконуючи занадто багато змін в адмін консолі, ви можете зберегти декілька версій одного і того ж файлу. Це збільшить навантаження на сервер і загальний розмір вашого сайту.

5. Покращуємо SEO зображення

Ви знали, що можете оптимізувати свої зображення, щоб поліпшити рейтинг зображень і сайту в пошукових системах?

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

Виконайте наступні дії для поліпшення SEO ваших зображень.

Оптимізація тексту заголовка зображення

Текст зображення з’являється, коли читач наводити курсор на зображення. Це не дуже важливо для SEO, але цей невеликий трюк може поліпшити ваш користувальницький інтерфейс.

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

Наведіть курсор на зображення і натисніть на іконку олівця, яка відкриє вікно з налаштуваннями Змінити для редагування.

У розділі Додаткові настройки ви зможете знайти і відредагувати текст заголовка.

Установка тега ALT

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

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

Щоб змінити текст alt зображення, перейдіть в візуальний редактор і наведіть вказівник миші на зображення, яке ви поставили. Ще раз натисніть на значок олівця, який відкриє параметр Змінити.

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

Використання правильного імені файлу

Ім’я вашого файлу зображення може вплинути на рейтинг пошуку зображень в Google, що є прекрасним додатковим джерел трафіку.

Замініть безглузде ім’я файлу на назву, що містить ключове слово або відображає суть того, що на ньому зображується.

Перш ніж ви завантажте картинку в WordPress приділіть трохи часу для визначення відповідного йому імені.

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

Висновок

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

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

При роботі зі стисненням важливо підібрати правильні налаштування та інструменти, поки не знайдете ідеальний баланс якості зображення та розміру файлу. Це не завжди простий процес, але він буде коштувати вашій швидкості завантаження і перегляду зображень і сайту в цілому.

Оптимізація ваших зображень поліпшила швидкість завантаження і продуктивність вашого сайту? Поділіться своїм досвідом в коментарях нижче.