Оптимізація картинок на сайті: навіщо і як?

1. У чому полягає оптимізація картинок для сайту?
2. 1 - seo оптимізація картинок
3. А) атрибути тега img
4. Б) назва картинки
5. В) EXIF-дані
6. 2 - Унікалізація зображення
7. 3 - оптимізація розміру зображення
8. формати зображень

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

У чому полягає оптимізація картинок для сайту?

Оптимізація картинок базується на трьох складових:

• Seo-оптимізація
• Унікалізація
• Оптимізація розміру зображення

Саме ці параметри ми і розглянемо кожен окремо більш детально.

1 - seo оптимізація картинок

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

А) атрибути тега img

Для цього використовуються спеціальні атрибути atl і title тега для картинок . У загальному вигляді код оптимізованої картинки виглядає так:

<Img border = "0" alt = "[альтернативний текст]" title = "[текст підказки]"

src = "risunok.jpg" width = "[ширина картинки]" height = "[висота картинки]">

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

Б) назва картинки

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

В) EXIF-дані

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

2 - Унікалізація зображення

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

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

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

Тепер можна перевірити, унікальна ваша картинка. Зробити це досить просто за допомогою Google Images : Натискаємо на іконку фото і завантажуємо нашу картинку і отримуємо в результаті кількість знайдених копій або схожих фото.

3 - оптимізація розміру зображення

Зараз в мережі можна знайти безліч онлайн сервісів, які можуть оптимізувати розмір зображення без втрати його якості, для чого вам досить завантажити фото і зберегти результат. Ось деякі з них:

• PunyPNG
• TinyPNG
• SmushIt
• Shrink Pictures
• JPEGMini

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

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

Перш за все, варто вибрати правильний формат для картинки. Ось основні з них:

• JPG або JPEG - він кращий для великих фото, де потрібна повна передача кольору, градієнта і інших деталей. Мінус - відсутність прозорості.
• GIF - формат краще використовувати, якщо кількість кольорів не перевищує 10. Найчастіше використовується для банерів.
• PNG-8 - кращий варіант для іконок, кнопок і інших дрібних елементів.
• PNG-24 - варто вибирати, якщо на зображенні присутній напівпрозорий градієнт.

В цілому, формат PNG вважається найкращим для картинок з прозорістю.

При збереженні фото для сайту, вибирайте пункт «Зберегти зображення для WEB», встановіть потрібний формат зображення, якість та інші параметри - попередньо вам буде показаний розмір зображення після збереження. Якщо він занадто великий, варто змінити параметри, наприклад, розмір зображення.

повернутися