Размещение графики на Web - странице

1. Размещение графики на Web-странице

2.

Вторым по значимости компонентом
наполнения Web-страниц после текста,
несомненно, будет графическое
оформление.
Это различного рода рисунки,
фотографии и видеоклипы.

3. Основные концепции web-графики

Изображение — это прямоугольник из пикселей разных цветов. Цвета
идеи тифицируются по их позиции в палитре, в свою очередь палитра
— это массив цветов. Каждая запись в палитре имеет три разных
цветовых составляющих — одна для красного, одна для зеленого и
одна для синего. Насыщенность каждого из цвета варьируется от 0
(цвет отсутствует) до 255 (полная насыщенность).
• Изображения редко хранятся просто в виде кучи пикселей и палитры.
Вместо этого используются различные графические форматы файлов
(GIF, JPEG, PNG и т.д.), позволяющие сделать размер изображения
меньше.
• Разные форматы по-разному обрабатывают прозрачность.
Прозрачность определяет, где и как фон страницы будет показан через
изображение.
Например, PNG поддерживает альфа-канал: дополнительное значение
для каждого пикселя, определяющее степень прозрачности в этой
точке. Другие форматы, например, GIF, просто добавляют одну запись
в палитру, которая означает прозрачность. Некоторые форматы,
например, JPEG, вообще не поддерживают прозрачность.

4.

• Сглаживание (antialiasing) — технология, позволяющая
перемещать или перекрашивать пиксели на границе фигуры,
чтобы сделать постепенный переход между фигурой и фоном.
Позволяет избавиться от грубых и зубчатых границ, делающих
изображения непривлекательными. Некоторые функции
рисования позволяют реализовать сглаживание.
• Учитывая, что есть 256 возможных значений для красной,
зеленой и синей составляющих, у нас есть 16 777 216
возможных цветов для каждого пикселя. Некоторые форматы
файлов ограничивают число цветов палитры (например, GIF
поддерживает не более 256 цветов), другие позволяют вам
создавать столько цветов, сколько вам нужно. Последние
известны как форматы true color (истинный цвет), поскольку они
поддерживают 24 битный цвет (по 8 битов для красного,
зеленого и синего), что при этом дает больше оттенков, чем
человеческий глаз может воспринять.

5.

• логитип является неотъемлемой частью любого
современного сайта.
• Если вы решили запустить свой проект — на первых
этапах, кроме самого концепта сайта, вам также
следует поработать над графическим оформлением
его базовых элементов. Если вы не сильны в
решении графических задач — их стоит
делегировать опытным специалистам, которые
опираясь на современные тренды предоставят
различные варианты решения.
• Разработка логотипа является одной из таких задач,.

6.

Браузеры (html 4)в состоянии отображать
три вида графических файлов. Это
файлы форматов GIF, JPEG и PNG.
1. Файлы формата GIF позволяют
создавать анимированные изображения.
2. JPEG-файлы обычно применяются для
сохранения фотографических
изображений.
3. формат PNG позволяет совмещать
хорошее качество изображения и
маленький объем графического файла.

7. Форматы файлов изображений, которые наиболее часто используются в Интернете:

• APNG (Animated Portable Network Graphics) —
хороший выбор для анимационных
последовательностей без потерь (GIF менее
производительен).
• AVIF (формат файла изображения AV1) — хороший
выбор как для изображений, так и для
анимированных изображений благодаря высокой
производительности.
• GIF (формат графического обмена) — хороший
выбор для простых изображений и анимации.
• JPEG (изображение Объединенной
фотографической экспертной группы) — хороший
выбор для сжатия неподвижных изображений с
потерями (на данный момент самый популярный).

8.

• PNG (портативная сетевая графика) —
хороший выбор для сжатия неподвижных
изображений без потерь (качество немного
лучше, чем у JPEG).
• SVG (Масштабируемая векторная
графика) — формат векторного
изображения. Используйте для изображений,
которые необходимо точно нарисовать в
разных размерах.
• WebP (формат веб-изображений) —
отличный выбор как для изображений, так и
для анимированных изображений.

9.

• Рекомендуется использовать такие форматы,
как WebP и AVIF, поскольку они работают
намного лучше, чем PNG, JPEG, GIF, как для
неподвижных, так и для анимированных
изображений.
• SVG остается рекомендуемым форматом для
изображений, которые необходимо точно
отрисовывать в разных размерах.

10. Ошибки загрузки изображений

