Зображення, Навчальні курси, WebReference
Додавання зображення відбувається у два етапи: спочатку готується графічний файл у потрібному форматі та бажаного розміру, потім файл відображається на сторінці за допомогою елемента .
Формати файлів
Формат PNG-8
PNG-8 (Portable Network Graphics, мережна графіка, що переноситься) — вільний формат створений для заміни GIF, в якому тривалий час використовувалися пропрієтарні алгоритми.
Приклад зображення у форматі PNG-8
Особливості
- Використовує 8-бітну палітру (256 кольорів) у зображенні, за що й отримав у своїй назві вісім цифр. При цьому можна вибирати, скільки кольорів зберігатиметься у файлі - від 2 до 256.
- На відміну від GIF не відображає анімацію.
Галузь застосування
Текст, логотипи, ілюстрації з точними краями.
Формат PNG-24
PNG-24 — формат, аналогічний PNG-8, але використовує 24-бітну палітру кольору Подібно до формату JPEG, зберігає яскравість і відтінки кольорів у фотографіях. Подібно до GIF і формату PNG-8, зберігає деталі зображення, як, наприклад, у лінійних малюнках, логотипах або ілюстраціях.
Приклад зображення у форматі PNG-24
Особливості
- Використовує приблизно 16,7 млн кольорів у файлі, через що цей формат застосовується для повнокольорових зображень.
- Підтримує багаторівневу прозорість, що дозволяє створювати плавний перехід від прозорої області зображення до кольорової.
- Через те, що алгоритм стиснення зберігає всі кольори і пікселі в зображенні незмінними, якщо порівнювати з іншими форматами, то у PNG-24 кінцевий обсяг графічного файлу виходить найбільшим.
Галузь застосування
Фотографії, малюнки, що містять прозорі та напівпрозоріділянки, малюнки з великою кількістю кольорів та чіткими краями зображень.
Формат JPEG
JPEG (Joint Photographic Experts Group, об'єднана група експертів-фотографів) - популярний формат графічних файлів, який широко застосовується при створенні сайтів і для зберігання фотографій. JPEG підтримує 24-бітовий колір і зберігає яскравість та відтінки кольорів у фотографіях незмінними. Цей формат називають стисненням із втратами, оскільки алгоритм JPEG вибірково відкидає дані. Метод стиснення може внести спотворення зображення, що особливо містить текст, дрібні деталі або точні краї. Формат JPEG не підтримує прозорість. Коли ви зберігаєте фотографію у цьому форматі, прозорі пікселі заповнюються вказаним кольором.
Приклад фотографії у форматі JPEG
Особливості
Галузь застосування
Використовується переважно для фотографій. Не дуже підходить для малюнків, що містять прозорі ділянки, дрібні деталі або текст.
Формат GIF
GIF (Graphics Interchange Format, формат обміну зображеннями) — формат графічних файлів, що широко використовується при створенні анімованих зображень. GIF використовує 8-бітовий колір і ефективно стискає суцільні кольорові області, зберігаючи при цьому деталі зображення.
Приклад анімації у форматі GIF
Особливості
- Кількість кольорів зображення може бути від 2 до 256, але це можуть бути будь-які кольори з 24-бітної палітри. Файл GIF може містити прозорі ділянки. Якщо використовується відмінний від білого кольору фон, він переглядатиме крізь «дірки» у зображенні.
- Підтримує зміну покадрової зображень, що робить формат популярним для створення простої анімації.
- Використовує вільний від втрат метод стиснення
Галузь застосування
Текст, логотипи, ілюстрації з точними краями, анімовані малюнки, зображення з прозорими ділянками, банери.
Формат SVG
SVG (Scalable Vector Graphics, масштабована векторна графіка) - векторний формат, зображення в якому складається не з пікселів, а з об'єктів та кривих. З цієї причини не підходить для растрових фотографій, що складаються з точок, але чудово підходить для ілюстрацій, що містять виразні контури.
Приклад зображення у форматі SVG
Особливості
- Зображення у форматі SVG можна як завгодно масштабувати без втрати якості картинки.
- Об'єм файлу виходить зазвичай невеликим.
- Підтримує анімацію та інтерактивність.
Галузь застосування
Текст, логотипи, ілюстрації з точними краями.
Додавання зображення
Обидва атрибути src та alt є обов'язковими.
Мал. 1. Розміщення файлів
Мал. 2. Розміщення файлів
target.png Єдине ім'я файлу говорить про те, що зображення та веб-сторінка розміщуються в одному місці (рис. 3).
Мал. 3. Розміщення файлів
У прикладі 1 показано кілька способів додавання малюнка на веб-сторінку.
Приклад 1. Додавання зображень
Альтернативний текст
Альтернативний текст є важливою частиною зображень і призначений для людей зі слабким зором, які не можуть розглянути картинки та отримують інформацію із сайту за допомогою слуху. Спеціальні екранні рідери зачитують текст із сайту, а замість зображень вимовляють текст, записаний в атрибуті alt. У звичайних браузерах вміст alt відображається лише у випадку, коли зображення з яких-небудь причин не відображаються на веб-сторінці.
Атрибут alt повинен описувати вміст зображення, а у випадку, якщо картинка виконує декоративну функцію і не несе змістовного змісту, то залишаємо alt порожнім (приклад 2).
Приклад 2. Використання alt
Якщо для зображень потрібна видима підказка, слід скористатися глобальним атрибутом title , який можна додавати до будь-якого елементу, а не лише до картинок. При наведенні курсору зображення з'явиться текст, що містить значення атрибута title (приклад 3).
Приклад 3. Використання title
Вигляд підказки залежить від конкретного браузера і її не можна змінити. На рис. 2 показана спливаюча підказка у браузері Firefox.
Мал. 2. Вигляд спливаючої підказки
Зміна розмірів малюнка
Для зміни розмірів малюнка у елемента передбачені атрибути width (ширина) та height (висота). Як значення використовуються пікселі чи відсотки. У прикладі 4 показано додавання цих атрибутів до .
Приклад 4. Розміри малюнка
Атрибути width і height не обов'язкові, після завантаження зображення браузер самостійно встановить його вихідний розмір. В основному ці атрибути застосовуються з такими цілями:
- зарезервувати місце під картинку;
- зменшити розмір великих фотографій;
- покращити якість зображення для дисплеїв Retina.
Якщо розміри зображення вказані явно, браузер використовує їх для того, щоб відображати відповідну картинку порожню область під час завантаження документа. В іншому випадку браузер чекає, коли малюнок завантажиться повністю, після чого змінює ширину та висоту картинки. При цьому може відбутися переформатування тексту, оскільки спочатку розмір зображення не відомий іавтоматично він встановлюється невеликим.
Ширину та висоту зображення можна змінювати як у меншу, так і більшу сторону. Браузер самостійно прибере зайві пікселі або навпаки, добудує відсутні, щоб отримати зображення відповідного розміру. Якість одержуваної у результаті картинки залежить від її вмісту, у разі треба пам'ятати, що нескінченно збільшувати зображення без втрати деталізації можливо лише у кіно.
Дисплеї Retina відрізняються високою щільністю пікселів та деталізацією зображень, тому звичайні картинки на них виглядають трохи розмитими. Щоб покращити їхню якість, картинки готують подвоєного розміру. Наприклад, якщо на веб-сторінці потрібно фотографія шириною 400 пікселів, ми беремо фотографію шириною 800 пікселів, але в значенні атрибута width залишаємо ширину 400 пікселів.
Атрибути width та height не обов'язково повинні йти спільно. Якщо якийсь із цих атрибутів не вказаний, то браузер самостійно підставить потрібне значення, виходячи з пропорцій зображення.
За рахунок того, що ми самостійно підставляємо ширину і висоту картинки, ми можемо свідомо спотворювати її пропорції, витягуючи картинку по вертикалі або горизонталі.
Крім пікселів як розміри допустимо використовувати відсотковий запис. У такому разі ширина задається щодо батьківського елемента.
З висотою в подібних випадках є складнощі, тому що висота картинки у відсотках вважається тільки у тому випадку, коли висота її батька визначена явно. Якщо висота батьківського елемента ніяк не вказана, запис типу height="100%" ігнорується.