Робота з картинками і фотографіями на сайті

1. Навіщо потрібна оптимізація зображень на сайті?
2. Оптимізація зображень - що це значить?
3. Оптимізація «ваги» зображень для web
4. Правила пошукової оптимізації зображень
5. унікальність зображень

Навіщо на сайті потрібні зображення і фотографії? Це питання відноситься до розряду риторичних. Чи можна уявити каталог інтернет-магазину без зображень товарів? Чи цікаво буде читати новинні сайти без єдиної фотографії, що ілюструє матеріали? Та й в цілому будь-який текст без зображень сприймається занадто «сухо».

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

Навіщо потрібна оптимізація зображень на сайті?

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

Пошуковики у відповідь на запити часто показують у видачі не тільки посилання на сторінки, але і зображення. Ось, наприклад, зображення в пошуковій видачі Яндекса у відповідь на запит «жіноче взуття»:

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

Сторінки сайту, які містять оптимізовані зображення, ранжуються вище, ніж сторінки, що містять лише текст.

Але давайте розберемося, що мається на увазі під словосполученням «оптимізація зображень».

Оптимізація зображень - що це значить?

Оптимізація передбачає кілька видів робіт:

1. Оптимізація «ваги» зображення.

2. Сео-оптимізація зображення.

Розглянемо обидва напрямки.

Оптимізація «ваги» зображень для web

Якісні зображення і фотографії, як правило, мають великий розмір, а, відповідно, і «важать» пристойно. Сторінки сайту, але яких розміщені «важкі» зображення, довго вантажаться. Чи вистачить у користувача терпіння дочекатися завантаження?

Швидше за все, навіть п'ятисекундне очікування буде даватися з трудом. Це означає, що людина покине ваш сайт, навіть не ознайомившись з ним. До того ж не варто забувати і про дисковий простір на сервері хостингу - його також потрібно економити. Саме з цих причин зображення на сайті повинні мати оптимальний «вага» (звичайно, при цьому якість повинна залишатися на належному рівні).

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

Зробити це можна кількома способами:

1. За допомогою графічних редакторів. Наприклад, в Adobe Photoshop є функція «Зберегти для web».

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

2. За допомогою онлайн-редакторів. Таких в інтернеті існує безліч. наприклад, imageoptimizer.net або webresizer.com . Вибирайте той, який подобається вам більше.

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

Правила пошукової оптимізації зображень

Щоб зображення на вашому сайті принесли найбільшу користь для пошукового просування, потрібно дотримуватися наступних правил:

Ім'я файлу. Зображення повинно мати інформативне ім'я. Краще не називати файли «стандартними» іменами (img1, img2, foto1, foto2), а вже використовувати в якості імені випадковий набір цифр і букв точно не варто. Оптимальний варіант - транслітерація назви. приклад:

І, звичайно ж, назва картинки або фото повинно відповідати тому, що на ньому зображено.

Атрибут alt. Атрибут alt - так званий альтернативний заголовок. В html коді зображення він розташовується за посиланням <img "src =" URL "alt =" альтернативний заголовок ">.

Саме його користувач бачить на сторінці, якщо зображення не завантажується.

В даному атрибуті рекомендується прописувати в тому числі і ключові слова, які обнародувано на сторінці. У нашому прикладі з жіночими туфлями alt може бути таким:

<Img "src =" URL "alt =" альтернативний заголовок ">

У більшості CMS завантажувачі зображення дають можливість прописати атрибут alt. Ось так це виглядає в редакторі зображень Joomla:

Атрибут title. Текст, вписаний в даний атрибут, з'являється при наведенні курсору на зображення, тобто виступає свого роду спливаючій підказкою. Також може враховуватися пошуковими системами, тому залишати його порожнім не варто. У нього також рекомендується вставляти ключові слова, але небажано просто копіювати текст з alt. Ключевики можна «розбавити» іншими словами.

<Img "src =" "alt =" Жіночі туфлі на підборах "title =" Жіночі туфлі, модель «...» ">

унікальність зображень

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

Увага! Додавання на зображення водяних знаків, зміна кута повороту, трансформація, відображення по горизонталі або вертикалі не підвищують їх унікальності!

Помилки, яких слід уникати при роботі з зображеннями і фото:

1. Розміщення на сторінках зображень, які не відповідають (не релевантні) текстової інформації.

2. Приміщення в атрибути alt і title занадто довгого тексту.

3. Використання занадто довгих імен файлів.

4. Використання «нетрадиційних» форматів зображень.

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