IMG-фізіологія: обов'язкові атрибути

До обов'язкових атрибутів я відношу src, height, width, alt, border. Вони повинні бути задані в усіх тегах IMG без винятку.

src

Якщо атрибут src не заданий, браузеру не стане погано. Браузери відрізняються залізними нервами. Але користі від порожнього тега <IMG> мало: на екрані з'явиться прямокутник з піктограмою всередині:

Правда, якщо ви дивитеся на образ коду <IMG> в Netscape-6, то нічого не побачите: цей браузер покаже вам пусте місце! Якщо спробувати перетягнути мишкою образ порожнього <IMG> в Internet Explorer 4, то на екрані з'явиться несподіване повідомлення: Неприпустимий аргумент.

Якщо тепер записати

<IMG

src =. / Pic / prof.gif> то очей користувача порадує симпатичне зображення:

Запис ./pic/prof.gif задає відносний адресу картинки. Вона каже браузеру: візьми картинку в підкаталозі pic поточного каталогу. Поточним для даної сторінки вважається каталог, який цю сторінку містить. Розміщення зображень в окремому місці - звичайна практика. Робиться це задля зменшення безладу в файловому господарстві сайту.

Типова помилка початківця розробника - використання абсолютного адреси. Він пише:

<IMG

src = c: /sidorov/pic/prof.gif> Картинка малюється, все добре. Однак, якщо сайт перенести з комп'ютера розробника на сервер, професор заміниться на прямокутник з піктограмою - адже файлова структура сервера не збігається з файлової структурою жорсткого диска розробника, і браузер не знаходить картинки.

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

Відносні адреси роблять сайт транспортабельним, абсолютні - прив'язують його до файлової структурі диска розробника.

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

Як URL картинки можна вказувати будь-яку адресу Інтернету. Можна написати:

<IMG

src = http: //www.botik.ru/~robot/PIC/RULOGO.GIF> і ви побачите логотип Роботландского університету з сайту Роботландия:

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

Як бути, якщо потрібно розмістити чужу картинку (з дозволу автора, зрозуміло) на своїй сторінці? Ви зараз бачите цю картинку в своєму браузері? Значить, вона вже на вашому комп'ютері. Її можна знайти в папці Temporary Internet Files каталогу Windows, а ще простіше клацнути по картинці правою кнопкою миші і зберегти в потрібному місці, вибравши в меню позицію Зберегти малюнок як ...

Ще одна поширена помилка пов'язана з тим, що на сервері, який працює, як правило, під Unix або Linux, регістр для імені файлу має значення. Якщо записати посилання на логотип Роботландского університету так:

<IMG

src = http: //www.botik.ru/~robot/pic/rulogo.gif> то картинку ви не побачите.

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

height і width

Атрибути height і width задають розміри прямокутника, в який браузер виводить картинку. Ці розміри повинні збігатися з реальними розмірами картинки. Якщо збігу немає, браузер розтягує або стискає зображення так, щоб воно повністю заповнило відведений для нього місце. В результаті картинка виводиться з неприємними спотвореннями.

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

Порівняйте ці два зображення:

Одне з них зменшено браузером, інше графічним редактором. Правда, не треба уточнювати яка картинка ніж зменшувалася?

Здається, що якщо, навпаки, є маленька картинка, а на сторінці потрібно розмістити її в збільшеному вигляді, то користуватися атрибутами height і width вигідно: отримуємо велике зображення з малим кілобайтний вагою. Так це так. Якщо, звичайно, вас влаштовує якість збільшення. Браузер просто укрупнює точки, Фотошоп це робить по більш складним алгоритмом, намагаючись не погіршити якість зображення. Але найкращий редактор з точки зору незалежності якості від розміру - векторний, такий, як, наприклад, Xara Webster. Векторний малюнок без спотворень розтягується до потрібного розміру, а потім записується на диск в растровому форматі GIF або JPG.

Порівняйте ці два зображення:

Одне з них збільшено браузером, інше - графічним редактором.

Ще одна помилка - не вказувати значень height і width зовсім. "Навіщо?" - каже Мячиков. - "Невже браузер такий дурний, що не може прочитати розміри в самому картіночном файлі?". Може. Але тільки тоді, коли файл вже завантажений в комп'ютер.

Картинки завантажуються в останню чергу. Спочатку браузер отримує по мережі текст, відображає його на екрані і користувач приступає до читання. Замість картинок на сторінці малюються прямокутники, які заміщаються прийшли по мережі картинками. Якщо атрибути height і width задані, браузер малює прямокутники зазначених розмірів, якщо немає, то "поштові марки" - невеликі прямокутні області. Коли картинка приходить по мережі, трапляється виверження вулкана з великим землетрусом: браузер змушений перемальовувати екран заново, адже картинки "не лізуть" у відведені для них місця. Якщо картинок на сторінці багато, землетрус відбувається по прибуттю кожної з них.

Ще одна неприємність підстерігає користувача, якщо картинки без атрибутів height і width занурені в таблицю. Так як браузер не знає потрібних розмірів, то малювати таблицю до приходу картинок він взагалі не стане, і користувач засинає у чистого екрану.

Висновок простий: потрібно завжди записувати атрибути height, width і вказувати в них реальні розміри картинки:

<IMG

src =. / Pic / nez.gif width = 139 height = 149>

alt

Текст, який є значенням атрибута alt (альтернативний текст), часто опускають при кодуванні тега IMG, а даремно!

Користувач любить прогулянки по Інтернету з "погашеними фарами" - відключеною в настройках браузера графікою. Навіщо він так робить? Заради економії своїх грошей і часу, адже товста графіка б'є і по тому, і по іншому. Якщо атрибут alt проігнорований, користувач не побачить ніяких повідомлень про те, яку роль відіграє картинка на сторінці. Якщо alt наповнений змістом, користувач прочитає повідомлення, записане в прямокутник, що заміщає картинку, а в деяких браузерах побачить той же текст, навівши мишачий курсор на місце картинки.

Існують браузери, які взагалі не підтримують графіки, наприклад, текстовий браузер Lynx. Голосовий браузер pwWebSpeek призначений для сліпих людей. Такі люди не побачать картинки, але хоча б отримають про неї уявлення, почувши її опис. Існують браузери, які використовують тактильний введення-виведення по абетці Бройля. Інші користувачі працюють з Web по телефону. Так, наприклад, влаштована система Web-on-Call Voice Browser. Останнім часом стає модним мати в автомобілі бортовий комп'ютер з інтернет-зв'язком. Так як очі користувача зайняті дорогою, до браузеру підключають мовний синтезатор.

Пошукові інтернет-вузли запускають в мережу свої роботи, для збору інформації. Картинки роботи не бачать, а ось alt-тексти читають із задоволенням.

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

Повідомлення "Це картинка" зовсім не годиться для альтернативного тексту. Текст "Фото шкільної будівлі. Чотириповерхова цегляна споруда з липовою алеєю. "Добре підходить для зображення, яке люблять розміщувати на головній сторінці шкільні сайти. Уявіть, що людина не бачить картинки, а тільки слухає альтернативний текст. Слова "Це картинка" викличуть роздратування. Коротке "Школа" - інформативніше, а текст з липовою алеєю ще і викличе позитивну асоціацію:

Коротке Школа - інформативніше, а текст з липовою алеєю ще і викличе позитивну асоціацію:

Якщо картинка велика, то і альтернативне повідомлення може бути досить великим. А ось на маленьких картинках довгі тексти обрізаються:

А ось на маленьких картинках довгі тексти обрізаються:

Прикро, що деякі браузери відносяться до alt не повагою.

IE-4 інтерпретує alt ідеально. Якщо картинка не завантажена, alt-текст записується в заміщає прямокутник і показується у віконці при наїзді мишачим курсором.
NN-3 не малює прямокутник, не записує на екран alt-текст і не виводить його при наїзді мишачим курсором.
NN-4 малює заміщає прямокутник, не виводить в нього альтернативний текст, але показує його при наїзді мишачим курсором. Текст завжди показується в один рядок і обрізається краями екрану монітора.
NN-6 малює прямокутник тільки на час завантаження картинки. Якщо картинка не завантажена, прямокутник заміщається альтернативним текстом, записаним як звичайний абзац. Зрозуміти, що на цьому місці має бути зображення, практично неможливо.

Незалежно від того, як браузери інтерпретують альтернативний текст, писати його необхідно. Близько 90% користувачів бачать alt-текст через Internet Explorer. Цей текст виводиться на панель Бройля, озвучується мовним браузером, і його читають роботи пошукових систем.

Ось ще кілька правил записи альтернативного тексту.

Для порожніх картинок-розпірок і декоративної графіки необхідно вказувати alt = "". Справа в тому, що за стандартом HTML у атрибута alt немає певного значення. Це означає, що браузери вправі поміщати в альтернативний текст все, що завгодно.
Якщо заголовок або інший текст на сторінці виконаний в графіку, то альтернативний текст повинен в точності його повторювати.
Якщо картинки використовуються як маркери, записуйте в alt послідовну цифрову нумерацію. (Значення "маркер" набагато гірше.)
Якщо картинка використовуються замість тега HR, записуйте alt = "роздільник". (Уявіть, що для імітації поділу записано atl = "*************". Мовний браузер буде нудно повторювати: "символ зірочка, символ зірочка ...".)
Якщо графічна кнопка використовується для навігації, укладайте alt-значення в квадратні дужки - це один з прийнятих способів оформлення текстових меню. (Приклад: alt = "[початок]").

Часто на web-сторінках невірно використовують атрибут alt як підказку для повідомлення користувачу додаткової інформації. Для цієї мети більше підходить атрибут title. Якщо в тезі IMG записані обидва атрибути, то значення alt записується на місце картинки, а значення title спливає на екран при наїзді мишачим курсором.

border

У стандарті HTML значення атрибута border за умовчанням не визначено. Це означає, що якщо розробник бажає самостійно контролювати наявність рамки навколо картинки і її товщину, він повинен обов'язково вказувати значення цього атрибута. Найчастіше записують border = 0.

Особливе значення запис border = 0 має тоді, коли зображення є посиланням.

Якщо нульове значення не задано, то навіть в тих браузерах, в яких рамка за замовчуванням не малюється, вона з'явиться навколо картинки-посилання (аналог підкреслення посилання):

href = torop.htm "> <IMG src =. / Pic / torop.gif width = 115 height = 150 alt =" Торопижка "> </ A>