Оптимізація зображень для сайту: alt і title

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

Зображення - елемент сайту, піддається оптимізації. У нього є ім`я файлу і атрибут alt і title.

Атрибут alt (альтернативний текст) обов`язковий, в нього записується текст, який відображається відвідувачу в разі відсутності картинки по либой з причин.

Відео: Оптимізація зображень для сайту - Костянтин Хмельов

Навіщо потрібен атрибут alt? Якщо користувач відключить відображення картинок в браузері - він побачить текстову частину сторінки і атрибут alt, що описує зміст не відображаються графічного елементу.

Вище показано зображення з альтернативним текстом, що знаходяться в атрибуті alt. Його побачать користувачі з незагрузівшейся картинкою в браузері.

У зображення - посилання, атрибут alt - анкор. Грамотно складений alt, разом з інформативним ім`ям файлу, дозволить сервісів картинок пошукових систем здійснювати пошук по зображеннях.

Атрибут title містить додаткову інформацію, що відображається користувачеві при наведенні курсору на картинку. title використовується для зручності користувачів, показуючи їм супроводжує зображення текст, і для просування в сервісах картинок пошукових систем. На відміну від alt, title - необов`язковий атрибут.

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

1. Зображення статей розміщуйте біля відповідних положень частини тексту. Немає такої можливості - залишайте у картинок описові підпису, а не "Мал. 1&# 8243 ;.
2. Автоматично генеруються зображення: CAPTCHA, лічильники, інформери, закривайте від індексації в robots.txt.
3. Не використовуйте зображення замість текстового контенту, якщо текст в зображенні необхідний, продублюйте його в статті, інакше, потрібна інформація буде втрачена пошуковими системами, які не розпізнають текст в зображенні.
4. Навігація, виконана у вигляді картинок, а не тексту, хоч і дає можливість перейти на внутрішні сторінки, не повідомляє пошуковим системам інформацію про їх вміст. По можливості, надавайте альтернативне текстове меню на основні розділи.
5. Сайти, виконані на flash, повинні мати текстову версію. Вона корисна не тільки пошуковим системам, але і користувачам з застарілими браузерами, або з невстановленим flash.
6. Замість того, щоб зберігати зображення в різних директоріях, краще розмістити їх в одній папці, наприклад, в images, це спростить шлях до графічних елементів.
   
7. Браузери підтримують поширені типи файлів: GIF, PNG, GPEG і BMP, дотримуйтеся цих форматів, уникаючи рідко застосовуються розширень.
8. Вказуйте розмір зображення. Значення висоти і ширини записуються в параметри width і height.
9. Оптимізуйте зображення для Web. Наповнюючи сайти зображеннями, оптимізуйте їх вага, підбираючи параметри форматів так, щоб розмір файлу картинки був мінімальним. Оптимізуючи картинки, не забувайте про відвідувачів, занадто зменшене в розмірі зображення має погану якість, що робить картинку візуально непривабливою, а її деталі трудноразлічимимі. Оптимізоване зображення зменшить вагу веб-сторінки, на якій воно розташоване, збільшивши швидкість її завантаження.

Відео: Урок 8. Оптимізація картинок. Курс по розкрутці сайтів (Школа інтернет-маркетингу EMPO)

рекомендується:

1. Використовувати короткі, описові імена і текст в атрибуті alt і title.
2. Застосовувати атрибут alt в графічних посиланнях. Він повідомить пошуковим системам інформацію про сторінку, тієї, куди веде посилання.

Не рекомендується:

1. Використовувати типові імена файлів: 1.jpg, pic.jpg, image1.jpg.
2. Поміщати в атрибут alt і title велика кількість ключових слів.
3. Довгий alt-текст.
4. Використовувати зображення як навігації по сайту.

Сайтам, з галереями зображень, можна надати пошуковим системам більше інформації про картинках, створивши sitemap для картинок.