Если при загрузке или рендеринге изображения возникает ошибка
и onerror для этого события установлен обработчик
событий error, будет вызван этот обработчик событий. Это
может произойти в нескольких ситуациях:
• Атрибут src пуст ( "") или null.
• URL - src адрес совпадает с URL-адресом страницы, на которой
в данный момент находится пользователь.
• Изображение каким-то образом повреждено, поэтому его
загрузка невозможна.
• Метаданные изображения повреждены таким образом, что
невозможно получить его размеры, а в <img>атрибутах
элемента размеры не указаны.
• Формат изображения не поддерживается
пользовательским агентом .

11. <img>: элемент встраивания изображения.

<img>: элемент встраивания
изображения.

12. тег <img> с параметрами

тег <img> с параметрами
тег не имеет закрывающей
пары, так как он не создает
какой-либо области действия
правила отображения, он лишь
внедряет в содержимое Webстраницы графическое
изображение.

13. Атрибуты тега <img>:

Атрибуты тега <img>:
1. src - основной и обязательный
атрибут тега <img> от англ. Sourse
Пример:
<img src = picture.png>
URL-адрес изображения . Обязательный
для <img>элемента.
В браузерах, поддерживающих srcset, src
рассматривается как изображение-кандидат с
дескриптором плотности пикселей 1x, если только
изображение с этим дескриптором плотности
пикселей уже не определено в srcset, или если
оно не srcset содержит w-дескрипторы.

14. w-дескрипторы

• W дескриптор предоставляет
фактическую ширину изображения в
пикселях, тем самым позволяя
браузеру определить, какое
изображения больше

15.

значение этого атрибута - адрес
вставляемого графического файла или его
URL. Если графический файл находится на
том же Web-сервере, то достаточно
записать полное наименование файла,
включая путь к нему по вложенным
каталогам, т. е. если в той же папке, что и
HTML-файлы с Web-страницами,
расположен каталог images с рисунками, то
тег вставки графического изображения
приобретет вид:
<img src="images/pictl .gif ">

16. 2. параметр: alt

глобальные атрибуты .
каждый браузер имеет возможность
отключения загрузки графики. Поэтому
следует использовать альтернативное
текстовое представление рисунка текст, который будет отображаться
вместо рисунка, если тот не может быть
по каким-либо причинам загружен
браузером.
пример:
<img src="images/pictl.gif"
alt="Это я на отдыхе">

17.

Браузеры не всегда отображают изображения. Существует ряд
ситуаций, в которых браузер может не отображать
изображения, например:
• Невизуальные браузеры (например, те, которые используются
людьми с нарушениями зрения)
• Пользователь решает не отображать изображения (экономия
трафика и соображения конфиденциальности).
• Изображение недопустимо или имеет неподдерживаемый тип.
• В этих случаях браузер может заменить изображение текстом
в alt атрибуте элемента. Alt
• По этим и другим причинам, по возможности , предоставляйте
полезную ценность .

18.

• Установка для этого атрибута пустой строки ( alt="")
указывает на то, что это изображение не является
ключевой частью контента (оно является
украшением или пикселем отслеживания) и что
невизуальные браузеры могут исключить его
из рендеринга .
• Визуальные браузеры также скроют значок
разбитого изображения, если altатрибут пуст и
изображение не отображается.
• Этот атрибут также используется при копировании и
вставке изображения в текст или сохранении
связанного изображения в закладке.

19.

если графическое изображение всетаки показывается браузером, текст
альтернативного текстового
представления отображается в виде
«хинта», короткой текстовой подсказки,
когда пользователь наводит курсор
мыши на искомое графическое
изображение.

20. 3. crossorigin

• Указывает, должна ли выборка изображения
выполняться с использованием
запроса CORS . Данные изображения
из изображения с поддержкой CORS, возвращенного
из запроса CORS, можно повторно использовать
в <canvas>элементе без пометки « испорчено ».
• Если crossorigin атрибут не указан, то отправляется
запрос, отличный от CORS (без Origin заголовка
запроса), и браузер помечает изображение как
испорченное и ограничивает доступ к данным
изображения, предотвращая его использование
в <canvas> элементах.

21.

• Если crossorigin атрибут указан , то
отправляется запрос CORS (с Origin
заголовком запроса); но если сервер не
разрешает исходному сайту доступ к данным
изображения из разных источников (не
отправляя какой-либо Access-Control-AllowOrigin заголовок ответа или не включая
источник сайта в любой Access-Control-AllowOrigin заголовок ответа, который он
отправляет), то браузер блокирует
изображение от загрузки и регистрирует
ошибку CORS в консоли devtools.

22. Допустимые значения:

• anonymous
– Запрос CORS отправляется без учетных данных (то есть
без файлов cookie , сертификатов X.509 или Authorization
заголовка запроса).
• use-credentials
– Запрос CORS отправляется со всеми включенными
учетными данными (то есть файлами cookie, сертификатами
X.509 и Authorization заголовком запроса).
– Если сервер не разрешает делиться учетными данными с
исходным сайтом (путем отправки обратно Access-ControlAllow-Credentials: true заголовка ответа), то браузер
помечает изображение как испорченное и ограничивает
доступ к данным изображения.

23. 5. decoding

Этот атрибут подсказывает браузеру:
1. следует ли ему выполнять декодирование
изображения вместе с рендерингом другого
содержимого DOM за один шаг представления,
который выглядит более «правильным» ( sync),
2. или сначала визуализировать и представить
другой контент DOM, а затем декодировать его.
изображение и представить его позже ( async).
На практике async это означает, что
следующая отрисовка не ждет декодирования
изображения.

24.

• Часто бывает трудно заметить какой-либо заметный эффект
при использовании decoding на
статичных <img>элементах. Скорее всего, они изначально будут
отображаться как пустые изображения, в то время как файлы
изображений извлекаются (либо из сети, либо из кэша), а затем
в любом случае обрабатываются независимо, поэтому
«синхронизация» обновлений контента менее очевидна. Однако
блокировка рендеринга при декодировании случается, хотя
зачастую и весьма небольшая, но ее можно измерить — даже
если ее трудно наблюдать человеческим глазом. См. Что на
самом деле делает атрибут декодирования изображения? для
более детального анализа (tunetheweb.com, 2023).
• Использование разных decodingтипов может привести к более
заметным различиям при динамической
вставке <img>элементов в DOM с помощью JavaScript

25. Допустимые значения:

• sync
– Декодируйте изображение синхронно с
рендерингом остального содержимого DOM и
представьте все вместе.
• async
– Декодируйте изображение асинхронно после
рендеринга и представления остального
содержимого DOM.
• auto
– Нет предпочтения режиму
декодирования; браузер решает, что лучше для
пользователя. Это значение по умолчанию.

26. 7. elementtiming

– Отмечает изображение для наблюдения
API PerformanceElementTiming.
– Данное значение становится
идентификатором наблюдаемого элемента
изображения.
См. также elementtiming страницу атрибутов.

27. 8. fetchpriority

Предоставляет подсказку об относительном приоритете, который
следует использовать при получении изображения.
Допустимые значения:
• high
– Сигнализирует о высокоприоритетной выборке относительно
других изображений.
• low
– Сигнализирует о низком приоритете выборки по сравнению с
другими изображениями.
• auto
– По умолчанию: сигнализирует об автоматическом определении
приоритета выборки относительно других изображений.

28.

Внутренняя высота изображения в
пикселях. Должно быть целое число без
единицы.
Включает height и width позволяет браузеру
рассчитать соотношение сторон изображения
до его загрузки.
Это соотношение сторон используется для
резервирования места, необходимого для
отображения изображения, уменьшая или даже
предотвращая сдвиг макета при загрузке
изображения и его отображении на экране.
Уменьшение смещения макета является
основным компонентом хорошего
пользовательского опыта и
производительности в Интернете.

29. 9. ismap

Этот логический атрибут указывает, что
изображение является частью карты на
стороне сервера .
Если да, то координаты места, где
пользователь нажал на изображение,
отправляются на сервер.
• Этот атрибут разрешен только в том случае,
если <img> элемент является потомком
элемента <a> с допустимым href атрибутом.
Это дает пользователям без указывающих
устройств резервный пункт назначения.

30. 10. loading

Указывает, как браузер должен загружать
изображение:
– eager
• Загружает изображение немедленно, независимо от того,
находится ли оно в данный момент в видимом окне
просмотра (это значение по умолчанию).
– lazy
• Откладывает загрузку изображения до тех пор, пока оно
не достигнет расчетного расстояния от области
просмотра, определенного браузером.
Цель состоит в том, чтобы избежать использования
пропускной способности сети и хранилища, необходимой
для обработки изображения, до тех пор, пока не будет
достаточно уверенности, что оно понадобится. Обычно это
повышает производительность контента в большинстве
типичных случаев использования.

31.

