Графіка для вебсередовища
Модуль «Веб-технології»
Урок 19
Викладач
Фотографії, рисунки, фонові малюнки — все це візуальні елементи веб-дизайну. Саме від них залежить зовнішній вигляд сайта, а також швидкість його завантаження. �
Самодуров Д
Основні формати графічних файлів у веб-дизайні�
Самодуров Д передає Гуліді Д
Формат JPEG �
(Joint Photographic Experts Group), або JPG, — це 16-бітовий формат растрових зображень, популярний для зберігання цифрових фотографій, які мають дрібні деталі та яскраві кольори. Зображення у форматі JPEG швидко завантажуються. Проте JPEG не підтримує прозорість, і його не має сенсу використовувати для логотипів і піктограм. �
Гуліда Д передає Стрельникову Є
�Формат GIF
(Graphic Interchange Format) —формат, обмежений 256 кольорами, тому абсолютно не підходить для цифрових фотографій із тисячами відтінків. Проте дуже ефективний для зберігання логотипів, піктограм, таблиць. Підтримує прозорість зображення та дозволяє створювати різноманітну анімацію�
Стрельніков Є передає Михайлову
�Формат PNG
(Portable Network Graphic) —зручно використовувати для простого й плоского графічного дизайну. PNG дозволяє працювати із прозорістю, проте він не підтримує анімацію. Зазвичай цей формат використовують для публікації невеликих картинок, логотипів, іконок, діаграм, графічних елементів із прозорістю, фотографій без втрати якості �
Михайлов І передає Пишному В
Цікаво
WebP - новий графічний формат, розроблений у 2010 році компанією Google з використанням нового алгоритму стиснення і спрямований на зменшення обсягу при збереженні якості.
Особливості WebP:
Наразі підтримується браузерами Chrome, Opera та Firefox
Пишний В передає Громаді В
JPG 44 Кб
WebP 26 Кб
Формат SVG �
(Scalable Vector Graphics) — найбільш поширений векторний формат. Розмір об'єктів SVG набагато менше розміру растрових зображень, а самі зображення не втрачають в якості при масштабуванні. Формат SVG чудово підходить для малокольорових схем, логотипів і іконок.
Громада В
Цікаво
Все більше веб-дизайнерів�пристають до думки, що�растрові зображення повинні використовуватися лише для фотографій.
За своєю суттю будь-який сайт — це інтерфейс, і всі інтерфейси мають бути векторними. Саме тому безумовну популярність набуває використання векторного формату SVG �
Приклад SVG-анімації
https://bashooka.com/coding/30-mindblowing-examples-of-svg-animation/
�
Громада Впередає Зайцеву Д
Тег <img> для вставки зображення
Елемент <img> є стандартним тегом для додавання графічних елементів на веб-сторінку.
Цей тег додає зображення на сторінку в тому місці, де воно має з’явитися.
Тег <img> є непарним тегом.
Обов’язковим атрибутом є src (англ. source — джерело),�який містить шлях до зображення. Зазвичай зазначається або URL-адреса, або відносна адреса щодо місця�розташування веб-сторінки, яка містить посилання на�зображення. ��
Зайцев Д передає Зуєву В
Стандарт розробки сайтів �
<img src="images/2.jpg">
Тег відображає зображення лише графічних форматів�GIF, JPG, PNG і SVG ( та WebP).
В атрибуті обов’язково має вказуватися розширення
Зуєв В
Другий (рекомендований) атрибут �тега <img> – alt (alternative)
Вказується альтернативний текст — опис зображення для тих випадків, коли користувачі не можуть побачити картинку (наприклад, мають вади зору) – тоді використовується скрін-рідер, який читає описи зображень ��Атрибут alt має надати достатньо інформації користувачеві, щоб він склав уявлення про те, що є на зображенні .
Довжина альтернативного тексту не повинна перевищувати 255 символів.�
Зуєв В передає Вітюку М
CSS-властивості зображень �
Розмір зображення задається двома параметрами:
width —ширина зображення;
height — висота зображення. �
Достатньо задати один з атрибутів - інший буде обчислюватися автоматично для збереження пропорцій малюнка.
�Ширину й висоту зображення можна задавати як у пікселях (при цьому розмір картинки буде постійним незалежно�від роздільності екрану), так і у відсотках — тоді розмір картинки залежатиме від роздільності екрана користувача �
Вітюк М передає Олені Борисовні