diff options
Diffstat (limited to 'files/ru/web/html/element/img/index.html')
| -rw-r--r-- | files/ru/web/html/element/img/index.html | 388 |
1 files changed, 388 insertions, 0 deletions
diff --git a/files/ru/web/html/element/img/index.html b/files/ru/web/html/element/img/index.html new file mode 100644 index 0000000000..d21362cce8 --- /dev/null +++ b/files/ru/web/html/element/img/index.html @@ -0,0 +1,388 @@ +--- +title: <img> +slug: Web/HTML/Element/img +tags: + - Element + - HTML + - Web + - Веб + - Графика + - Изображение + - Картинки + - Справка + - Фотографии + - Элемент + - мультимедиа +translation_of: Web/HTML/Element/img +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML-элемент <code><img></code></strong> встраивает изображение в документ. Это <a href="/ru/docs/Web/CSS/Замещаемый_элемент">замещаемый элемент</a>.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>Приведенный выше пример показывает очень простое использование элемента <code><img></code>. Атрибут <code>src</code> обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут <code>alt</code> содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.</p> + +<p>Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:</p> + +<ul> + <li>управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты <code>crossorigin</code> и <code>referrerpolicy</code>;</li> + <li>настройка {{glossary("Intrinsic Size", "внутреннего размера")}} с использованием <code>width</code> и <code>hight</code>, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;</li> + <li>адаптивные изображения рекомендуется использовать с атрибутами <code>sizes</code> и <code>srcset</code> (смотрите также элемент {{htmlelement("picture")}} и наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>").</li> +</ul> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/ru/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Категории контента</a></dfn></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Встроенный_контент">встроенный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>. Если элемент имеет атрибут <code>usemap</code>, он так же принадлежит к категории <a href="/ru/docs/Web/Guide/HTML/Content_categories#Интерактивный_контент">интерактивного контента</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Никакое, так как это {{Glossary("empty element", "пустой элемент")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тега</th> + <td>Должен иметь открывающий тег и не должен иметь закрывающий.</td> + </tr> + <tr> + <th scope="row">Разрешенные родительские элементы</th> + <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td> + </tr> + <tr> + <th scope="row">Разрешённые роли ARIA</th> + <td>Любые</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Поддерживаемые_форматы_изображений">Поддерживаемые форматы изображений</h2> + +<p>Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные {{glossary("user agent","пользовательские агенты")}} поддерживают разные наборы форматов.</p> + +<h3 id="Firefox">Firefox</h3> + +<p>Форматы изображений, поддерживаемые Firefox:</p> + +<ul> + <li><a class="external" href="https://ru.wikipedia.org/wiki/JPEG">JPEG</a>;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/GIF">GIF</a>, включая анимированные GIF;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/PNG">PNG</a>;</li> + <li><a href="/en-US/docs/Animated_PNG_graphics">APNG</a>;</li> + <li><a href="/ru/docs/Web/SVG">SVG</a>;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/BMP">BMP</a>;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)">BMP ICO</a>;</li> + <li><a class="external" href="https://ru.wikipedia.org/wiki/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)">PNG ICO</a>.</li> +</ul> + +<h2 id="Ошибки_загрузки_изображения">Ошибки загрузки изображения</h2> + +<p>Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события {{htmlattrxref("onerror")}} был настроен на обработку события {{event("error")}}, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:</p> + +<ul> + <li>атрибут <code>src</code> пустой или {{glossary("null")}};</li> + <li>указанный {{glossary("URL")}} в атрибуте <code>src</code> совпадает с URL страницы, на которой в данный момент находится пользователь;</li> + <li>указанное изображение каким-то образом повреждено, что препятствует его загрузке;</li> + <li>метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <code><img></code> не было указано никаких размеров;</li> + <li>указанное изображение имеет формат, который не поддерживается {{Glossary("user agent", "пользовательским агентом")}}.</li> +</ul> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd> + <p>Этим атрибутом задается альтернативное текстовое описание изображения.</p> + + <div class="note"> + <p><strong>Заметка:</strong> Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или <a href="#Supported_image_formats">неподдерживаемый тип</a>. В этих случаях браузер может заменить изображение текстом записанным в атрибуте <code>alt</code> элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте <code>alt</code>.</p> + </div> + + <div class="note"> + <p><strong>Заметка:</strong> Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (<code>alt=""</code>) указывает, что это изображение <em>не</em> является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при {{glossary("Rendering engine", "рендеринге")}}.</p> + </div> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd> + <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. <a href="/en-US/docs/Web/HTML/CORS_enabled_image">Изображения с включенной поддержкой CORS</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорченными</a>". Допустимые значения:</p> + + <ul> + <li><code>anonymous</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорчено</a>" и его использование будет ограничено;</li> + <li><code>use-credentials</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется вместе с передачей параметров доступа (т.е. есть {{glossary("cookie")}}, используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорчено</a>" и его использование будет ограничено.</li> + </ul> + + <p>Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}), ограничивая его использование в элементе {{HTMLElement("canvas")}}. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение <code>anonymous</code>. Для получения дополнительной информации смотрите "<a href="/ru/docs/Web/HTML/CORS_settings_attributes">Настройки атрибутов CORS</a>".</p> + </dd> + <dt>{{htmlattrdef("decoding")}}</dt> + <dd> + <p>Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:</p> + + <ul> + <li><code>sync</code>: Декодировать изображение синхронно для одновременного отображения с другим контентом;</li> + <li><code>async</code>: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;</li> + <li><code>auto</code>: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Внутренняя высота (см. {{glossary("Intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd> + <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd> + <p>Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:</p> + + <ul> + <li><code>auto</code>: Указывает на <strong>отсутствие предпочтений</strong>. Браузер может использовать собственную эвристику для определения приоритета изображения;</li> + <li><code>high</code>: Указывает браузеру, что изображение имеет <strong>высокий</strong> приоритет;</li> + <li><code>low</code>: Указывает браузеру, что изображение имеет <strong>низкий</strong> приоритет.</li> + </ul> + </dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> + <dd>Этот атрибут говорит браузеру игнорировать действительный {{glossary("Intrinsic size", "внутренний размер")}} изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а <code>narutalWidth</code>/<code>naturalHeight</code> изображения будут возвращать значения, указанные в этом атрибуте. <a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">Объяснение</a>, <a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">примеры</a>.</dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd> + <p>Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.</p> + + <div class="note"> + <p><strong>Заметка:</strong> Этот атрибут разрешен, только если элемент <code><img></code> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.</p> + </div> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd> + <p>Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:</p> + + <ul> + <li><code>no-referrer</code>: Заголовок {{httpheader("Referer")}} не будет отправлен;</li> + <li><code>no-referrer-when-downgrade</code>: Заголовок {{httpheader("Referer")}} не отправляется, когда происходит переход к источнику без {{glossary("TLS")}} ({{glossary("HTTPS")}}). Это поведение по умолчанию для {{glossary("user agent", "пользовательских агентов")}}, если не указано иное;</li> + <li><code>origin</code>: Заголовок {{httpheader("Referer")}} будет содержать схему адресации ресурса (HTTP, HTTPS, {{glossary("FTP")}} и т.д), {{glossary("host", "хост")}} и {{glossary("port", "порт")}};</li> + <li><code>origin-when-cross-origin</code>: Переход на другие источники ограничит включенные реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;</li> + <li><code>unsafe-url</code>: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищенных {{glossary("TLS")}}, к незащищенным источникам.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd> + <p>Список из одного или нескольких строк, разделенных запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:</p> + + <ol> + <li>Условия меда-запроса. Оно должно быть пропущено для последнего элемента.</li> + <li>Значения размера источника.</li> + </ol> + + <p>Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. {{glossary("user agent", "Пользовательские агенты")}} используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом <code>srcset</code>, если эти источники описываются с помощью дескриптора ширины '<code>w</code>' (сокращение от width). Выбранный размер источника влияет на {{glossary("intrinsic size", "внутренний размер")}} изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут <code>srcset</code> отсутствует или не содержит значений с дискриптором '<code>w</code>', то атрибут <code>sizes</code> не будет иметь никакого эффекта.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>{{glossary("URL")}} изображения. Этот атрибут является обязательным для элемента <code><img></code>. В браузерах, поддерживающих <code>srcset</code>, <code>src</code> обрабатывается как изображение-кандидат с дескриптором плотности пикселей <code>1x</code>, если только изображение с этим дескриптором уже не определено в <code>srcset</code> или если <code>srcset</code> не содержит дескрипторы '<code>w</code>'.</dd> + <dt>{{htmlattrdef("srcset")}}</dt> + <dd> + <p>Список из одной или нескольких строк, разделенных запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:</p> + + <ol> + <li>{{glossary("URL")}} изображения.</li> + <li>Необязательного, пробела, сопровождаемого: + <ul> + <li>дескриптором ширины или положительным целым числом, за которым сразу же следует '<code>w</code>'. Дескриптор ширины делится на размер источника, полученный из атрибута <code>sizes</code>, для расчета эффективной плотности пикселей;</li> + <li>дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '<code>x</code>'.</li> + </ul> + </li> + </ol> + + <p>Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: <code>1x</code>.</p> + + <p>Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте <code>srcset</code>. Повторение дескрипторов (например, два источника в одном <code>srcset</code> с одинаковым дескриптором '<code>2x</code>') так же является недопустимым.</p> + + <p>{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на свое усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>" для примера.</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd> + <p>Неполный {{glossary("URL")}} (начиная с '<code>#</code>') <a href="/en-US/docs/Web/HTML/Element/map">карты-изображения</a>, связанной с элементом.</p> + + <div class="note"> + <p><strong>Заметка:</strong> Вы не можете использовать этот атрибут, если элемент <code><img></code> является потомком элемента {{htmlelement("a")}} или {{HTMLElement("button")}}.</p> + </div> + </dd> +</dl> + +<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt> + <dd> + <p>Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойства {{cssxref("float")}} и/или {{cssxref("vertical-align")}}. Вы можете так же использовать CSS-свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <code><img></code>. Допустимые значения:</p> + + <ul> + <li><code>top</code>: Аналог <code>vertical-align: top</code> или <code>vertical-align: text-top</code>;</li> + <li><code>middle</code>: Аналог <code>vertical-align: -moz-middle-with-baseline</code>;</li> + <li><code>bottom</code>: Отсутствует значение по умолчанию, аналог <code>vertical-align: unset</code> или <code>vertical-align: initial</code>;</li> + <li><code>left</code>: Аналог <code>float: left</code>;</li> + <li><code>right</code>: Аналог <code>float: right</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt> + <dd>Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство {{cssxref('border')}} вместо этого атрибута.</dd> + <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt> + <dd>Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.</dd> + <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt> + <dd> + <p>Ссылка на более подробное описание изображения. Возможными значениями являются {{glossary("URL")}} или {{htmlattrxref("id")}} элемента.</p> + + <div class="note"> + <p><strong>Заметка:</strong> Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, но был удален из <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">живого стандарта HTML</a> от {{glossary("WHATWG")}}. У него неопределенное будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a> или <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> + <dd>Имя для элемента. Вы должны использовать атрибут {{htmlattrxref("id")}} вместо этого атрибута.</dd> + <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt> + <dd>Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство {{cssxref('margin')}} вместо этого атрибута.</dd> +</dl> + +<h2 id="Взаимодействие_с_CSS">Взаимодействие с CSS</h2> + +<p><code><img></code> является <a href="/ru/docs/Web/CSS/Замещаемый_элемент">замещаемым элементом</a>; по умолчанию он имеет значение свойства {{cssxref("display")}} равное <code>inline</code>, но его размеры по умолчанию определяются внутренними значениями (см. {{glossary("Intrinsic Size", "внутренний размер")}}) встроенного изображения. Вы можете установить на изображение такие свойства, как {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}/{{cssxref("height")}} и так далее.</p> + +<p>Однако, часто бывает полезно установить для изображений свойство {{cssxref("display")}} в значение <code>block</code>, так что вы имеете максимальный контроль над стилизацией (например, <code>margin: 0 auto</code> не работает на изображениях с <code>display: inline</code>, легче размещать изображения в контексте с окружающими элементами, когда они являются <a href="/ru/docs/Web/HTML/Block-level_elements">блочными</a>).</p> + +<p>У <code><img></code> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (<code>display: inline</code>) вместе с {{cssxref("vertical-align")}}<code>: baseline</code>, нижняя граница изображения будет размещена на базовой линии контейнера.</p> + +<p>Вы можете использовать свойство {{cssxref("object-position")}} для позиционирования изображения внутри границ элемента <code><img></code> и свойством {{cssxref("object-fit")}} регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).</p> + +<p>В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее {{glossary("Intrinsic Size", "внутренние размеры")}} не обязательны. {{glossary("SVG")}}-изображения, например, могут не иметь внутренних размеров, если для корня их элемента {{SVGElement("svg")}} не заданы <code>width</code> и <code>height</code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Альтернативный_текст">Альтернативный текст</h3> + +<p>Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.</p> + +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" + alt="Логотип MDN - изображение динозавра с текстом MDN web docs"> +</pre> + +<p>{{ EmbedLiveSample('Альтернативный_текст', '100%', '70') }}</p> + +<h3 id="Изображение-ссылка">Изображение-ссылка</h3> + +<p>Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <code><img></code> внутрь элемента {{HTMLElement("a")}}. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org"> + <img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" + alt="Посетить сайт MDN"> +</a></pre> + +<p>{{ EmbedLiveSample('Изображение-ссылка', '100%', '70') }}</p> + +<h3 id="Использование_атрибута_srcset">Использование атрибута srcset</h3> + +<p>В этом примере мы добавляем атрибут <code>srcset</code>, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в <code>src</code> на устройствах с высоким разрешением. Изображение указанное в атрибуте <code>src</code>, считается <code>1x</code> кандидатом в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают <code>srcset</code>.</p> + +<pre class="brush: html"> <img src="mdn-logo-sm.png" + alt="MDN" + srcset="mdn-logo-HD.png 2x"> +</pre> + +<h3 id="Использование_атрибутов_srcset_и_sizes">Использование атрибутов srcset и sizes</h3> + +<p>Атрибут <code>src</code> игнорируется в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают <code>srcset</code>, когда добавлены дескрипторы '<code>w</code>'. Когда условие медиа-запроса <code>(max-width: 600px)</code> совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиа-запросе), иначе будет загружено другое изображение.</p> + +<pre class="brush: html"> <img src="clock-demo-thumb-200.png" + alt="Часы" + srcset="clock-demo-thumb-200.png 200w, + clock-demo-thumb-400.png 400w" + sizes="(max-width: 600px) 200px, 50vw"> +</pre> + +<h2 id="Проблемы_безопасности_и_приватности">Проблемы безопасности и приватности</h2> + +<p>Хотя у элементов <code><img></code> есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите "<a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Заголовок Referer: проблемы приватности и безопасности</a>" для получения дополнительной информации.</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<h3 id="Создание_значимых_альтернативных_описаний">Создание значимых альтернативных описаний</h3> + +<p>Значение атрибута <code>alt</code> должно четко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут <code>alt</code> намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.</p> + +<h4 id="Плохо">Плохо</h4> + +<pre class="brush: html example-bad"><img alt="image" src="penguin.jpg"> +</pre> + +<h4 id="Хорошо">Хорошо</h4> + +<pre class="brush: html example-good"><img alt="Пингвин на пляже." src="penguin.jpg"> +</pre> + +<p>Когда у изображения отсутствует атрибут <code>alt</code>, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности</a>.</li> + <li><a href="https://axesslab.com/alt-texts/">Альтернативные тексты: максимальное руководство — Axess Lab</a>.</li> + <li><a href="https://www.deque.com/blog/great-alt-text-introduction/">Как создать отличный альтернативный текст: введение | Deque</a>.</li> + <li><a href="/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Понимание WCAG, Руководство 1.1. объяснения</a>.</li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0</a>.</li> +</ul> + +<h3 id="Атрибут_title">Атрибут title</h3> + +<p>Атрибут {{htmlattrxref("title")}} не является приемлемой заменой атрибута <code>alt</code>. Кроме того, избегайте повторения значения атрибута <code>alt</code> в атрибуте <code>title</code>, объявленном на том же изображении.</p> + +<p>Атрибут {{htmlattrxref("title")}} также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент {{HTMLElement("figure")}} вместе с элементом {{HTMLElement("figcaption")}}.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Использование HTML-атрибута title - обновлено | The Paciello Group</a>.</li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Добавлен атрибут <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> + <p> </p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{Compat("html.elements.img")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a>.</li> + <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>.</li> + <li>Элементы {{HTMLElement("picture")}}, {{HTMLElement("object")}} и {{HTMLElement("embed")}}.</li> + <li>Связанные с изображениями CSS-свойства: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, и {{cssxref("image-resolution")}}.</li> +</ul> |