Загрузка откладывается только при
включенном JavaScript.
Это мера против отслеживания, поскольку,
если бы пользовательский агент поддерживал
отложенную загрузку при отключении
сценариев, сайт все равно мог бы отслеживать
приблизительную позицию прокрутки
пользователя на протяжении сеанса,
стратегически размещая изображения в
разметке страницы таким образом, чтобы
сервер может отслеживать, сколько
изображений и когда запрошено.

32. 11. referrerpolicy

Строка, указывающая, какой реферер
использовать при получении ресурса:
• no-referrer: Referer заголовок не будет отправлен.
• no-referrer-when-downgrade: Referer заголовок не будет
отправлен в источник без TLS ( HTTPS ).
• origin: Отправляемый реферер будет ограничен
источником ссылающейся страницы:
ее схемой , хостом и портом .
• origin-when-cross-origin: Реферер, отправленный в
другие источники, будет ограничен схемой, хостом и
портом. Навигации по тому же источнику по-прежнему
будут включать путь.
• same-origin: реферер будет отправлен на тот же
источник , но запросы из разных источников не будут
содержать никакой информации о реферере.

33.

• strict-origin: отправлять источник документа в качестве
источника ссылки только в том случае, если уровень
безопасности протокола остается прежним (HTTPS→HTTPS),
но не отправлять его в менее безопасное место назначения
(HTTPS→HTTP).
• strict-origin-when-cross-origin(по умолчанию): отправлять
полный URL-адрес при выполнении запроса того же источника,
отправлять источник только тогда, когда уровень безопасности
протокола остается прежним (HTTPS→HTTPS), и не отправлять
заголовок в менее безопасный пункт назначения
(HTTPS→HTTP).
• unsafe-url: Реферер будет включать источник и путь (но
не фрагмент , пароль или имя пользователя ). Это значение
небезопасно , поскольку оно приводит к утечке источников и
путей от ресурсов, защищенных TLS, к незащищенным
источникам.

34. 12. sizes

Одна или несколько строк, разделенных запятыми,
обозначающих набор исходных размеров.
Каждый размер источника состоит из:
• Состояние СМИ . Это должно быть опущено для
последнего элемента в списке.
• Значение исходного размера.
• Медиа-условия описывают свойства области
просмотра , а не изображения .
Например, (max-height: 500px) 1000px предлагает
использовать источник шириной 1000 пикселей,
если область просмотра не превышает 500 пикселей.

35.

• Значения исходного размера определяют
предполагаемый размер отображаемого
изображения. Пользовательские агенты используют
текущий размер источника для выбора одного из
источников, предоставляемых атрибутом srcset,
когда эти источники описываются с
использованием w-дескрипторов ширины ( ).
• Выбранный исходный размер влияет на внутренний
размер изображения (размер изображения, если
не применен стиль CSS ).
• Если srcset атрибут отсутствует или не содержит
значений с дескриптором ширины, атрибут sizes не
имеет никакого эффекта.

36. 13. srcset

– Одна или несколько строк, разделенных
запятыми, обозначающих возможные источники
изображений, которые может
использовать пользовательский агент .
Каждая строка состоит из:
• URL -адрес изображения
• Необязательно, пробелы, за которыми следует одно из:
– Дескриптор ширины (положительное целое число, за
которым сразу следует w). Дескриптор ширины делится на
исходный размер, указанный в sizesатрибуте, для расчета
эффективной плотности пикселей.
– Дескриптор плотности пикселей (положительное число с
плавающей запятой, за которым сразу следует x).

37.

• Если дескриптор не указан, источнику назначается дескриптор
по умолчанию 1x.
• Неправильно смешивать дескрипторы ширины и дескрипторы
плотности пикселей в одном srcset атрибуте. Дублирующиеся
дескрипторы (например, два источника в одном и том же srcset,
оба описаны с помощью 2x) также недействительны.
• Если srcset атрибут использует дескрипторы ширины, sizes
атрибут также должен присутствовать, иначе он srcset сам
будет игнорироваться.
• Пользовательский агент выбирает любой из доступных
источников по своему усмотрению. Это дает им значительную
свободу действий для адаптации своего выбора на основе
таких факторов, как предпочтения пользователя или
условия пропускной способности .

38. 13. параметр: longdesс

существует и более развернутый
вариант создания подобных текстовых
подсказок.
Задается адрес интернет-ресурса, на
котором находится полное описание
данного графического изображения.
В качестве значения этого параметра
указывается, естественно, URL ресурса
с описанием изображения.

