WordPress оптимізація зображень: етапи і підходи
- Чому так важлива WordPress оптимізація зображень
- Ваш сайт буде завантажуватися швидше
- Ваш сайт буде займати менше місця на сервері
- Ваш рейтинг в пошукових системах покращитися
- 5 способів WordPress оптимізації зображень
- 2. Стискаємо зображення
- Інструменти оптимізації зображень вручну
- Інструменти автоматичної оптимізації зображень
- Модулі WordPress для стиснення
- 3. Змінюємо розмір зображень для найкращого їх відображення
- 4. Перевіряємо акуратність обрізки зображення
- 5. Покращуємо SEO зображення
- Оптимізація тексту заголовка зображення
- Установка тега ALT
- Використання правильного імені файлу
- На закінчення
Без зображень більшість сайтів будуть виглядати як масивна стіна тексту. Для залучення уваги відвідувачів дуже важливі якісні зображення. Вони розбавлять контент і зроблять його більш зручним для сприйняття і читання. Не кажучи вже про додаткове трафіку від пошуку зображень. Але, щоб мати всі ці переваги, зображення повинні бути перш за все правильно оптимізовані.
Більшість власників сайтів на WordPress закінчують процес на завантаженні не оптимізованих для веб картинок, які можуть викликати більше шкоди, ніж користі.
Нижче ми розповімо вам чому обов'язково потрібно проводити оптимізацію зображень і вивчимо п'ять способів виконати процедуру WordPress оптимізація зображень.
Чому так важлива WordPress оптимізація зображень
Чи не оптимізовані зображення на сайті приведуть до неймовірно низької швидкості завантаження і пропускної здатності. Зображення можуть займати багато місця на диску, і велика частина з них може виявитися не потрібною.
Ось кілька основних причин для оптимізації зображень.
Ваш сайт буде завантажуватися швидше
Повільне завантаження сайту не дає користувачам нормально з ним взаємодіяти. Це призводить до небажання користувачів перебувати на такому сайті і швидше його покинути. Ви не можете очікувати від своїх відвідувачів, що вони будуть залишатися і чекати завантаження ваших зображень.
Ваш сайт буде займати менше місця на сервері
Зазвичай, ви не можете вплинути на обмеження по дисковому простору, що надається вашим хостинг-провайдером.
Але, якщо ви зменшите розмір свого сайту, це неодмінно добре позначиться на швидкості його роботи.
Ви можете зменшити розростання вашого сайту і зробити його більш компактним і продуктивним. До того ж, зменшити вартість сервера, якщо ви платите за зберігання.
Ваш рейтинг в пошукових системах покращитися
Google та інші пошукові системи не люблять повільні сайти.
Оптимізуючи свої зображення, ви збільшите продуктивність, а значить і ваш рейтинг.
З оптимізованими картинками Google буде індексувати і ранжувати їх значно швидше, це дасть прекрасний приріст трафіку.
Оптимізація ваших зображень не повинна бути складною або времязатратной і може стати вашим регулярним заняттям. Чи не оптимізовані зображення можуть погано позначитися на успішності вашого сайту.
Нижче ми розповімо вам, як ви може виконати оптимізацію своїх зображень в WordPress таким чином, щоб зберегти якість і не жертвувати продуктивністю.
5 способів WordPress оптимізації зображень
Ваша мета по оптимізації зображень на сайті - зменшити розмір файлу без зниження якості зображення. Ідеального способу для оптимізації немає, але замість цього ви можете знайти баланс.
Є багато підходів, які ви можете застосувати для оптимізації зображень. Ви навіть можете скомпонувати кілька, щоб домогтися самого маленького можливого розміру файлу.
Читайте далі, щоб дізнатися п'ять різних методів, які ви зможете легко застосувати для оптимізації зображень для веб.
Перед початком оптимізації переконайтеся, що ви вибрали правильний формат (розширення) файлу. Правильний формат файлу вплине на розмір файлу і можливість його оптимізації.
Два найбільш поширених формату 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 неодмінно полюбить ваш сайт ще більше.
Він буде завантажуватися швидше, ваші відвідувачі будуть задоволені, а також зросте рейтинг в пошукових системах.
При роботі зі стисненням важливо підібрати правильні настройки і інструменти, поки не знайдете ідеальний баланс якості зображення і розміру файлу. Це не завжди простий процес, але він буде коштувати вашій швидкості завантаження і перегляду зображення і сайту в цілому.
Оптимізація ваших зображень поліпшила швидкість завантаження і продуктивність вашого сайту? Поділіться своїм досвідом в коментарях нижче.
Оптимізація ваших зображень поліпшила швидкість завантаження і продуктивність вашого сайту?