HTML Информация Гайд Html-Первые шаги.Изображение

[Unnecess4ry]

Сасите уроды,я передумал Кхм.Всем привет.Сегодня мы поговорим про изображения,как их(не им) правильно вставлять в код.Начнем.
Изображения (любого формата(кстати ,чаще всего используются .png и .jpg/jpeg . ) ) добавляются с помощью элемента <img> и ОБЯЗАТЕЛЬНЫХ атрибутов src(Source) и alt.
И так,начнем с атрибута src.
Данный атрибут предназначен для того,чтобы указывать ссылку на саму картинку.делаетсяэто так:

Src="ssylka"

.Кстати,ссылки можно использовать как Абсолютные(глобальные ссылки),так и Относительные(ссылки относительные корня сайта).
Атрибут alt .
Данный атрибут нужен для того,чтобы вписать Альтернативный текст.
Делается это так

alt="Текст"

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

alt="значение"

может быть пустым,если картинка предназначена для декора.
Теперь соберем все вместе:

<img src="ссылка" alt="текст">

Вот так добавляются изображения.

Форматы изображений.
Широкое распространение для веб-графики получили два формата png и jpeg. Их многофункционапьность, универсальность, небольшой объём исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт вебизображений. Кроме них на сайтах применяются форматы gif и svg.

Формат Рng-8

Рng-8 (Porable network graphics переносимая сетевая графика) свободный формат созданный для замены gif в котором долгое время использовались
Проприетарные алгоритмы .
Особенности

Использует 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.Значения атрибутов должны быть целые числа или проценты.Пример кода с использовнием данных атрибутов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Увеличение размеров изображения</title>
</head>
<body>
  <p><img src="images/figure.jpg" width="200" height="222" alt="Винни-Пух"></p>
</body>
</html>

(P.s данный код был спижен.Было влом его писать ,сори)

Элемент<figure>
Элемент <figure> используется для добавления графиков,диаграмм и т.п.
Значение данного элемента не ограничено,допустимо вставлять видео,примеры кода излбражения и т.п. .
Основная особеннность данного элемента в том,что он не должен быть связан с текстом,так что если его переместить в другое место,то смысл не поменяется.

 

[ufdhbi]

Еще alt для поисковых систем нужен

 

[Unnecess4ry]

(P.s данный код был спижен.Было влом его писать ,сори)

этот дебил пиздит статьи отсюда http://htmlbook.ru/samhtml/izobrazheniya и кидает их не БХ, просто долбоеб

Ну ты да,вот это,шерлок.Кроме кода,я с того сайта взял ровным счетом нихуя.

Еще alt для поисковых систем нужен

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

 

[James Hawk]

Я могу ошибаться, но это же общая инфа о работе с изображениями. Такими темпами будут создавать статьи с туторами, куда вставлять тэг <title>?
---
Upd: Открыл раздел веб-разработки и увидел подобные темы там

 

[Unnecess4ry]

Я могу ошибаться, но это же общая инфа о работе с изображениями. Такими темпами будут создавать статьи с туторами, куда вставлять тэг <title>?

Это азы,телега была создана только после того,как изобрели колесо.

 

[James Hawk]

Это азы,телега была создана только после того,как изобрели колесо.

Статьи обычно создаются для того, чтобы научить чему-то новому (как делалось с появлением мунлоадера) или же показать как делать нестандартные вещи с известными плагинами/языками и прочим

 

[Unnecess4ry]

Давай я тебе покажу кактделать овер пиздатые вещи,нотне скажу как.

 

[James Hawk]

Давай я тебе покажу кактделать овер пиздатые вещи,нотне скажу как.

Ты сам понял, что написал?

 

[Unnecess4ry]

Ты сам понял, что написал?

Да.Ты хочешь,чтобы я показал что-то уникальное,но сам не умеешь делать что-либо и тебе нужно освоить азы (это пример),данные темы помогают осваивать азы.

 

[Oniel]

Много какой-то совершенно ненужной информации про форматы изображения. При этом, ничего не написал про важные атрибуты: align, lowsrc.

 

[Unnecess4ry]

Много какой-то совершенно ненужной информации про форматы изображения. При этом, ничего не написал про важные атрибуты: align, lowsrc.

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

Много какой-то совершенно ненужной информации про форматы изображения. При этом, ничего не написал про важные атрибуты: align, lowsrc.

Спасибо.

Было принято решение,больше не продолжать .

 

[executor_lzt]

Нельзя использовать проценты

Что за бред?Почему это нельзя?

 

[Unnecess4ry]

Что за бред?Почему это нельзя?

Как мне известно,ты Не сможешь задать атрибутам высота и ширина проценты,только целые числа,эти атрибуты считаются пикселями,как ты сможешь задать атрибуту значение в 50%пикселей?
Вообще,чтобы можно было сделать через проценты,используется css и в расчет берётся процентное соотношение окна и картинки.
Делается это таким образом:

   body {
    background: url(images/imagename.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные */
   }

 

[executor_lzt]

Как мне известно,ты Не сможешь задать атрибутам высота и ширина проценты,только целые числа,эти атрибуты считаются пикселями,как ты сможешь задать атрибуту значение в 50%пикселей?
Вообще,чтобы можно было сделать через проценты,используется css и в расчет берётся процентное соотношение окна и картинки.
Делается это таким образом:

<style>
   body {
    background: url(images/imagename.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные */
   }
  </style>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
  </head>
  <body>
    <img src="https://miro.medium.com/max/1000/1*eCgnklKoshMG_nohE0Txyw.jpeg"
    alt="панда на дереве" style="width:50%;">
  </body>
</html>

Проверяй

 

[Unnecess4ry]

Исправил,меня учил древнегреческий кодер,бывает)