Методи оптимізації зображень

1. Чому це важливо Оптимізація зображень поряд з оптимізацією текстового контенту на сторінках сайту...
2. Формування текстів для атрибутів тега
3. Установка значень для атрибутів width і height
4. Назва графічних файлів
5. Вибір формату зображень
6. Сервіси для оптимізації співвідношення сторін екрану
7. висновки

Чому це важливо

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

HTML-синтаксис для оптимізації зображень

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

• alt - альтернативний текст для опису зображення;
• title - спливаюча підказка (підпис);
• width - ширина зображення;
• height - висота зображення.

На рис.1 представлений фрагмент HTML коду з заповненими атрибутами. Варто відзначити, що згідно з рекомендаціями пошукових систем, в разі, коли зображення є посиланням, краще title приписувати до заслання.

Рис .1 - Приклад заповнення атрибутів тега a - title; b - width & height; c - alt

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

Формування текстів для атрибутів тега

Альтернативний текст для атрибутів повинен бути коротким (менше 150-ти символів, враховуючи пробіли) і інформативним. Пошуковим системам необхідний опис картинки, яка включатиме інформацію про тематичному змісті з використанням релевантних ключових слів. Для цих цілей можна задіяти низькочастотні запити, що збільшить шанси попадання в TOP пошуку по картинках. Найбільш значимі запити краще вказувати на початку опису. Разом з тим, не слід зловживати кількістю ключових слів в описі. Такі дії можуть мати негативні наслідки для просування. Не потрібно використовувати символи, які не мають пошукової актуальності, наприклад © або (с) .Текст, який розташований навколо картинки повинен бути унікальним, а графічний об'єкт за змістом повинен відповідати змісту. Важливим фактором для ранжирування зображення є семантична складова навколишнього тексту (приблизно 15 слів до і після). Такий зв'язок дозволяє пошуковим системам визначити якість зображення. Частково дані рекомендації сформульовані в документах MSDN (MSDN - бібліотека для технічних фахівців з розробки програмного забезпечення).

Установка значень для атрибутів width і height

Заповнення значень ширини (width) та висоти (height) зображення (див. Рис.1) сприяють прискоренню його завантаження. Так, якщо браузеру недоступні ці дані, він повинен їх спочатку визначити і тільки потім завантажити об'єкт і решту коду страніци.Когда ж параметри прописані, браузер може заздалегідь виділити місце під зображення, одночасно завантажуючи решту сторінки. Крім того, ці правила справедливі і для таблиць. Пошукові системи Яндекса і Google для пошуку картинок (див. Рис.2) також використовують атрибути width і height для картинки (мале, середнє, велике). Варто перевіряти ще раз, що встановлені значення відповідають фактичному розміру зображення.

Рис .2 - Сервіси & nbsp пошуку картинок (a - images.yandex.ru ; b - images.google.com.ua )

Назва графічних файлів

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

• імена повинні бути прості і зручні користувачеві;
• необхідно іспользовать- ключові слова в назві файлу;
• назва файлу не повинно містити цифри і безглуздий набір букв (наприклад, IMG027589.jpg);
• кількість слів у файлі не повинно перевищувати 4-5;
• замість пробілів між словами використовувати дефіс;
• при необхідності використання однієї назви зображення для різних файлів, необхідно використовувати ідентифікатори (наприклад, kozhanaja-kurtka-01.jpg, kozhanaja-kurtka-02.jpg, kozhanaja-kurtka-03.jpg тощо;).
• якщо зображення мають схожий зміст і логічно доповнюють один одного, необхідно розміщувати їх в одній папці з відповідним ім'ям (наприклад, ... /kozhanye-kurtki/kozhanaja-kurtka-01.jpg, ... /kozhanye-kurtki/kozhanaja-kurtka-02.jpg і т.д.).

Вибір формату зображень

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

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

• GraphicsInterchangeFormat (GIF) - цей формат зображення найкраще підходить для зображень, в яких використовується 1-2 кольори, наприклад, логотипи або анімація. Особливості: прозорий фон, відсутня змішання квітів.
• PortableNetworkGraphics (PNG) - забезпечує високу якість, але при цьому генерує файли великого розміру, які часто не підходять для використання в мережі. Існують винятки, наприклад, коли потрібно надзвичайно висока якість: твори мистецтва (картини).
• JointPhotographicExpertsGroup (JPEG) - це кращий формат для зображень в мережі Інтернет. Показує велику різноманітність кольорів і генерує файли меншого розміру, ніж PNG. Цей формат чудово підходить для фотографій, а також для ілюстрацій, де присутня градієнт, тіні і т. П.

Зберігати зображення краще з застосуванням прогресивної схеми стиснення (progressive JPEG, см. Рис.3) замість базового режиму кодування (baseline JPEG, см. Ріс.3b). В такому випадку малюнок буде завантажуватися швидше, поступово збільшуючи ступінь деталізації. (Див. Ріс.3a).

Мал. 3 - a (прогресивне стиснення JPEG); b (базове стиснення JPEG)

Розмір одного і того ж зображення при використанні різних форматів: GIF (256 кольорів) - 42K; PNG-8 (256 кольорів) - 37K; PNG-24 - 146K; JPG (60 quality) - 32K

Сервіси для оптимізації співвідношення сторін екрану

При використанні великої кількості візуального контенту на сайті, швидкість завантаження сторінки може сповільниться, що негативно впливає на ранжування і поведінку користувачів на сайті. Для того, щоб уникнути підвищення показника відмови на сторінках через низьку швидкості, необхідно використовувати сервіси для зменшення розміру картинок. У доступі існують як безкоштовні, так і платні сервіси. Також слід врахувати той факт, що деякі сервіси стискають зображення з втратою якості. Серед безкоштовних сервісів, які не призводять до втрати якості зображення слід виділити Kraken, Optimizilla і Compressor.io.

висновки

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

Підводячи підсумок, необхідно врахувати ще кілька хороших практик:

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

Додаткову інформацію можна знайти в довідниках пошукових систем: