.

тег має обов'язковий атрибут src, значенням якого є абсолютний або відносний шлях до зображення:

для тега доступні наступні атрибути:

Таблиця 1. Атрибути тега

Атрибут	Опис, прийняте значення
alt	Атрибут alt додає альтернативний текст для зображення. Виводиться на місці появи зображення до його завантаження або при відключеній графіку, а також виводиться спливаючій підказкою при наведенні курсору миші на зображення. Синтаксис: alt = "(! LANG: опис зображення" . !}
crossorigin	Атрибут crossorigin дозволяє завантажувати зображення з ресурсів іншого домену за допомогою CORS-запитів. Зображення, завантажені в полотно за допомогою CORS-запитів, можуть бути використані повторно. Допустимі значення: anonymous - Cross-origin запит виконується за допомогою HTTP-заголовка, при цьому облікові дані не передаються. Якщо сервер не дає облікові дані сервера, з якого запитується контент, то зображення буде зіпсовано і його використання буде обмежено. use-credentials - Cross-origin запит виконується з передачею облікових даних. Синтаксис: crossorigin = "anonymous".
height	Атрибут height задає висоту зображення в px. Синтаксис: height = "300".
ismap	Атрибут ismap вказує на те, що картинка є частиною зображення-карти, розташованого на сервері (зображення-карта - зображення з інтерактивними областями). При натисканні на зображення-карту координати передаються на сервер у вигляді рядка запиту URL-адреси. Атрибут ismap допускається тільки в разі, якщо елемент є нащадком елемента з дійсним атрибутом href. Синтаксис: ismap.
longdesc	URL розширеного опису зображення, яке доповнює атрибут alt. Синтаксис: longdesc = "http://www.example.com/description.txt".
src	Атрибут src задає шлях до зображення. Синтаксис: src = "flower.jpg".
sizes	Задає розмір зображення в залежності від параметрів відображення. Працює тільки при заданому атрибуті srcset. Значенням атрибута є одна або кілька рядків, зазначених через кому.
srcset	Створює список джерел для зображення, які будуть обрані, виходячи з дозволу екрану. Може використовуватися разом або замість атрибута src. Значенням атрибута є одна або кілька рядків, розділених комою.
usemap	Атрибут usemap визначає зображення в якості карти-зображення. Значення обов'язково має починатися з символу #. Значення асоціюється зі значенням атрибута name або id тега
width	Атрибут width задає ширину зображення в px. Синтаксис: width = "500".

1.1. Адреса зображення

Адреса зображення може бути вказаний повністю (абсолютний URL), наприклад:
url (http://anysite.ru/images/anyphoto.png)

Або ж через відносний шлях від документаабо кореневого каталогусайту:
url (../ images / anyphoto.png) - відносний шлях від документа,
url (/images/anyphoto.png) - відносний шлях від кореневого каталогу.

Це інтерпретується наступним чином:
../ - означає піднятися вгору на один рівень, до кореневого каталогу,
images / - перейти до папки з зображеннями,
anyphoto.png - вказує на файл зображення.

1.2. розміри зображення

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

1.3. Формати графічних файлів

формат JPEG (Joint Photographic Experts Group). Зображення JPEG ідеальні для фотографій, вони можуть містити мільйони різних квітів. Стискають зображення краще GIF, але текст і великі площі із суцільним кольором можуть покритися плямами.

формат GIF (Graphics Interchange Format). Ідеальний для стиснення зображень, в яких є області із суцільним кольором, наприклад, логотипів. GIF-файли дозволяють встановити один з кольорів прозорим, завдяки чому фон веб-сторінки може проявлятися через частину зображення. Також GIF-файли можуть включати в себе просту анімацію. GIF-зображення містять всього лише 256 відтінків, через що зображення виглядають плямистими і нереалістичного кольору, як плакати.

формат PNG (Portable Network Graphics). Включає в себе кращі риси GIF- і JPEG-форматів. Містить 256 кольорів і дає можливість зробити один з кольорів прозорим, при цьому стискає зображення в менший розмір, ніж GIF-файл.

формат APNG (Animated Portable Network Graphics). Формат зображення, заснований на форматі PNG. Дозволяє зберігати анімацію, а також підтримує прозорість.

формат SVG (Scalable Vector Graphics). SVG-малюнок складається з набору геометричних фігур, описаних у форматі XML: лінія, еліпс, багатокутник і т.п. Підтримується як статична, так і анімована графіка. Набір функцій включає в себе різні перетворення, альфа-маски, ефекти фільтрів, можливість використання шаблонів. Зображення в форматі SVG можуть змінюватися в розмірі без зниження якості.

формат BMP (Bitmap Picture). Являє собою нестиснене (оригінальна) растрове зображення, шаблоном якого є прямокутна сітка пікселів. Bitmap-файл складається з заголовка, палітри і графічних даних. У заголовку зберігається інформація про графічному зображенні і файлі (глибина пікселів, висота, ширина і кількість квітів). Палітра вказується тільки в тих Bitmap-файлах, які містять палітровие зображення (8 і менше біт) і перебуває не більше ніж з 256 елементів. Графічні дані представляють саму картинку. Глибина кольору в даному форматі може бути 1, 2, 4, 8, 16, 24, 32, 48 біт на піксель.

формат ICO (Windows icon). Формат зберігання значків файлів в Microsoft Windows. Також, Windows icon, використовується як іконка на сайтах в інтернеті. Саме картинка такого формату відображається поруч з адресою сайту або закладкою в браузері. Один ICO-файл містить один або кілька значків, розмір і кольоровість кожного з яких задається окремо. Розмір значка може бути будь-яким, але найбільш вживані квадратні значки зі сторонами 16, 32 і 48 пікселів.

2. Тег

тег

Для тега доступний атрибут name, який задає ім'я карти. Значення атрибут name для тега

елемент

3. Тег

тег описує тільки одну активну область у складі карти зображень на стороні клієнта. Елемент не має закриває тега. Якщо одна активна область перекриває іншу, то буде реалізована перша посилання зі списку областей.

Таблиця 2. Атрибути тега

Атрибут	Короткий опис
alt	Задає альтернативний текст для активної області карти.
coords	Визначає позицію області на екрані. Координати задаються в одиницях довжини і розділяються комами: для кола- координати центру і радіус кола; для прямокутника- координати верхнього лівого і правого нижнього кутів; для багатокутника- координати вершин багатокутника в потрібному порядку, також рекомендується вказувати останні координати, рівні першим, для логічного завершення фігури.
download	Доповнює атрибут href і повідомляє браузеру, що ресурс повинен бути завантажений в момент, коли користувач клацає по посиланню, замість того, щоб, наприклад, попередньо відкрити його (як PDF-файл). Ставлячи ім'я для атрибута, ми таким чином задаємо ім'я завантажуваного об'єкту. Дозволяється використовувати атрибут без вказівки його значення.
href	Вказує URL-адресу для посилання. Може бути вказано абсолютний або відносний адресу посилання.
hreflang	Визначає мову пов'язаного веб-документа. Використовується тільки разом з атрибутом href. Прийняті значення - абревіатура, що складається з пари букв, що позначають код мови.
media	Визначає, для яких типів пристроїв файл буде оптимізовано. Значним може бути будь-який медіа-запит.
rel	Доповнює атрибут href інформацією у цій справі між поточним і пов'язаним документом. Прийняті значення: alternate - посилання на альтернативну версію документа (наприклад, друковану форму сторінки, переклад або дзеркало). author - посилання на автора документа. bookmark - постійний URL-адреса, що використовується для закладок. help - посилання на довідку. license - посилання на інформацію про авторські права на даний веб-документ. next / prev - вказує зв'язок між окремими URL. Завдяки цій розмітці Google може визначити, що зміст даних сторінок пов'язано в логічній послідовності. nofollow - забороняє пошуковій системі переходити за посиланнями на даній сторінці або по конкретній посиланням. noreferrer - вказує, що переході по посиланню браузер не повинен посилати заголовок HTTP-запиту (Referrer), в який записується інформація про те, з якої сторінки прийшов відвідувач сайту. prefetch - вказує, що цільовий документ повинен бути кешуватися, тобто браузер у фоновому режимі завантажує вміст сторінки до себе в кеш. search - вказує, що цільовий документ містить інструмент для пошуку. tag - вказує ключове слово для поточного документа.
shape	Задає форму активної області на карті і її координати. Може приймати наступні значення: rect - активна область прямокутної форми; circle - активна область в формі кола; poly - активна область в формі багатокутника; default - активна область займає всю площу зображення.
target	Вказує, куди буде завантажений документ при переході по посиланню. Набуває таких значень: _self - сторінка завантажується в поточне вікно; _blank - сторінка відкривається в новому вікні браузера; _parent - сторінка завантажується у фрейм-батько; _top - сторінка завантажується в повне вікно браузера.
type	Вказує MIME-тип файлів посилання, тобто розширення файлу.

4. Приклад створення карти-зображення

1) Розмічаємо вихідне зображення на активні області потрібної форми. Координати областей можна обчислити за допомогою програми для обробки фотографій, наприклад, Adobe Photoshopабо Paint.

Мал. 1. Приклад розмітки зображення для створення карти

2) Задаємо ім'я карти, додавши його в тег

Jpg "alt =" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers"> !}
Мал. 2. Приклад створення карти-зображення, при натисканні курсора миші на квітку здійснюється перехід на сторінку з описом

Графіка і трафік

Вимоги до краси і виразності оформлення Web-сторінок знаходяться в постійному протиріччі з технічними можливостями сучасного Web-хостингу. Тому проектувальник сайту повинен стати посередником між дизайнером і користувачем і строго витримувати рівновагу між візуальної привабливістю і розумною швидкістю доставки інформації в Мережі. Щоб успішно вирішувати цю проблему, необхідно знати всі використовувані в Інтернеті графічні формати, розуміти відмінності між ними, області застосування і особливості використання.

Щоб розібратися з великою кількістю форматів і протоколів, прийнятих в Інтернеті, і побудувати власну сторінку, необхідно відібрати те, що є найбільш підходящим для ваших конкретних цілей. Деякі формати можуть бути специфічні тільки для одного браузера, а інші потребують спеціального зовнішнього модуля. Ми вибрали з усього різноманіття форматів тільки ті, які найбільш часто використовуються авторами популярних сайтів і приймаються користувачами.

GIF і JPEG - це два найбільш популярних графічних формату, які давно стали фактичними стандартами для використання на WWW. Обидва досить універсальні, читаються більшістю браузерів і не вимагають спеціального програмного забезпечення (або додаткових модулів). GIF і JPEG - растрові формати зображення, що, відповідно, визначає фіксований формат (дозвіл) при відображенні таких картинок на екрані. При спробі масштабування (передбаченого в деяких браузерах) растрові (піксельні) зображення значно втрачають в якості. Для 8-розрядного (256-колірного) формату GIF, крім того, серйозною проблемою є вибір кольорової палітри.

Векторні графічні формати значно привабливіші для використання в Мережі. На відміну від точкових малюнків векторна графіка заснована на математичному (геометричному) поданні даних. Такі зображення значно менше за обсягом зберігання / передачі, легко масштабуються і практично не втрачають в якості при будь-яких перетвореннях. На жаль, векторні формати ще малоупотребімим в Інтернеті, але стандарти вже сформовані і мають зацікавити проектувальників.

Кілька векторних стандартів було запропоновано порівняно недавно, а формати PGML і VML в даний час розглядаються консорціумом W3C (World Wide Web Consortium). Однак фірма Macromedia, що просуває VML, давно відкрила свій векторний формат Shockwave Flash іншим розробникам і реалізувала додаткові модулі для перегляду графіки в цьому форматі для популярних браузерів.

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

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

GIF - формат для дизайну

Фірма CompuServe спочатку призначала свій формат GIF для інтерактивних додатків в умовах обмежених можливостей стандартної графіки на персональному комп'ютері. Це був спочатку 4, а потім і 8-розрядний растровий формат із завданням кольорової палітри, який підтримував максимум 256 кольорів. Одне з істотних переваг формату - то, що зображення можуть бути індексовані до певної палітрі (набору кольорів), в той час як JPEG-зображення не можуть «прив'язуватися» до палітри і їх «правильне» відображення не завжди можливо. Це властивість особливо важливо для тих розробників, які використовують індексацію палітри, щоб оптимізувати передачу зображень для всіх без винятку платформ (будь то PC, Mac, Web-TV або інші), незалежно від того, з якою глибиною кольору працює та чи інша система. Домогтися такої універсальності дозволяє обмежена палітра з 216 кольорів, яка включає всі загальні кольору, використовувані як в Windows, так і, наприклад, в MacOS. Проектування сайту в універсальної палітрі гарантує несуперечливе, кроссплатформное і не залежить від використовуваного обладнання відображення. Крім того, GIF-формат використовує схему стиснення без втрат (з простим алгоритмом кодування повторів: послідовність байтів одного кольору замінюється на слово з двох байтів, один з яких містить зразок зафарбовування, а другий визначає кількість повторень), так що графічні дані в цьому форматі не втрачають інформації в процесі стиснення і відновлення.

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

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

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

Для фотографій, відеокадрів або інших повнокольорових зображень з використанням гладких колірних переходів (градієнтів) використовуйте формат JPEG.

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

Крім усього іншого в форматі GIF передбачено так зване Черезстрочне поява (Interlaced), яке допомагає користувачам з повільними каналами на самому початку прийому оцінити зміст картинки (ефект схожий на поступову промальовування нерезкой картинки) і час, необхідний на її повну передачу, і в результаті прийняти рішення, чи варто продовжувати прийом або краще від нього відмовитися. Втім, на відміну від прогресивного JPEG тут ефект, скоріше, психологічний, ніж реальний (див. Рис.).

Також слід пам'ятати про один важливий перевагу GIF-формату, без якого в деяких випадках неможливо обійтися навіть при всіх його недоліках, - це підтримка прозорості (розширення GIF89a), яка дає можливість відображати силует з прямокутних контурами на вже існуючому тлі. Прозорість в форматі GIF реалізована примітивно - один колір (зазвичай фоновий) призначається прозорим. Ця перевага часто використовується при створенні кнопок і піктограм при оформленні сторінки (JPEG не пропонує ніякої підтримки прозорості).

На закінчення можна сказати наступне: GIF - найкращий вибір для досягнення ефективного компромісу між існуючим обладнанням і програмним забезпеченням, а можливість індексування 8-розрядного GIF-зображення до 216 універсальних кольорів має істотне значення, коли ваші зображення призначаються для показу на різноманітних браузерах і невідомих платформах .

JPEG - формат для фотографій і відеокадрів

Формат JPEG отримав свою назву від абревіатури Joint Photographic Experts Group сommittee (об'єднаного комітету експертів по фотографії), який і створив цей стандарт в кінці 80-х - початку 90-х років. Формат JPEG заснований на алгоритмі стиснення з втратами (дискретно косинусоидальной перетворенні), засобами якого ваше зображення розбивається на області (зазвичай це квадрати 8Ѕ8 пікселів), всередині яких розподіл квітів замінюється на математичну функцію і зберігаються тільки коефіцієнти цієї функції, що дозволяють відновити її вигляд. Природно, ви зіткнетеся з деякою втратою якості (в залежності від складності функції, яка застосовується для заміни зображення) і після відновлення отримаєте вже не реальну картинку, а її математичний «сурогат». Однак в залежності від якості вашого оригіналу і ступеня стиснення втрата якості може бути зовсім непомітна глядачеві. Але головна перевага JPEG-формату в порівнянні з GIF полягає в тому, що, в той час як GIF - тільки 8-розрядний (256-кольоровий), JPEG - 24-розрядний і може відображати до 16,7 млн. Колірних відтінків.

З цієї причини повноколірний JPEG, природно, відтворює значно більшу кількість відеоінформації, ніж GIF. Цей формат найкраще підходить для зображень реальному житті - відсканованих картинок або цифрових фотографій, а також оцифрованих відеокадрів або відрендерених сцен тривимірної комп'ютерної графіки.

Інша перевага JPEG полягає в наступному: на відміну від GIF він дозволяє самостійно задавати ступінь стиснення, що застосовується до вихідного зображення, що дає можливість витримувати необхідну рівновагу між розміром і якістю.

Коефіцієнти стиснення змінюються для JPEG в широких межах - в залежності від використовуваної програми редагування зображення, проте на Web-сторінках зазвичай застосовуються співвідношення 10: 1 або 20: 1 (виражене в пропорції за обсягом по відношенню до вихідного зображення), що зазвичай забезпечує прийнятну якість . Проте стискати зображення можна і до екстремальних значень 100: 1 (природно, зі значною втратою якості).

Отже, працюючи з фотографією в JPEG-форматі, ви маєте можливість зберегти 24-розрядний зображення з 16,7 млн. Колірних відтінків, і, незважаючи на втрату якості при стисненні, воно все ж значно більше відповідає оригіналу, ніж 256-кольорове GIF- уявлення. При цьому неминучі втрати якості сильно залежать від розміру, якості та типу вихідного зображення.

Крім того, JPEG дозволяє визначати так зване прогресивне відображення, тобто таке, коли при завантаженні на екрані відразу з'являється «грубе» уявлення картинки, яке, у міру отримання додаткової інформації, поступово поліпшується (при цьому ви можете отримати необхідне уявлення про суть пропонованого матеріалу ще до завершення завантаження і перервати процес на будь-якому етапі, що значно економить час перегляду мережевого контенту).

Ці кошти ви можете використовувати за бажанням, і подібне поетапне прояв може стати гарною підмогою в боротьбі із завантаженістю каналів. Єдина проблема з прогресивним JPEG (на відміну від чересстрочного GIF) полягає в тому, що старі версії браузерів можуть його не підтримувати.

PNG - універсальна растрова новинка

Представник наступного покоління растрових форматів, PNG, взяв кращі властивості і від JPEG, і від GIF і додав свій, унікальний підхід до подачі зображення, який дає можливість вбудувати в один файл різні версії того ж самого зображення для низького, середнього і високого дозволів.

Формат PNG (Portable Network Graphics) - відносно новий растровий графічний формат, який був схвалений як стандарт консорціумом W3C і повинен поступово замінити обидва «застарілих» формату: як GIF, так і JPEG. PNG пропонує і колірну індексацію (до 256 кольорів), і підтримку як 24-, так і 48-розрядної кольору (True-Color), і роботу з каналом прозорості (альфа-каналом), до того ж він значно ефективніший, ніж традиційні формати зберігання растрових зображень.

Алгоритм стиснення для повноколірного картинки перевершує JPEG за якістю, а за підтримки обмеженою індексованої палітри (до 256 кольорів) новий формат здійснює компресію без втрат на 10-30% краще, ніж та, яка реалізована в GIF-форматі, що робить його оптимальним для використання в будь-яких випадках. На жаль, новий формат не дозволяє жертвувати якістю зображення в обмін на більш високу ступінь стиснення, як в форматі JPEG.

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

Однак, незважаючи на всі удосконалення, пропоновані в PNG, новий формат «заживе» тільки після того, як до нього звернуться проектувальники Web-сайтів і виробники програмного забезпечення як для візуалізації зображень в новому форматі, так і для підготовки їх для публікації. А поки досить важко знайти PNG-зображення де-небудь в Інтернеті, незважаючи на недавнє включення підтримки цього формату як в Netscape Navigator, так і в Microsoft Internet Explorer.

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

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

векторне подання

І JPEG, і GIF, і PNG - растрові формати, засновані на дискретному (піксельному, або точковому) поданні зображення, в той час як векторні формати засновані на математичних формулах (геометричному поданні фігур). Векторна графіка забезпечує значні переваги в порівнянні з растром, особливо коли мова йде про схеми, тексті та промислової графіку (а економічність форматів має величезне значення для Інтернету).

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

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

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

Проблеми з відображенням векторної графіки у всесвітній Мережі виникли тому, що не було ніякого іншого способу відображення, крім реєстрового, а що з'явився було вбудований модуль для показу файлів в PDF-форматі не забезпечував належної гнучкості роботи і вимагав зберігання всього контенту в одній формі - PDF.

Для забезпечення можливості органічно вбудовувати векторну графіку в традиційний HTML-формат без якого б то не було додаткового програмного забезпечення в даний час на розгляді комітету зі стандартів W3C знаходяться два нових векторних стандарту: PGML (Precision Graphics Mark-up Language) і VML (Vector Mark -up Language). PGML підтримується фірмами Adobe Systems, IBM, Netscape і Sun Microsystems, а VML - Microsoft, Hewlett-Packard, Autodesk, Macromedia і Visio. Обидва стандарти засновані на розширеннях мови розмітки XML, пропагованої для застосування в мережі як наступника HTML і рекомендованого W3C до використання в майбутньому.

Але в даний час жоден з браузерів не підтримує ніяких стандартів векторної графіки, хоча додаткові модулі (Plug-ins) вже є. Серед найбільш популярних способів показу статичних векторних зображень на Web сьогодні можна виділити що належить фірмі Macromedia формат SWF (Shockwave Flash) і недооцінений поки формат Xara Flare.

Flare - гарне рішення, що допускає включення векторних зображень, які дозволяють практично необмежено збільшувати рівень деталізації сторінки, при цьому їх розміри порівнянні з Shockwave Flash. Не можна сказати, що застосування додаткових модулів для перегляду зображень так вже незручно, але коли ви будете використовувати подібні засоби на ваших сторінках, не забудьте попередити про це користувача і дати йому можливість завантажити відповідний модуль, перш ніж він перейде до тієї сторінці, яка буде включати ці елементи. У найближчій перспективі це, звичайно, сповільнить процес перегляду для нових користувачів, але поступово ви придбаєте все більше прихильників, поки відповідні кошти нарешті не будуть включені в чергову версію браузера і додатковий модуль новачкам вже не знадобиться.

Анімація, інтерактивність і взаємодію

Взагалі кажучи, і GIF-зображення можна оформити у вигляді спеціального стека в одному файлі, і отриманий «фільм» (flipbook) відтворити можна, створивши просту растрову анімацію. І Netscape і Microsoft забезпечили підтримку «пожвавлюється» GIF-формату, починаючи ще з третіх версій своїх браузерів, так що їх присутності на Web тепер важко уникнути. Численні GIF-аніматори, що дозволяють формувати подібні GIF-стеки, широко поширені (причому як комерційні, так і загальнодоступні). Однак «пожвавлення» GIF-формату може привести до некерованих розмірами файлів, бо кожен «рівень» такого стека - це індивідуальне GIF-зображення, так що типові 15 кадрів в секунду для комп'ютерної анімації можуть «наплодити» незліченну кількість кілобайт.

У комбінації з Java або JavaScript можна створювати і інтерактивну анімацію, яка буде реагувати на користувача.

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

Спочатку створений як формат для Macromedia Director, Shockwave - це сімейство протоколів, націлених перш за все на виробництво інтерактивного і графічного змісту, створюваного спеціально для використання в мережі Інтернет. А Shockwave Flash - це взагалі унікальний інструмент і один з найкращих способів для створення анімації і публікації її на Web-сторінці. Shockwave Flash утворює зовсім маленькі файли (так як використовує переважно векторний формат подання) і в порівнянні з іншими форматами найбільш зручний з точки зору підготовки.

При публікації такої анімації на ваших сторінках не забудьте повідомити про це користувача, щоб він заздалегідь запасся додатковим модулем і приготувався до довгого очікування завантаження. Однак останні версії - і Netscape Navigator, і Internet Explorer мають модулі перегляду для Flash-анімацій навіть в базовій поставці. Фірма Netscape підтвердила, що наступні версії Navigator матимуть таку підтримку для Flash навіть на рівні коду.

Остаточне рішення за вами

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

Однак при поданні растрових зображень кращим стає PNG, а якщо ви підете ще далі і спробуєте використовувати векторне зображення, то вже сьогодні до ваших послуг - формат Shockwave Flash фірми Macromedia.

Формат SWF (Shockwave Flash) - це не загальновживаний, а внутрішній векторний формат програми Flash фірми Macromedia (див. «Уроки Macromedia Flash» на CD-ROM), тому для того, щоб отримати власне зображення або анімацію, вам доведеться придбати відповідний мультимедійний пакет від фірми Macromedia, а користувачеві необхідно буде поставити додатковий модуль для візуалізації результату. Таким чином, для того щоб просто помістити векторний малюнок на вашу Web-сторінку, вам доведеться подолати цілий ряд незручностей.

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

КомпьютерПресс 5 "1999

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

Існують два способи розміщення графічних зображень на сторінці:

• вставка окремих картинок;
• заповнення фону картинкою.

У будь-якому випадку графічне зображення береться з файлу.

Вставка графічних зображень

Вставка на сторінку графічного зображення з файлу графічного формату проводиться за допомогою тега (Від англ, image - зображення) із зазначенням адреси файлу в якості аргументу атрибута SRC:

< IMG SRC = "адрес_графического_файла" >

Адреса графічного файлу - етолібо URL-адресу, або ім'я файлу, можливо, із зазначенням шляху. Наприклад, для показу графічного файлу logotip.jpg слід написати тег:

< IMG SRC = "logotip.jpg" >

Для збільшення швидкості передачі графічного зображення в тезі можна використовувати атрибут (додатковий параметр) LOWSRC, який приймає в якості аргументу адресу графічного файлу. Ви можете створити два графічних файлу: один (наприклад, нехай це файл logotip.jpg) містить картинку, отриману з високою роздільною здатністю, а інший (наприклад, logotip.gif) - картинку, отриману з низьким дозволом. Тоді тег:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... накаже браузеру спочатку завантажити файл logotip.gif, а потім у міру прийому замінити його файлом logotip.jpg.

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

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Графіка зазвичай використовується разом з текстом, тому виникає задача вирівнювання тексту і графічного зображення. Це завдання вирішується за допомогою атрибута ALIGNтега із застосуванням різних аргументів. Наприклад, ми можемо побажати, щоб текст обтікав картинку справа або зліва. Зазвичай картинка вбудовується впритул з текстом, що може бути некрасиво. Щоб уникнути цього, можна задати порожні поля навколо ілюстрації. Поля створюються за допомогою атрибутів VSРАСЕдля верхнього і нижнього полів і НSPACEдля бічних полів в тезі . Аргументи цих атрибутів вказуються у вигляді чисел, що визначають розміри полів в пікселах. Для скасування обтікання графіки текстом служить тег
.

Наступний тег задає обтікання графіки з файлу logotip.jpg справа (картинка буде знаходитися зліва від тексту):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Якщо потрібно розташувати картинку праворуч від тексту, то потрібно атрибуту ALIGNпривласнити аргумент RIGHT:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Щоб задати поля навколо картинки, треба написати тег виду:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Тут числа 20 і 10 визначають розміри полів.

Розглянемо приклад спільного використання графіки і текстів. Відкрийте Блокнот (текстовий редактор Notepad) Windows. Напишіть в ньому HTML-код з використанням розглянутих вище тегів. Нижче наводиться програма, що виводить деякий текст і графіку. В якості графічного файлу можна використовувати будь-який з наявних у вас файлів. Тут використовується файл logotip.gif.

< HTML >

< HEAD >

< TITLE >Вправа 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Текст обтікає графіку праворуч< / H1 >

Мал. 657. Текст обтікає картинку справа

Широкі можливості точного позиціонування зображень (як і інших елементів) на сторінці надають таблиціі стилі. Ці елементи HTML будуть розглянуті пізніше. Наприклад, ви можете визначити таблицю без видимих ​​рамок, а в осередках цієї таблиці розмістити картинки, тексти та інші елементи.