Як правильно оптимізувати свої зображення для покращення SEO

покращення

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

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

1. Виберіть правильний формат зображення

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

Для Інтернету ви можете вибрати:

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

2. Оптимізуйте розмір файлу зображення

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

1-секундна затримка відповіді на сторінку може призвести до зменшення конверсій на 7%, згідно з дослідженням Kissmetrics.

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

Розмір зображення визначається його якістю або кількістю пікселів. Якщо зображення містить більше пікселів, розмір, розміри та якість будуть вищими. Ось чому рекомендується знизити якість на 15-20% для форматів JPEG та PNG.

Багато спеціальних програм мають цю опцію.

Наприклад, в Adobe Photoshop JPEG та PNG надають можливість оптимізувати зображення для Інтернету. Крок дуже простий: Експорт »Зберегти для Інтернету» Якість 85% (скористайтеся засобом перегляду фотографій ліворуч, щоб визначити, чи можна ще більше стискати фотографію та її вигляд.) »Натисніть« Зберегти ».

Чим вищий відсоток, тим краща якість фотографії. Для зображень у форматі PNG ви можете вибрати серед інших варіантів оптимізації, наприклад, 8-бітовий PNG та 24-бітний PNG. Рекомендується зберегти його у 8-бітному форматі png, щоб отримати зображення невеликого розміру.

Affinity Photo - ще один варіант стиснення зображення, який може бути схожий на Photoshop, але дешевший.

Існує інше просте у використанні програмне забезпечення для зниження якості зображення, таке як Gimp та інше невелике програмне забезпечення для початківців, таке як GIFsicle, JPEGtran, JPEG Mini, OptiPNG, pngquant, FileOptimizer, ImageOptim.

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

Також існує imgIX PageWeight, де ви можете додати свій веб-сайт і оцінити “кількість” візуального контенту. Для цього існує три основні показники, розраховані для кожного сайту, представлені кольоровими смужками (легкими, рекомендованими та важкими), як ви можете бачити на скріншоті нижче. У нашому прикладі ми маємо середній вміст веб-сайту та малу вагу зображення та рекомендації щодо кращої оптимізації зображення.

Нижче наведено зразок звіту та дії, які слід вжити:

  • Як зображення впливають на вагу вашої сторінки;
  • Найефективніше зображення Розкладене зображення вашої сторінки.

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

3- Зберігайте зображення з меншою роздільною здатністю

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

Наприклад, якщо ваше зображення має ширину 500 пікселів і висоту 281 піксель (500 × 281), воно матиме 140 500 пікселів (ми помножуємо кількість пікселів у ширину та висоту), що становить 141 KP. Для більшого зображення роздільна здатність буде більшою. Наприклад, якщо у вас високоякісне зображення 1920 × 1080, роздільна здатність складе 2,07 мегапікселя. У програмі для редагування графіки ми маємо можливість вибрати розміри та роздільну здатність вашого зображення, що може дещо ввести в оману, оскільки ми не можемо мати зображення однакового розміру з різною роздільною здатністю.

Зображення розміром 500 × 281 при 72 ppi, 300 ppi та 1000 ppi буде виглядати точно так само, а кількість пікселів складе 141 KP.

Http Archive зробив цікавий аналіз розбиття веб-сайтів за типом вмісту. Результати були неймовірні. Дані цього звіту можна переглянути нижче. Ви легко можете побачити, які зображення мають найбільшу вагу на веб-сайті.

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

Google PageSpeed ​​Insights може показати вам зображення, які потрібно стиснути, і простір, який ви заощадите потім. У наведеному нижче прикладі ви можете побачити файли, які потрібно стиснути. Якщо їх стиснути, ви заощадите 34 КБ.

4- Змініть розмір зображення за масштабом

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

Як користувач WordPress, у вас є маса переваг. Наприклад, у цьому випадку ваш розмір зображень буде змінено за замовчуванням коли ви додаєте їх до медіатеки. Ви можете легко отримати доступ до цієї опції, перейшовши в Налаштування »Медіа. Максимальна ширина зображення повинна бути близькою до ширини вашого сайту. Таким чином, CSS не змінить розмір ваших зображень, щоб вони помістилися всередину. Інші рекомендації щодо SEO для WordPress