39. 14. Параметр name

позволяет задавать уникальное имя
изображения, которое идентифицирует
этот элемент оформления Webстраницы. Этот параметр оставлен для
целей обратной совместимости, он
остался от предыдущих версий
стандарта HTML.
Сейчас для этих целей все теги
используют параметр id.
• name -Устарело
– Имя элемента. Вместо этого используйте id
атрибут.

40. 15.16. параметры height и width

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

41.

Браузеры стремятся сохранять
пропорции рисунка, поэтому явное
задание размеров, меняющее
пропорции, может быть
проигнорировано браузером, и тот
выберет такие размеры, которые
были бы максимально близки к
указанным пользователем, не
нарушая пропорций

42. II. Устаревшие атрибуты

1. align -Устарело
– Выравнивает изображение с окружающим
контекстом. Используйте свойства float и/или CSS вместо
этого атрибута. Допустимые значения:vertical-align
• top
– Эквивалент vertical-align: top или vertical-align: text-top
• middle
– Эквивалентно vertical-align: -moz-middle-with-baseline
• bottom
– Значение по умолчанию, эквивалентное vertical-align: unset
или vertical-align: initial
• Left - Эквивалентно float: left
• Right - Эквивалентно float: right

43.

2. border Устарело
– Ширина рамки вокруг изображения.
– Вместо этого используйте
свойство CSS .border

44. 7.8. параметры hspace и vspace

можем указывать величину чистого
пространства, которое будет отделять
графическое изображение от окружающих его
других элементов оформления Web-страницы,
т. е. задавать отступ рисунка.
Параметр hspace устанавливает отступ по
горизонтали в пикселах,
Количество пикселей пустого пространства слева
и справа от изображения.
Вместо этого используйте margin свойство CSS.
vspace — отступ по вертикали. Количество
пикселей белого пространства над и под
изображением. Вместо этого используйте margin
свойство CSS.

45.

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

46. 9. параметр border

устанавливает толщину границы,
окружающей рисунок.
значением параметра является число,
указывающее толщину в пикселах.
По умолчанию используется нулевое
значение, делающее границу
невидимой.

47. 10. параметр align

выравнивание графического объекта тносительно
обтекающего его текста. Атрибут align для
тега <img> считается устаревшим, тем не
менее его все еще поддерживают все
основные браузеры.
Значения:
1. bottom, смещает вниз
2. middle позволяет центрировать строку по
вертикали
3. top смещает ее наверх применяются для позиционирования первой строки текста,
обтекающего рисунок по вертикали.
4. left для выравнивания по горизонтали
графического изображения -смещает рисунок к
левому краю блока, в котором тот отображается
5. right— смещает рисунок правому краю блока.

48.

Значение
Описание
• Left Выравнивание по левому краю
• Right Выравнивание по правому краю
• Middle Выравнивание по середине
• Top Выравнивание по верху
• Bottom Выравнивание по низу

49.

<html>
<head>
<title>Рисунки и текст</title> </head>
<body>
<р>Это текст, который обтекает
рисунок.
<img src="redhood.gif">
Это текст, который обтекает
рисунок. Это текст, который
обтекает рисунок.
Это текст, который обтекает
рисунок.</р>
</body>
</html>

50.

51. Пример: тег отображения рисунка с параметром горизонтального выравнивания

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Рисунки и текст</title> <body>
<р>Это текст, который обтекает
рисунок.
<img src="redhood.gif” align=“left">
Это текст который обтекает рисунок.
Это текст, который обтекает рисунок.
Это текст, который обтекает
рисунок.</р>
</body>
</html>

52.

• <!DOCTYPE HTML >
<html>
<head>
<title>Рисунки и текст</title>
<body>
<р>Это текст, который обтекает
рисунок.<img src="redhood.gif"
align="middle">
Это текст, который обтекает рисунок.
Это текст,
который обтекает рисунок.
Это текст, который обтекает
рисунок.</р>
</body>
</html>

53.

54.

55.

56. источники

• https://hcdev.ru/html/img/
• http://html5ru.com/html5/grafika-v-html5
• http://on-line-teaching.com/html/lsn009.html
• http://www.seoded.ru/beginner/html/grafika.html
• http://jobwebration.ru/kak_samomu_sozdat_sait
_besplatno/grafika_html.html
• https://developer.mozilla.org/enUS/docs/Web/HTML/Element/img
• https://zarabotat-na-sajte.ru/uroki-html/tegimg.html