Оптимізація зображення для SEO

1. Переваги використання зображень на вашому сайті Було багато досліджень щодо переваг зображень на...
2. Який тип файлу зображення слід використовувати?
3. JPEG
4. GIF
5. PNG
6. Роздільна здатність зображення
7. Зменшити розмір файлу зображення
8. Плагіни оптимізації зображення WordPress
9. EWWW Image Optmizer
10. Imsanity
11. Інструменти для стиснення зображень онлайн
12. Використовуйте описові імена файлів
13. Використовуйте описовий текст Alt і текст заголовка
14. Текст заголовка
15. Мапи сайтів зображень
16. Соціальні засоби комунікації
17. Bonus Tip: як додатково стискати мініатюри в WordPress
18. Резюме

Переваги використання зображень на вашому сайті

Було багато досліджень щодо переваг зображень на веб-сторінках. Деякі з ключових висновків:

• Сторінки з зображеннями більш ніж у два рази мають бути спільними в соціальних мережах
  (Джерело: OkDork.com )
• Користувачі більше займаються статтями, які містять зображення, і отримують 94% більше загального числа переглядів, ніж статті без зображень
  (Джерело: JeffBullas.com )
• Сторінки з принаймні одним зображенням працюють краще в органічному пошуку, ніж сторінки без зображень
  (Джерело: Backlinko.com )

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

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

Ось 8 аспектів оптимізації зображень, які обговорюватимуться в цій публікації:
(Натисніть для навігації)

1. Пошук зображень - 7 сайтів, де можна безкоштовно отримати мільйони зображень
2. Використання відповідного типу файлу - коли використовуються типи файлів JPEG, GIF або PNG
3. Роздільна здатність зображення - використовувати зображення з тими ж розмірами, на яких вони відображатимуться
4. Розміри файлів - стискання зображень для швидшого завантаження сторінок
5. Імена файлів - використовуйте описові імена файлів
6. Текст Alt і текст заголовка - завжди використовувати Alt текст і бути описовим
7. Мапи сайтів зображень - збільшити ймовірність виявлення зображень у програмі пошуку зображень
8. Соціальні засоби комунікації - отримати максимальну віддачу від своїх зображень у соціальних мережах

Плюс рада бонусів!

Пошук зображень

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

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

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

1. Flickr.com
2. Freeimages.com
3. Publicdomainarchive.com
4. Unsplash.com
5. Pixabay.com
6. Gratisography.com
7. 500px.com

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

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

Більшість зображень на цьому сайті створюються за допомогою надійного старого інструмента Snipping і швидкого редагування Paint.NET (Вам не потрібні шалені навички Photoshop для простого редагування зображень). Я також використовую Розширення повного захоплення екрана сторінки для Chrome, коли мені потрібно зробити знімок екрана повної веб-сторінки.

Який тип файлу зображення слід використовувати?

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

JPEG

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

Прозорі фони не підтримуються, тому JPEG зазвичай не підходить для логотипів веб-сайту.

JPEG - найкращий варіант для високоякісних фотографічних зображень.

GIF

GIF означає графічний формат обміну. Він підтримує прості анімації, однак, він підтримує тільки 256 кольорів з RGB-спектру в одному зображенні, і в одному кадрі для анімованих GIF-файлів (кожен кадр може використовувати різні 256 кольорів).

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

GIF-файли найкраще використовуються для анімованих зображень. Колірні обмеження в зображеннях GIF роблять їх непридатними для високоякісних фотографічних зображень.

Зверніть увагу: анімовані файли GIF часто мають великі розміри файлів, тому важливо знати розмір файлу, перш ніж використовувати їх на своєму сайті.

PNG

PNG - це Портативна мережна графіка. Він підтримує стиснення даних без втрат і був розроблений як нова, покращена заміна GIF.

PNG підтримує прозорість і широкий діапазон кольорів, наприклад JPEG.

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

Рекомендації: використовуйте JPEG для високоякісних, фотографічних зображень і зображень PNG для прозорих логотипів і зображень з декількома кольорами. Використовуйте анімовані GIF-файли завдяки своїм великим розмірам файлів.

Роздільна здатність зображення

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

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

Різниця розмірів файлу між зображенням шириною 2000px і зображенням у 720px може перевищувати 1 Мб!

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

Див. Приклад на зображенні нижче . Якщо вам потрібне зображення розміром 250 x 250px, не використовуйте велике зображення (наприклад, 500 x 500px) - створіть потрібний розмір зображення - 250 x 250px. Це допоможе зберегти максимально низький розмір сторінки, щоб допомогти вашим сторінкам завантажуватися якомога швидше.

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

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

Зменшити розмір файлу зображення

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

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

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

Налаштування якості зображення в Paint.net:
З якістю, встановленим на 100, це зображення має розмір файлу 95 кБ. У 75 років втрата якості була мінімальною, а розмір файлу зменшився до 28 кБ.

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

Тепер давайте подивимося на деякі плагіни оптимізації зображень WordPress і онлайн-інструменти, де ви стискаєте кілька додаткових кб з розмірів файлів зображень!

Плагіни оптимізації зображення WordPress

WP Smush

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

Безкоштовна версія обмежує "об'ємне" 50 зображень одночасно, що, якщо це добре для невеликих сайтів, але може зайняти деякий час, якщо у вас є тисячі зображень у медіа-бібліотеці. Нова функція WP Smush полягає в тому, що вона перетворить PNG на JPEG, де, на його думку, ви вибрали неправильний тип файлу. Ця функція може призвести до значного скорочення файлів зображень.

Нові зображення автоматично завантажуються.

Платна версія WP Smush дає змогу "супер розчаровувати" зображення для ще менших розмірів файлів і вилучає обмеження "об'ємного розмахування" лише 50 зображень одночасно.

Загалом, WP Smush - це чудовий плагін для оптимізації зображень для початківців, або якщо у вас є обмежений час для оптимізації зображень. Платна версія краще для великих бібліотек зображень.

EWWW Image Optmizer

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

На відміну від WP Smush, EWWW Image Optimizer не має жодних обмежень щодо своєї опції "bulk optimize" - ви можете оптимізувати всю бібліотеку зображень одним кліком.

Як і WP Smush, нові зображення автоматично оптимізуються під час завантаження.

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

Imsanity

Imsanity дозволяє змінити розмір бібліотеки зображень і встановлюють максимальну роздільну здатність для завантаження нових зображень, залежно від того, де вони використовуються.

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

Imsanity дозволяє налаштувати якість JPEG і може бути налаштований для перетворення зображень BMP і PNG у формат JPEG, хоча це може бути не завжди бажаним.

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

Imsanity - це чудовий безкоштовний плагін для WP Smush або EWWW Image Optimizer.

Інструменти для стиснення зображень онлайн

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

Ось два веб-сайти, які можна використовувати для стиснення зображень:

1. TinyPNG.com - для стиснення зображень PNG
2. CompressJPEG.com - для стиснення зображень JEPG

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

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

Називання зображень надзвичайно просте, але це те, що часто пропускається.

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

Наприклад, інформативним і описовим ім'ям зображення буде labrador-puppy-sleeping.jpg не IMG002299.jpg

Приклад 1 іменування описового зображення.

Або Ейфелева вежа-paris-skyline- sunset.jpg не StockImage312864000.jpg

Приклад 2 іменування описового зображення.

Рекомендація: переконайтеся, що імена файлів зображень описові зображення.

Використовуйте описовий текст Alt і текст заголовка

Alt Text

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

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

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

Приклади з текстом Alt:
(приклад змінено з Правила розміщення зображень Google ):

Погано (без тексту Alt):
<img src = ”labrador-puppy-sleeping.jpg” alt = ”” />

Краще (але недостатньо описово):
<img src = ”labrador-puppy-sleeping.jpg” alt = ”щеня” />

Великий (ідеальний короткий опис зображення):
<img src = ”Лабрадор-щеня-сон.jpg” alt = ”Сплячий щенят лабрадору” />

Занадто багато (текст із заправленим ключовим словом):
<img src = ”labrador-puppy-sleeping.jpg” alt = ”щеня, лабрадор, щеня лабрадору, сплячого цуценя, сплячого собаки, сплячого лабрадора” />

Ви можете бачити в цьому прикладі, що « Великий » показує короткий, простий опис зображення - саме це ви завжди повинні прагнути. Ніколи не залишайте ваш текст Alt порожнім, і ви повинні бути більш описовими, ніж використовувати одне слово.

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

Інша річ, на яку слід звернути увагу, що Internet Explorer використовує текст Alt як підказку під час наведення курсору на зображення. Інші веб-переглядачі, наприклад Chrome, використовують текст заголовка зображення як підказку для зображень.

Текст заголовка

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

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

Використовуючи той самий текст Alt і текст заголовка, це нормально.

Примітка: використовуйте звичайні пробіли у тексті Alt і тексті заголовка, а не "-" або "_".

Рекомендація: використовуйте описовий текст Alt для всіх зображень. 2-6 слів зазвичай дають достатній опис.

Мапи сайтів зображень

Хоча це не так важливо, як інші аспекти SEO, ви також повинні включати зображення у ваші XML-мапи сайту, щоб збільшити шанси ваших зображень знайти в Google Image Search.

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

Ось приклад зображень, на які посилається XML-карта сайту:

http://www.example.com/page-name/ http://www.example.com/images/descriptive-image-name.jpg http://www.example.com/images/another-descriptive-image -name.jpg

Доброю новиною є те, що ви використовуєте хороший плагін для WordPress SEO, як Yoast SEO плагін Зображення автоматично додаються до XML-карти сайту, тому нічого не потрібно робити!

Рекомендація: використовуйте хороший плагін для WordPress SEO (Yoast), який додає зображення до файлу XML і подає до консолі пошуку Google.

Соціальні засоби комунікації

Мета-теги OG (Open Graph) (використовуються Facebook і Pinterest) і Twitter-картки визначають важливу інформацію для соціальних медіа-платформ, і одним з найважливіших речей, які потрібно вказати, є зображення, яке ви хотіли б відображати, коли хтось поділяє ваш вміст.

Чому зображення важливе? Гарне, високоякісне зображення може мати позитивний вплив на CTR від соціальних платформ, в той час як низька якість зображення може мати негативний вплив на CTR.

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

Для цього можна додати такі мета-теги до початкової частини сторінки:

І додавши наступний twitter: image мета-тег до головного розділу вашої сторінки:

Плагіни SEO (наприклад, Yoast) автоматично забезпечують додавання цих тегів до ваших сторінок.

Ці плагіни за замовчуванням визначатимуть зображення для зображень OG і Twitter Card, але ви можете легко вибрати власне зображення, натиснувши на піктограму "share" у бічному меню Yoast. Це відкриє для вас сторінку параметрів спільного використання Facebook:

Вкажіть свій образ у Facebook на плагіні Yoast SEO. Рекомендований розмір зображення у форматі Facebook - 1200 × 630px.

Натисніть піктограму Twitter, щоб відкрити параметри Twitter і вибрати зображення картки Twitter:

Вкажіть зображення Вашої картки Twitter у плагіні Yoast SEO. Рекомендований розмір зображення Twitter становить 1024 × 512px.

Ви також можете вказати Заголовки та Описання для Facebook і Twitter у цій області, якщо ви хочете, щоб вони відрізнялися від вашого мета-назви та мета опису.

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

Bonus Tip: як додатково стискати мініатюри в WordPress

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

Щоб стиснути мініатюрні зображення за більш високою швидкістю в WordPress, додайте наступний код до файлу functions.php:
(Попередження: перед редагуванням обов'язково створіть резервну копію вихідного файлу)

add_filter ('jpeg_quality', create_function ('', 'return 60;'));

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

Як правило, налаштування 60-80 (стандартна настройка WordPress - 90) призводить до того, що зображення без значного зменшення якості зображення, але ви можете перевірити це, щоб знайти те, що добре працює для вашого сайту і ваших зображень.

Зверніть увагу, що після внесення змін у файл functions.php вам потрібно буде відновити всі мініатюри, щоб зміни вплинули. Ви можете легко зробити це за допомогою Примусовий модуль регенерації мініатюр .

Резюме

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

Чи є інші поради щодо оптимізації зображень? Є запитання щодо оптимізації зображень? Залишити коментар нижче.