Ось деякі інші рекомендації, про які варто згадати:

  • Використовуйте ефекти CSS3 якомога більше;
  • Зберігайте свої зображення за розміром на ваш вибір, замість того, щоб дозволяти HTML або CSS змінювати їх розмір.
  • Обрізати простір із зображень і відтворити їх за допомогою CSS для заповнення;
  • Зменшіть глибину бітів до меншої кольорової палітри.
  • Вибирайте веб-шрифти та уникайте розміщення тексту на зображеннях. Таким чином ви не зіткнетеся з проблемою зміни розміру, і ви заощадите простір;
  • Зменште свої зображення за допомогою стиснення Gzip.

5- Зменште розмір файлу за допомогою плагінів

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

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

Для кожного плагіна виконуються такі дії:

Увійдіть у свій WordPress »Плагіни» Додати нове »Шукати плагін» Встановити зараз і зачекайте кілька секунд »Активувати. Тоді, якщо хочете, ви можете перейти до певного плагіна та пройти через налаштування, щоб переконатися, що все відповідає вашим потребам.

WP Smush, CW Image Optimizer, Insanity, Hammy, SEO Optimized Images або PB Responsive Images - це лише кілька прикладів плагінів, які автоматично і без втрат стискають ваші зображення.

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

Як пропозицію, слід зберегти розмір файлу вашого зображення менше 120 Кб для великих зображень (1920 пікселів і вище) і навіть легший для невеликих зображень. Як правило, найкраще зберігати більшість зображень приблизно на 50 кб.

6- Видаліть усі недоречні або непотрібні метадані

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

Додаткові метадані, такі як дані EXIF ​​(запис усіх налаштувань камери), можна додавати вручну за допомогою спеціального програмного забезпечення або безпосередньо до цифрових камер.

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

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

Виберіть, що видаляти та зберігати, легко переходячи до комірки Value кожного властивості та видаляючи вміст. Якщо файл перебуває в режимі лише для читання, ви не зможете редагувати цю інформацію. Але є й інші способи перевірити це за допомогою розширення Google Chrome, переглядач EXIF, який буде доступний на маленькій камері з вашого браузера. Всього одним клацанням на піктограмі ви отримаєте всі дані Exif. Photoshop або Adobe Lightroom - це інші приклади, які можуть допомогти вам позбутися зайвих даних EXIF. Перейдіть до Файл »Інформація про файл .

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

7- Назвіть свої зображення та додайте альтернативні описи для успіху в SEO

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

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

Пошукові системи сканують як текст на вашому веб-сайті, так і текст, вбудований у ваші зображення. Переконайтеся, що ви не використовуєте загальні імена, такі як DSCN093298.png, Image01.jpg або animation-version1.gif тощо, а скоріше описові імена файлів. Теги заголовків та тексти заміни є важливими, коли браузер не може правильно відобразити ваш веб-сайт.

Оптимізація ваших зображень

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

Ми знайшли безліч простих та ефективних способів оптимізації ваших веб-зображень. Знати:

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

Ці 7 поради щодо оптимізації візуального зображення покращить ваш SEO. Для отримання додаткової інформації за адресоюоптимізація зображення, зверніться до служби підтримки Google.

Статті в блогах

Будьте в курсі подій та скористайтеся нашими порадами, найкращими практиками та порадами щодо SEO.

5 KPI для вимірювання ефективності вашої контент-стратегії

Під час пілотування стратегії контент-маркетингу вимірювання KPI (показників ефективності) має вирішальне значення. Ось наш список тих, кого слід подивитися

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

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

Що таке хороший показник відмов і як його покращити?

Показник відмов - одна з найважливіших, але недостатньо зрозумілих метрик Google Analytics. Ми розглянемо, що робити, якщо рівень відмов вашого веб-сайту вищий за середній.