- Web оптимізація
- сервіси
- Модулі
- консольні кошти
- Оболонки для консольних програм
- SEO оптимізація
- Атрибути Alt і Title
- Назва файлу
- унікальність зображення
- Розміщення картинки на сторінці
- Посилання на зображення
- Посилання в зображенні
- Швидкість завантаження картинки
- Модулі WordPress для оптимізації зображень
- підсумок
У цій статті ми поговоримо про зображення на сайті, про цілі і завдання оптимізації графічного контенту сайту, як його аналізувати і які методи оптимізації зображень вибрати.
Оптимізація зображень зазвичай проводиться для двох цілей:
- Прискорити роботу сайту
- Поліпшити SEO параметри сайту
Для першого завдання (Web оптимізація) потрібно знизити обсяги і параметри завантаження зображень, а для другої ( SEO оптимізація ) - привести зображення на сайті у відповідність до вимог пошукових систем.
Web оптимізація
Так як зображення великого обсягу знижують швидкість роботи з сайтом, то перед завантаженням на сайт їх слід оптимізувати.
В першу чергу слід вибрати відповідний формат для зображень і підігнати їх розміри і обсяг до бажаного мінімуму.
Варто зазначити, що бажання оптимізації зображення шляхом налаштувань стиснення JPEG в популярних графічних редакторах не завжди призводять до ефективного результату, найчастіше, при цьому страждає якість картинок.
Якість стиснення зображень в першу чергу залежить від типу використовуваної графіки. У більшості випадків зображення для Інтернету можна стиснути на 10-50% без шкоди для якості. Існують спеціалізовані програми і онлайн-сервіси, розроблені для оптимального стиснення картинок. Розглянемо їх більш детально.
сервіси
Smush.it - Оптимізує картинки без втрат якості. Після завантаження зображень сервіс видаляє зайві дані з файлів, повертає zip архів з обробленими картинками.
Online image optimizer - ще один простий веб-інструмент для оптимізації зображень.
Punypng - сервіс підтримує прозорість зображень при їх обробці, забезпечує стиснення «без втрат» краще за інших сервісів.
програми
Іноді перед завантаженням на сайт потрібно навести велику кількість різних картинок до певних параметрів (тип, дозвіл і т.д.). Пакетна обробка допоможе зробити це набагато швидше.
Багато програм для перегляду зображень (XnView, IrfanView, FastStone і т.д.) дозволяють виконати однотипні дії для великої кількості файлів.
Так в програмі XnView в режимі оглядача клавіатурна комбінація Ctrl + U викликає меню пакетної обробки з великим числом опцій на вкладці дії.
Найчастіше з них застосовують пакетне зміна розміру (ресайз), який налаштовується в такому інтерфейсі.
Модулі
RIOT - відмінний плагін для додатків GIPM, IrfanView, XnView, підтримує основні формати зображень (JPG, PNG, GIF). Може видаляти метадані, доступний як окремий додаток для Windows.
SuperPNG - плагін для Photoshop, що працює з форматом PNG. Завантажити тут: http://www.fnordware.com/superpng/
Існують ще плагіни для різних CMS, які дозволяють оптимізувати зображення безпосередньо на веб-сервера, їх розглянемо окремо на прикладі найпопулярнішої CMS WordPress.
консольні кошти
Для обробки великої кількості зображень на робочому столі або навіть безпосередньо на сервері можуть знадобитися консольні програми, тому розглянемо їх приклади.
PNGout - безкоштовний інструмент з можливістю запуску з командного рядка, багато опцій, підтримка більшості форматів файлів.
Завантажити файл PNGout.exe можна за посиланням: http://advsys.net/ken/utils.htm на цій же сторінці є версія і для Лінукса.
- OptiPNG - кроссплатформне додаток, яке оптимізує файли PNG, також вміє працювати з форматами BMP, GIF, PNM, TIFF, переводячи їх в PNG.
- Jpegtran - консольний додаток для роботи з jpeg від jpegclub.org, можна скачати версії для різних ОС.
- Gifsicle - кроссплатформенная утиліта для обробки файлів GIF, http://www.lcdf.org/gifsicle/ .
- Pngcrush - є версії для UNIX, Linux, MS-DOS, обробляє PNG.
Ще один спосіб застосування консольних програм - написання скриптів, оброблювальних зображення за визначеним розкладом або події.
Така автоматизація допоможе знизити витрати робочого часу.
Оболонки для консольних програм
PictureBeaver - за своєю суттю є зручною оболонкою для безкоштовних консольних утиліт OptiPNG, jpegtran, Gifsicle, разом з якими її можна завантажити тут http://sapegin.ru/projects/picturebeaver . Працює за принципом drag-n-drop.
Webify - оболонка для утиліт PNGout, Jpegtran, Gifsicle.
SEO оптимізація
SEO оптимізація зображень дозволить залучати трафік з пошуку по картинках Google і Yandex, що дуже актуально для сайтів з великою кількістю унікальних зображень.
Наприклад, у вас сайт фотографа або сайт оренди і продажу нерухомості, інтернет магазин меблів і подібне, тоді пошукова оптимізація зображень дасть вам більше відвідувачів по цільових запитах.
Рекомендації для пошукової оптимізації картинок в чомусь схожі з правилами оптимізації тексту, але є й інші особливості, на які потрібно звернути увагу:
- Атрибути Alt і Title
- Назва файлу
- унікальність зображення
- Розміщення картинки на сторінці
- Посилання на зображення
- Посилання в зображенні
- Швидкість завантаження картинки
SEO оптимізовані зображення можуть не тільки залучати трафік, але і покращувати релевантність сторінок сайту, на яких вони розташовані.
Атрибути Alt і Title
Alt text замінює зображення, якщо картинка не завантажилася. Атрибут повинен бути осмисленим і містити ключові слова, не рекомендується використовувати однакові описи alt text для різних картинок.
Щоб уникнути переоптімізаціі, ключових слів не повинно бути занадто багато.
Title використовується для опису картинки і спливає при наведенні курсору на картинку, призначений для зручності відвідувачів сайту. З одного боку атрибут title не слід залишати порожнім, а з іншого він не призначений для забивання ключовими словами. Оптимальне його заповнення - органічно вписати один ключ в описі картинки.
Назва файлу
Зрозумілу назву файлу краще, ніж автоматично сгенерированное. Наприклад, файл bathroom _001.jpg виглядає краще, ніж 0039857_10112014.jpg
унікальність зображення
Пошукові системи вже навчилися визначати унікальність зображень, віддаючи перевагу оригінальним картинкам.
Якщо ви взяли картинки зі стоків або подібних джерел, то можна перевірити їх унікальність різними способами - використовувати пошук за картинками Google, спеціальні сервіси і програми (Lightshot, TinEye Client і т.д.)
Так програма TinEye Client дозволяє завантажувати файли для перевірки унікальності прямо з контекстного меню провідника windows.
Після перевірки сервіс показує нам звіт про унікальність зображення, кількості результатів і можливих першоджерелах.
Розміщення картинки на сторінці
На ранжування картинки в пошуку впливають:
- сторінка розташування на сайті (схожі ключові слова)
- місце розташування (чим вище, тим краще)
- збіг навколишнього тексту за релевантністю
- траст сайту
Посилання на зображення
Всім сеошників відомо, що якісні посилання важливі для просування веб-сторінок, але ж це ж працює і для картинок - їх теж можна просувати посиланнями.
Багато веб-майстри закривають хотлінк на зображення, щоб не створювати зайвого навантаження на сервер або захищати свої авторські права. Однак хотлінк це не завжди погано, так як він є посиланням на зображення і допомагає в просуванні картинки.
Наприклад, деякі картинки з мемів інтернету займають високі позиції в пошуку через те, що користувачі розміщували хотлінк смішний картинки на різних ресурсах.
Посилання в зображенні
Зображення можуть містити внутрішню або зовнішню посилання, а ПС працюватимуть з ними так само як і зі звичайними посиланнями.
Такі посилання можна використовувати для перелинковки сайту або інших завдань.
Швидкість завантаження картинки
Якісний хостинг і оптимізація розміру зображень повинні забезпечувати хорошу швидкість завантаження, яка впливає на ранжування в пошуку.
Що стосується розміщення картинок на сторонніх хостингах (radikal.ru і подібні), то економія пропускної здатності обертається погіршенням SEO параметрів таких картинок. Тому що при їх розміщенні на сайті ви фактично додаєте посилання на сторонні ресурси, а трафік з пошуку по картинках знизиться. Тобто не слід розміщувати на таких ресурсах свої унікальні зображення.
Модулі WordPress для оптимізації зображень
WP Smush.it - цей плагін спрощує роботу користувача з уже відомим нам однойменним сервісом. Плагін простий в установці і не вимагає додаткових налаштувань, для оптимізації вже наявних зображень на сайті достатньо зайти в медіабібліотеку, вибрати зображення для оптимізації і запустити процес обробки. Для успішної роботи плагіна настройки сервера повинні дозволяти запис файлів в каталоги зображень.
Imsanity - дуже простий плагін для ледачих, так як дозволяє один раз прописати максимальну роздільну здатність зображення, до якого і будуть приводитися всі файли великі файли картинок. Якщо ваш сайт не є чимось на зразок журналу свого, то установка цього плагіна збереже вам багато часу.
Hammy - генерує кілька зображень для різних масштабів сайту. Це особливо зручно для користувачів мобільних пристроїв, так як вони під час серфінгу по сайту будуть завантажувати зображення менших розмірів. Тобто мобільна версія вашого сайту стане швидше і зручніше. Крім того, цей плагін підтримує функцію Lazy Load, коли зображення починають завантажуватися тільки в тому випадку, коли їх користувач переглядає. Ця функція здатна значно прискорити довгі сторінки з великою кількістю графіки.
PB Responsive Images - плагін за своїми функціями схожий з Hammy, так як оптимізує сторінку під мобільні пристрої.
EWWW Image Optimizer - цей плагін вимагає установки пакетів jpegtran, optipng, pngout and gifsicle на сервер Linux адміністратором.
CW Image Optimizer - також як і попередній плагін, вимагає спеціальної настройки сервера, так використовує в своїй роботі утиліти opt-png, opt-jpg, opt-gif.
Media File Renamer - плагін дозволяє перейменовувати зображення і працювати з атрибутом title.
підсумок
Провівши оптимізацію зображень на сайті, можна поліпшити юзабіліті і SEO вашого сайту, отримати більш лояльну аудиторію і трафік з пошукових систем.
Повністю оптимізувати зображення на великому сайті може виявитися вкрай трудомістким завданням, тому потрібно правильно оцінити пріоритети в оптимізації сайту і визначити потенційне збільшення трафіку з пошуку по картинках.
Не забувайте, що зображення, що розміщуються на сайті повинні бути цікаві відвідувачам і покращувати поведінкові чинники.
А які способи оптимізації зображень використовуєте ви?
Читайте також:
А які способи оптимізації зображень використовуєте ви?