Без комплексної внутрішньої оптимізації сайту складно досягти високої відвідуваності, до якої прагнуть власники вебресурсів. Сюди належить і оптимізація зображень, якою вебмайстри часто нехтують. Іноді це пов’язано з браком часу, необізнаністю або звичайною лінню. У будь-якому разі оптимізація зображень для сайту допомагає сторінкам краще відповідати вимогам пошукових систем і бути релевантнішими запитам.
Що таке сайт? Це сукупність різних ресурсів, які разом формують візуальну картину, що інтерпретується та відображається сучасними веббраузерами. Те, що ми бачимо в інтернеті, створюється за допомогою різних мов і технологій.
Трохи відхилилися від теми — повернімося до оптимізації зображень.
Навіщо потрібна оптимізація зображень
Робота із зображеннями дає змогу зробити сайт швидшим, а швидкість завантаження враховується пошуковими системами. Тобто грамотна SEO-оптимізація зображень є частиною загальної оптимізації вебресурсу.
Не всі знають, що унікальне й привабливе зображення може збільшити трафік. Пошукові механізми враховують дані про картинки й показують якісні зображення у пошуку за зображеннями. У результаті вони можуть приводити на сайт додаткових відвідувачів.
Після невеликої теорії перейдемо до практики.
Оптимізація зображень для сайту — стиснення та зменшення розміру
Виконання цих вимог допоможе прискорити завантаження сайту. Саме великі зображення часто негативно впливають на швидкість завантаження сторінок. Інші елементи, зокрема текстовий контент, зазвичай важать значно менше. Звісно, можна взагалі відмовитися від зображень, але тоді матеріал стане менш наочним і привабливим для відвідувача, а це може негативно позначитися на поведінкових факторах.
Існує багато онлайн-сервісів для перевірки швидкості сайту, серед яких варто згадати PageSpeed Insights. Це сервіс Google, який повідомляє про ресурси, що можуть уповільнювати роботу сайту. Якщо після перевірки ви побачили попередження про неоптимізовані зображення, варто зайнятися їх стисненням. У звіті також можна побачити, які саме об’єкти потребують оптимізації.
Отже, що потрібно зробити? Оптимізація розміру зображень і їх стиснення передбачає використання графічних програм. Сьогодні існує багато платних і безкоштовних редакторів. Я випробував чимало програм для роботи із зображеннями, але серед них особливо виділяється Adobe Photoshop. Ця програма має величезний функціонал, що іноді відлякує користувачів.
Оптимізація зображень за допомогою Photoshop
Запустіть програму, у верхньому лівому куті виберіть «Файл/Відкрити». Виберіть зображення та натисніть «Відкрити». Потім знову відкрийте меню «Файл» і виберіть «Зберегти для Web…».
У вікні можна змінити ширину й висоту зображення. Для цього введіть свої значення біля параметрів ширини та висоти. Ці параметри пов’язані між собою: якщо змінювати, наприклад, ширину, висота автоматично підлаштовуватиметься під пропорції зображення. Щоб змінити такий режим, достатньо натиснути на маленьку піктограму зв’язку між параметрами.
Для стиснення картинки виберіть у правому верхньому куті потрібний формат. Я рекомендую JPEG — у багатьох випадках він дає змогу суттєво зменшити розмір файлу.
Тут же можна змінити якість — від низької до найвищої. Також можна скористатися параметром «Якість» і за допомогою повзунка вибрати потрібний рівень.
Серед поширених форматів для вебзображень — PNG і JPEG.
Крім того, на сайт можна додавати GIF-зображення. Якщо потрібно зберегти зображення без втрати якості, у Photoshop можна вибрати формат PNG-24.
У багатьох випадках така оптимізація практично непомітна для людського ока, хоча розмір файлу зменшується.
В ідеалі розмір розміщеного на сайті зображення бажано тримати в розумних межах; у матеріалі як орієнтир наводиться 30–60 kB.
Окрім Photoshop, для роботи із зображеннями можна використовувати й інший софт:
— FastStone Image Viewer.
— PhotoScape.
— Paint.
Важливий момент! Перед завантаженням зображень на сайт врахуйте ширину контентної частини. Наприклад, якщо вона становить 860 пікселів, немає сенсу завантажувати значно ширші картинки, якщо вони все одно показуватимуться в цьому розмірі.
SEO-оптимізація зображень
Недостатньо лише стиснути й зменшити зображення. Його також потрібно оформити відповідно до принципів SEO-оптимізації.
Пошукові системи аналізують назви файлів зображень. Тому замість випадкового набору літер або цифр краще використовувати зрозумілу назву, що відповідає темі статті або тому, що зображено на картинці.
У назві файлу зручно використовувати латиницю, а якщо слів кілька — розділяти їх дефісами. Для транслітерації можна скористатися онлайн-сервісом translit.net. Не варто перетворювати назву на спамний набір ключів, але доречні тематичні слова цілком припустимі.
Прописуємо SEO-метадані
Певні атрибути дають змогу зробити зображення інформативнішими.
Атрибут alt у матеріалі описується як складова тегу img, що використовується для графічних елементів сайту та містить альтернативний опис файлу. Текст, прописаний в alt, може відображатися, якщо зображення не завантажилося або його показ вимкнено. Щодо важливості цього атрибута для SEO існували різні думки: одні фахівці вважали, що його заповнення допомагає просуванню, інші — що користь мінімальна.
У матеріалі рекомендувалося робити alt осмисленим, писати його кирилицею, вкладатися приблизно у 70 символів і використовувати ключові слова та фрази, які описують зображення, не зловживаючи ними.
Приклад заповненого атрибута alt:
{spoiler title=Alt opened=1}<img src="/images/optimizatsiya-izobrazhenij-dlya-sajta-umenshenie-razmera-szhatie-seo-optimizatsiya/optimizatsiya-izobrazhenij-dlya-sajta.jpg" alt="оптимізація зображень для сайту" />{/spoiler}
Атрибут title дає змогу під час наведення курсора на зображення показувати певний текст. У матеріалі рекомендувалося заповнювати його зрозумілою для користувача мовою; на відміну від alt, title може бути змістовнішим.
Після всіх дій з оптимізації автор рекомендував зайти на сервіс TinEye і перевірити зображення на унікальність. У матеріалі зазначалося, що пошукові механізми враховують цей фактор і що окремий пошук за зображеннями в Google та Яндексі може приводити на сайт додатковий трафік.
Приклад заповненого атрибута title:
{spoiler title=Title opened=1}<img src="/images/optimizatsiya-izobrazhenij-dlya-sajta-umenshenie-razmera-szhatie-seo-optimizatsiya/optimizatsiya-izobrazhenij-dlya-sajta.jpg" alt="оптимізація зображень для сайту" title="Чому оптимізація зображень важлива, навіщо вона потрібна і як її виконати" />{/spoiler}
Оптимізація зображень у Joomla
Як уже згадувалося, оптимізацію потрібно виконувати комплексно. Недостатньо лише написати SEO-статтю та правильно прописати заголовки H1–H6.
Після теорії варто переходити до практики. Розглянемо, як працювати з атрибутами зображень у Joomla.
Для цього авторизуйтеся в адміністративній панелі, відкрийте менеджер матеріалів, виберіть потрібний матеріал і за потреби переключіть редактор на перегляд HTML-коду. Для публікації та редагування матеріалів у статті рекомендується редактор JCE.
На скриншоті для прикладу показано дві однакові картинки: перша — із заповненими атрибутами alt і title, друга — без них.
Оптимізувати зображення бажано ще до завантаження на сайт: це допомагає зменшити вагу сторінок, покращити швидкість і правильно оформити графічний контент.
Дякую за увагу і до нових зустрічей на сторінках StimylRosta.
