Зображення

Додавання зображення відбувається в два етапи: спочатку готується графічний файл бажаного розміру, потім він додається на сторінку через тег <img>. Сам HTML призначений тільки для того, щоб відобразити необхідну картинку, при цьому ніяк її не змінюючи.

При підготовці зображень слід врахувати кілька моментів.

  1. Оскільки веб-сторінка завантажується по мережі, істотним фактором виступає обсяг графічного файлу, вбудованого в документ. Чим він менше, тим швидше з'явиться зображення.
  2. Розмір картинки необхідно обмежити по ширині, наприклад, встановити не більше 800 пікселів. Інакше зображення цілком не поміститься у вікні браузера, і з'являться смуги прокручування.

Формати файлів

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

Формат GIF

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

Особливості

  • Кількість кольорів в зображенні може бути від 2 до 256, але це можуть бути будь-які кольори з 24-бітної палітри.
  • Файл в форматі GIF може містити прозорі ділянки. Якщо використовується відмінний від білого кольору фон, він буде видимий крізь «дірки» в зображенні.
  • Підтримує покадровую зміну зображень, що робить формат популярним для створення банерів і простих анімації.
  • Використовує вільний від втрат метод стиснення

Галузь застосування

Текст, логотипи, ілюстрації з чіткими межами, анімовані малюнки, зображення з прозорими ділянками, банери.

Формат JPEG

Особливості

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

Галузь застосування

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

Формат PNG-8

PNG-8 (Portable Network Graphics) - формат за своєю дією аналогічний GIF. За запевненням розробників використовує покращений формат стиснення даних, але як показує практика, це не завжди так.

Особливості

  • Використовує 8-бітову палітру (256 кольорів) в зображенні, за що і отримав в своїй назві цифру вісім. При цьому можна вибирати, скільки кольорів буде зберігатися в файлі - від 2 до 256.
  • На відміну від GIF, не відображує анімацію ні в якому вигляді.

Галузь застосування

Текст, логотипи, ілюстрації з чіткими межами.

Формат PNG-24

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

Особливості

  • Використовує приблизно 16,7 млн. кольорів в файлі, через що цей формат застосовується для багатоколірних зображень.
  • Підтримує багаторівневу прозорість, це дозволяє створювати плавний перехід від прозорої області зображення до кольорового, так званий градієнт.
  • Через те, що використовуваний алгоритм стиснення зберігає всі кольори і пікселі в зображенні незмінними, якщо порівнювати з іншими форматами, то у PNG-24 кінцевий обсяг графічного файлу виходить найбільшим.

Галузь застосування

Фотографії, малюнки, що містять прозорі і напівпрозорі ділянки, малюнки з великою кількістю кольорів і чіткими межами зображень.

Додавання малюнка

Щоб додати зображення на веб-сторінку використовується тег <img>, атрибут src який визначає адресу графічного файлу. Загальний синтаксис додавання зображення буде наступний.

URL (Universal Resource Locator) являє собою шлях до графічного файлу. Для його запису можна використовувати як абсолютну, так і відносну адресу. Далі розглянемо кілька різних шляхів до графічного файлу для розміщення його на веб-сторінці. Наприклад візьмемо файл з малюнком, який називається sample.gif, що збережений в папці images кореня сайту.

Якщо на початку адреси варто слеш (символ /), це означає, що відлік йде від кореня сайту. Наприклад, адреса сайту - http://baklan.narod.ru, значить, написавши шлях до зображення як /images/bird.jpg, ми, тим самим говоримо сервера, що показати слід файл http://baklan.narod.ru/ images / bird.jpg. Врахуйте, що подібні посилання зі слешем попереду працюють тільки на веб-сервері, на локальному комп'ютері вони діяти не будуть. Якщо перед адресою додається протокол http (http: //), то мова йде про абсолютне посиланням. Зображення завжди буде завантажуватися із зазначеної адреси в Інтернеті, навіть при збереженні веб-сторінки на локальний комп'ютер. Двокрапка зі слешем (../) на початку адреси говорить про те, що і малюнок і веб-сторінка знаходяться в різних папках, які розміщені на одному рівні. На рис. 1 показаний файл index.html, в який потрібно помістити малюнок pic.gif. Тоді відносний шлях до зображення з index.html буде ../images/pic.gif. Можливі випадки зберігання файлів, що звернення з одного файлу до іншого перетворюється в набір двокрапок, наприклад: ../../../images/pic.gif.

Рис. 1. Приклад розміщення файлів

  • Ім'я папки на початку шляху, без всяких Слешів і двокрапок, повідомляє, що і поточний файл і папка з зображенням знаходяться на одному рівні. Як показано на рис. 2, відносний шлях до малюнка pic.gif з файлу index.html буде images/pic.gif.

Рис. 2. Приклад розміщення файлів

У прикладі 1 показано кілька способів додавання малюнка на веб-сторінку.

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

See the Pen XWJpvqx by persifal17 (@persifal17) on CodePen.

Як правило, в якості формату графічного файлу виступає GIF і JPEG.

Альтернативний текст

Альтернативний текст дозволяє отримати текстову інформацію про малюнок при відключеному в браузері показі картинок або під час їх завантаження. Такий текст з'являється раніше самого зображення і дає уявлення про його зміст. Потім зарезервоване порожнє поле замінюється картинкою.

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

Для створення альтернативного тексту використовується атрибут alt тега <img>, як показано в прикладі 2.

Приклад 2. Додавання альтернативного тексту

See the Pen BaypXVp by persifal17(@persifal17) on CodePen.

Врахуйте, що текст в атрибуті alt обов'язково повинен бути взятий в лапки, як в даному прикладі.

Не всі браузери відображають альтернативний текст у вигляді підказки. Тому для її створення використовуйте атрибут title (приклад 3).

Приклад 3. Спливаюча підказка

See the Pen JjoEgZV by persifal17(@persifal17) on CodePen.

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

Зміна розмірів малюнка

Для зміни розмірів малюнка засобами HTML у тега <img> передбачені атрибути width (ширина) і height (висота).

Відповідно, HTML-код для розміщення даного малюнка, наведено в прикладі 4.

Приклад 4. Розміри малюнка

See the Pen GRgrVBZ by persifal17(@persifal17) on CodePen.

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

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

Код для такого малюнка залишиться практично незмінним і показаний в прикладі 5.

Приклад 5. Зміна розміру малюнка

See the Pen ZEYLgjj by persifal17 (@persifal17) on CodePen.

Така зміна розмірів називається ресемплірування, при цьому алгоритм браузера за своїми можливостями уступає графічним редакторам. Тому збільшувати таким способом зображення потрібно тільки в особливих випадках, тому що сильно погіршується якість картинки. Краще скористатися якою-небудь графічною програмою. Винятком є малюнки, що містять прямокутні області. На рис. 3 наведено файл візерунка, який займає 54 байта і має вихідний розмір 8 на 8 пікселів, збільшених до 150 пікселів.

Рис. 3 Збільшене зображення