Правильна оптимізація зображень для сайту: що ви про неї знаєте?

1. Баланс розміру і якості
2. 1. Змінюємо розмір
3. 2. Стискаємо фотографії
4. JPEG, PNG або GIF: як зробити правильний вибір?
5. Будьте уважні! Декоративні елементи дизайну
6. Seo оптимізація картинок для сайту
7. Перший крок. Заповнюємо альт теги
8. Правила заповнення тега альт
9. Третій крок. Підписи під зображенням
10. Де краще розміщувати картинку?

Що роблять власники сайтів, щоб залучити більше клієнтів і читачів на свої сторінки? Підбирають якісний контент, просувають НЧ, СЧ і ВЧ запити, закуповують посилання. Безумовно, ви про це знаєте і застосовуєте на практиці. Але приділяєте ви увагу оптимізації зображень, фото, картинок для сайту? Чи правильно ви звертаєтеся з графікою?

зміст
Баланс розміру і якості
1. Змінюємо розмір
2. Стискає фотографії
JPEG, PNG або GIF: як зробити правильний вибір?
Будьте уважні! Декоративні елементи дизайну
Seo оптимізація картинок для сайту
Перший крок. Заповнюємо альт теги
Правила заповнення тега альт
Другий крок. Title і ЧПУ
Третій крок. Підписи під зображенням
Де краще розміщувати картинку?

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

Баланс розміру і якості

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

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

• зменшення розміру;
• стиснення фотографії з незначною втратою або зовсім без втрати якості.

1. Змінюємо розмір

Ширина основної колонки більшості блогів не перевищує 600-900 пікселів. Тому, не має сенсу вставляти картинки більшого розміру. Найчастіше ваш движок здатний сам автоматично зменшувати занадто велике графічне поле до прийнятної ширини. WordPress так і зробить. Однак краще самому вручну провести масштабування. Це пов'язано з тим, що з сервера для користувачів вивантажуватиметься оригінал з високою роздільною здатністю, а він важить чимало.

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

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

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

2. Стискаємо фотографії

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

Для зменшення розміру графічного файлу використовуйте програму Photoshop. Якщо його у вас немає, не турбуйтеся. Непоганим аналогом стане безкоштовний Gimp. Також до ваших послуг різні онлайн сервіси . У кожного з них є свої корисні фішки. У деяких програмах доступна пакетна (масова) оптимізація картинок. Передача потокового обробка помітно прискорює підготовку фото до завантаження на web-сайт.

Скільки в ідеалі повинен важити оброблений файл? Прагніть стискати графіку до 50-70 кілобайт. Звичайно, це не завжди легко. Особливо в тих випадках, коли хочеться розмістити великі барвисті фото. На підсумковий результат впливає не тільки вибір програми для оптимізації зображень, але і формат, в якому буде збережений файл-малюнок. Зупинимося на цьому моменті докладніше.

JPEG, PNG або GIF: як зробити правильний вибір?

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

JPEG

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

PNG

Перевагою png-формату є забезпечення прекрасної якості зображення після багаторазових збережень. Однак зверніть увагу на розмір. Він істотно вище, ніж у картинки в jpg-форматі.

GIF

Дозволяє отримувати файли маленького ваги. Але через помітних спотворень підходить тільки для об'єктів малого формату. Чи не застосовуйте даний формат для великих фото. Зате для мініатюр, кнопок, елементів меню він відмінно себе зарекомендував.

За співвідношенням якість / розмір, на мій погляд, лідирує JPEG.

Будьте уважні! Декоративні елементи дизайну

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

При роботі з декоративними елементами:

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

Seo оптимізація картинок для сайту

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

Перший крок. Заповнюємо альт теги

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

Правила заповнення тега альт

• використовуйте пошукові запити;
• пишіть тег латиницею;
• Намагайтесь не зловживати з довжиною. Наприклад, альт тег «купити квартиру в Підмосков'ї знижки розстрочка акції внесок материнським капіталом продаж в іпотеку» не надто вдалий. Постарайтеся укластися в 55-60 символів;
• не варто спамити. Одного ключа цілком достатньо;
• тег повинен відповідати картинці. Якщо на фото зображена Скарлетт Йоханссон, не пишіть в Альт розмиту фразу «модні зачіски 2017». Більш вдалим виявиться прицільний варіант «зачіска Скарлетт Йоханссон на премії MTV»;
• для декоративних елементів заповнювати теги не потрібно. Пошукові системи розцінюють такий хід як переоптімізацію і знижують позиції ресурсу у видачі.

Другий крок. Title і ЧПУ

Заголовок повинен відрізнятися від тега Alt, але також писатися латиницею. Title надає додаткову інформацію пошуковим системам про розміщеному зображенні.

По можливості прописуйте человекопонятний урл. Наприклад, якщо намальована моторний човен, то і пишіть в назві motornaya-lodka.jpeg або motorboat.jpeg. Такі url несуть в собі більше корисної інформації та для людини, і для пошукача. Адже, наприклад, 14789.png абсолютно не інформативний і не сприяє прискоренню пошуку.

Третій крок. Підписи під зображенням

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

Підпис також може містити просувний ключ.

Де краще розміщувати картинку?

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

Пошуковики стають розумнішими з кожним днем. Вони вже можуть виділяти окремі об'єкти на зображенні. Але для кращого аналізу малюнка потрібно текстовий контекст. Тому релевантне поєднання графіки і текстового блоку зустрічає позитивний відгук у пошукових роботів. Додатковим плюсом стане близьке розташування до малюнка заголовків h2-h5.

Підведемо підсумки

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

Бажаю вам більше вдалих публікацій і якісних малюнків.

Інші цікаві статті: