Necessary)
29.06.2019, 12:42
Сасите уроды,я передумал Кхм.Всем привет.Сегодня мы поговорим про изображения,как их(не им) правильно вставлять в код.Начнем.
Изображения (любого формата(кстати ,чаще всего используются .png и .jpg/jpeg . ) ) добавляются с помощью элемента и ОБЯЗАТЕЛЬНЫХатрибутов src(Source) и alt.
И так,начнем с атрибута src.
Данный атрибут предназначен для того,чтобы указывать ссылку на саму картинку.делаетсяэто так:
HTML:
Src="ssylka"
.Кстати,ссылки можно использовать как Абсолютные(глобальные ссылки),так и Относительные(ссылки относительные корня сайта).
Атрибут alt .
Данный атрибут нужен для того,чтобы вписать Альтернативный текст.
Делается это так
HTML:
alt="Текст"
Ну ,а зачем нужен альтернативный текст?
Такой текст предназначен для людей,которые не могут увидеть картинку.Существуют спец.устройства,которые называются экранные ридеры,они зачитывают текст с сайта и вместе с ним,содержимое атрибута alt.Значение атрибута alt
HTML:
alt="значение"
может быть пустым,если картинка предназначена для декора.
Теперь соберем все вместе:
HTML:
Вот так добавляются изображения.
Форматы изображений.
Широкое распространение для веб-графики получили два формата png и jpeg. Их многофункционапьность, универсальность, небольшой объём исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт вебизображений. Кроме них на сайтах применяются форматы gif и svg.
Формат Рng-8
Рng-8 (Porable network graphics переносимая сетевая графика) свободный формат созданный для замены gif в котором долгое время использовались
Проприетарные алгоритмы (https://www.blast.hk/redirect/aHR0cHM6Ly9ydS5tLndpa2lwZWRpYS5vcmcvd2lraS8lRDAlOU YlRDElODAlRDAlQkUlRDAlQkYlRDElODAlRDAlQjglRDAlQjUl RDElODIlRDAlQjAlRDElODAlRDAlQkQlRDAlQkUlRDAlQjVfJU QwJUJGJUQxJTgwJUQwJUJFJUQwJUIzJUQxJTgwJUQwJUIwJUQw JUJDJUQwJUJDJUQwJUJEJUQwJUJFJUQwJUI1XyVEMCVCRSVEMC VCMSVEMCVCNSVEMSU4MSVEMCVCRiVEMCVCNSVEMSU4NyVEMCVC NSVEMCVCRCVEMCVCOCVEMCVCNQ) .
Особенности
Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле от 2 до 256.
В отличие от (gif, не отображает анимацию.
Область применения
Текст, логотипы, иллюстрации с чёткими краями.
Формат Png-24
Рng-24 формат, аналогичный Рng-8, но использующий 24-битную палитру цвета Подобно формату jreg сохраняет яркость и оттенки цветов в фотографиях. Подобно gif и формату Рng-8, сохраняет детали изображения, как, например, 3 линейных рисунках, логотипах или иллюстрациях.
Особенности
Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений.
Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной.
Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пиксели в изображении неизменными, если сравнивать с другими форматами, то у Рng-24 конечный объём графического файла получается наибольшим.
Область применения :
Фотографии, рисунки, содержащие прозрачные и полупрозрачные участки, рисунки с большим количеством цветов и чёткими краями изображений.
Формат jpeh
.jpeg (объединённая группа экспертов-Фотографов) популярный Формат
графических файлов, широко применяемый при создании сайтов и для хранения фотографий. Jpeg поддерживает 24-битный цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм jpeg выборочно отвергает данные. Метод сжатия может внести искажения 3 изображение, особенно содержащий текст, мелкие детали или чёткие края. Формат jpeg не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются указанным цветом.
Особенности
Количество цветов в изображении примерно 16,7 миллионов, что вполне достаточно для сохранения фотографического качества изображения.
Основная характеристика формата «качество», позволяющее управлять конечным размером файла. Качество измеряется от 0 до 100, чем выше значение, тем лучше получается картинка, но и увеличивается объём файла.
Поддерживает технологию, так называемый прогрессивный jpeg, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.
Область применения
Используется преимущественно для фотографий. Не очень подходит для
рисунков содержащих прозрачные участки, мелкие детали ИЛИ текст.
Формат gif
Gif (формат для обмена изображениями) формат графических файлов, широко применяемый при создании анимированных изображений. Gif использует 8-битный цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.
Особенности
Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-6итной палитры. Файл в формате Gif может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет сквозь дыры в изображении.
Поддерживает покадровую смену изображений, что делает формат популярным для создания простой анимации.
Использует свободный от потерь метод сжатия
Формат Svg
Svg масштабируемая векторная графика) векторный формат, изображение в котором состоит не из пикселей, а из объектов и кривых. По этой причине не годится для растровых фотографий, состоящих из точек, но прекрасно подходит для иллюстраций, содержащих отчётливые контуры.
Особенности
Изображения в формате svg можно
сколь угодно масштабировать без потери качества картинки.
Объём файла получается обычно небольшим.
Поддерживает анимацию и интерактивность.
Область применения
Текст, логотипы, иллюстрации с чёткими краями.
Кароче,svg это наше все)
Размеры изображений
Размеры изображения меняются через атрибуты width и height.Значения атрибутов должны быть целые числа или проценты.Пример кода с использовнием данных атрибутов
HTML:
Увеличение размеров изображения
(P.s данный код был спижен.Было влом его писать ,сори)
Элемент
Элемент используется для добавления графиков,диаграмм и т.п.
Значение данного элемента не ограничено,допустимо вставлять видео,примеры кода излбражения и т.п. .
Основная особеннность данного элемента в том,что он не должен быть связан с текстом,так что если его переместить в другое место,то смысл не поменяется.
Изображения (любого формата(кстати ,чаще всего используются .png и .jpg/jpeg . ) ) добавляются с помощью элемента и ОБЯЗАТЕЛЬНЫХатрибутов src(Source) и alt.
И так,начнем с атрибута src.
Данный атрибут предназначен для того,чтобы указывать ссылку на саму картинку.делаетсяэто так:
HTML:
Src="ssylka"
.Кстати,ссылки можно использовать как Абсолютные(глобальные ссылки),так и Относительные(ссылки относительные корня сайта).
Атрибут alt .
Данный атрибут нужен для того,чтобы вписать Альтернативный текст.
Делается это так
HTML:
alt="Текст"
Ну ,а зачем нужен альтернативный текст?
Такой текст предназначен для людей,которые не могут увидеть картинку.Существуют спец.устройства,которые называются экранные ридеры,они зачитывают текст с сайта и вместе с ним,содержимое атрибута alt.Значение атрибута alt
HTML:
alt="значение"
может быть пустым,если картинка предназначена для декора.
Теперь соберем все вместе:
HTML:
Вот так добавляются изображения.
Форматы изображений.
Широкое распространение для веб-графики получили два формата png и jpeg. Их многофункционапьность, универсальность, небольшой объём исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт вебизображений. Кроме них на сайтах применяются форматы gif и svg.
Формат Рng-8
Рng-8 (Porable network graphics переносимая сетевая графика) свободный формат созданный для замены gif в котором долгое время использовались
Проприетарные алгоритмы (https://www.blast.hk/redirect/aHR0cHM6Ly9ydS5tLndpa2lwZWRpYS5vcmcvd2lraS8lRDAlOU YlRDElODAlRDAlQkUlRDAlQkYlRDElODAlRDAlQjglRDAlQjUl RDElODIlRDAlQjAlRDElODAlRDAlQkQlRDAlQkUlRDAlQjVfJU QwJUJGJUQxJTgwJUQwJUJFJUQwJUIzJUQxJTgwJUQwJUIwJUQw JUJDJUQwJUJDJUQwJUJEJUQwJUJFJUQwJUI1XyVEMCVCRSVEMC VCMSVEMCVCNSVEMSU4MSVEMCVCRiVEMCVCNSVEMSU4NyVEMCVC NSVEMCVCRCVEMCVCOCVEMCVCNQ) .
Особенности
Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле от 2 до 256.
В отличие от (gif, не отображает анимацию.
Область применения
Текст, логотипы, иллюстрации с чёткими краями.
Формат Png-24
Рng-24 формат, аналогичный Рng-8, но использующий 24-битную палитру цвета Подобно формату jreg сохраняет яркость и оттенки цветов в фотографиях. Подобно gif и формату Рng-8, сохраняет детали изображения, как, например, 3 линейных рисунках, логотипах или иллюстрациях.
Особенности
Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений.
Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной.
Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пиксели в изображении неизменными, если сравнивать с другими форматами, то у Рng-24 конечный объём графического файла получается наибольшим.
Область применения :
Фотографии, рисунки, содержащие прозрачные и полупрозрачные участки, рисунки с большим количеством цветов и чёткими краями изображений.
Формат jpeh
.jpeg (объединённая группа экспертов-Фотографов) популярный Формат
графических файлов, широко применяемый при создании сайтов и для хранения фотографий. Jpeg поддерживает 24-битный цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм jpeg выборочно отвергает данные. Метод сжатия может внести искажения 3 изображение, особенно содержащий текст, мелкие детали или чёткие края. Формат jpeg не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются указанным цветом.
Особенности
Количество цветов в изображении примерно 16,7 миллионов, что вполне достаточно для сохранения фотографического качества изображения.
Основная характеристика формата «качество», позволяющее управлять конечным размером файла. Качество измеряется от 0 до 100, чем выше значение, тем лучше получается картинка, но и увеличивается объём файла.
Поддерживает технологию, так называемый прогрессивный jpeg, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.
Область применения
Используется преимущественно для фотографий. Не очень подходит для
рисунков содержащих прозрачные участки, мелкие детали ИЛИ текст.
Формат gif
Gif (формат для обмена изображениями) формат графических файлов, широко применяемый при создании анимированных изображений. Gif использует 8-битный цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.
Особенности
Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-6итной палитры. Файл в формате Gif может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет сквозь дыры в изображении.
Поддерживает покадровую смену изображений, что делает формат популярным для создания простой анимации.
Использует свободный от потерь метод сжатия
Формат Svg
Svg масштабируемая векторная графика) векторный формат, изображение в котором состоит не из пикселей, а из объектов и кривых. По этой причине не годится для растровых фотографий, состоящих из точек, но прекрасно подходит для иллюстраций, содержащих отчётливые контуры.
Особенности
Изображения в формате svg можно
сколь угодно масштабировать без потери качества картинки.
Объём файла получается обычно небольшим.
Поддерживает анимацию и интерактивность.
Область применения
Текст, логотипы, иллюстрации с чёткими краями.
Кароче,svg это наше все)
Размеры изображений
Размеры изображения меняются через атрибуты width и height.Значения атрибутов должны быть целые числа или проценты.Пример кода с использовнием данных атрибутов
HTML:
Увеличение размеров изображения
(P.s данный код был спижен.Было влом его писать ,сори)
Элемент
Элемент используется для добавления графиков,диаграмм и т.п.
Значение данного элемента не ограничено,допустимо вставлять видео,примеры кода излбражения и т.п. .
Основная особеннность данного элемента в том,что он не должен быть связан с текстом,так что если его переместить в другое место,то смысл не поменяется.