Picture source type html

Указывает на разные форматы медиа, из которых браузер выбирает оптимальный.

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

Пример

Скопировать ссылку «Пример» Скопировано

Пример указания пути до видеофайла в форматах WebM и MP4:

      video controls width="250" height="200" muted> source src="birthday.webm" type="video/webm"> source src="birthday.mp4" type="video/mp4"> video>

Пример указания пути до аудиофайла в форматах MP3 и OGG:

      audio controls> source src="song.mp3" type="audio/mpeg"> source src="song.ogg" type="audio/ogg"> audio>

Пример использования тега для адаптивных изображений. При ширине экрана от 0 до 599 пикселей будет загружено изображение small.jpg, на ширине экрана от 600 пикселей будет загружено изображение big.jpg:

  picture> source srcset="big.jpg" media="(min-width: 600px)"> img src="small.jpg" alt="Абстрактное изображение"> picture>

 Как понять
 Скопировать ссылку "Как понять" Скопировано
 Как пишется
 Скопировать ссылку "Как пишется" Скопировано
 В теге могут использоваться атрибуты:
 src
 Скопировать ссылку "src" Скопировано
 Требуется только для использования внутри тегов и . В атрибуте указывается путь до медиафайла. Если тег находится внутри , то атрибут src игнорируется.
       audio controls> source src="song.mp3" type="audio/mpeg"> source src="song.ogg" type="audio/ogg"> audio>      
 type
 Скопировать ссылку "type" Скопировано
 Содержит указание на MIME-тип медиафайла. Если у нас есть несколько одинаковых видеофайлов разного формата, то атрибут type помогает выбрать первый поддерживаемый браузером:
       video controls width="250" height="200" muted> source src="birthday.webm" type="video/webm"> source src="birthday.mp4" type="video/mp4"> video>      
 Если браузер поддерживает формат WebM, то будет загружен файл из первого тега . Если нет, то из второго. Обычно перечисляют несколько форматов видео или аудио, начиная с самого эффективного по соотношению «размер-качество».
 media
 Скопировать ссылку "media" Скопировано
   picture> source srcset="big.jpg" media="(min-width: 600px)"> img src="small.jpg" alt="Абстрактное изображение"> picture>      
 При ширине экрана от 600 пикселей будет загружено изображение из тега . В других случаях — из тега .
 srcset
 Скопировать ссылку "srcset" Скопировано
 В атрибуте srcset через запятую перечисляются строки, которые дают браузеру информацию об изображениях. Каждая строка состоит из следующих частей:
  URL изображения (например, 1024x768 . png );
 целое число, за которым идёт буква w (например, 1024w ). Число указывает на ширину изображения в пикселях;
 число, за которым идёт буква x (например, 1 . 5x ). Число указывает на плотность пикселей, для которой будет использоваться изображение.
 
 Например, атрибут может выглядеть так:
   source srcset="640x480.png 1x, 1280x960.png 2x">      
 Эта запись означает, что для экранов с обычной плотностью пикселей будет использовано изображение 640x480.png, а для экранов с удвоенной плотностью пикселей (например, для retina-экранов) — 1280x960.png.
 Другой вариант записи атрибута:
   source srcset="1024x768.png 1024w, 640x480.png 640w">      
 Здесь мы говорим браузеру, что изображение 1024x768.png имеет ширину 1024 px, а изображение 640x480.png — 640 px. Эта информация помогает браузеру определить, какое изображение выбрать при разборе соседнего атрибута sizes .
 sizes
 Скопировать ссылку "sizes" Скопировано
 Атрибут sizes говорит браузеру, какой ширины нам понадобится изображение из текущего элемента при отрисовке страницы. Можно сказать, что браузер определяет ширину слота для изображения. Так мы заранее сообщаем браузеру, сколько места на странице «забронировать» под изображение. Значением атрибута может быть либо абсолютное значение (например, 150px или 30em ), либо относительное от вьюпорта (например, 20vw ). Значения в процентах не разрешены.
 Атрибуты srcset и sizes эффективно работают в паре. Рассмотрим пример:
   srcset="images/600x100.png 600w, images/1000x200.png 1000w" sizes="(max-width: 1200px) 50vw, 1000px"> source srcset="images/600x100.png 600w, images/1000x200.png 1000w" sizes="(max-width: 1200px) 50vw, 1000px">      
 Когда браузер разбирает тег , он выполняет следующие действия:
  смотрит на текущую ширину окна браузера;
 ищет подходящий вариант из атрибута sizes , с учётом плотности пикселей;
 выбирает из атрибута srcset подходящую картинку для слота: больше или равную ему.
 
 Как сработает наш пример при разных ширинах:
  1000 пикселей: срабатывает условие (max - width : 1200px ) (1200 пикселей или меньше), и браузер устанавливает ширину слота 50vw (500 пикселей в нашем случае). Из списка srcset браузер выбирает подходящую картинку: на 1x-экране покажется 600x100.png, на 2x-экране покажется 1000x200.png — ближайшие к ширине слота 500 пикселей.
 1201 пиксель: не срабатывает условие (max - width : 1200px ) , и ширина слота выбирается из списка sizes — это 1000px . У браузера в srcset самая большая картинка 1000x200 . png 1000w равна ширине слота, а значит и на 1x-, и на 2x-экране будет картинка 1000x200.png.
 
 На практике
 Скопировать ссылку "На практике" Скопировано
 Денис Ежков советует
 Скопировать ссылку "Денис Ежков советует" Скопировано
        picture> source type="image/avif" srcset="photo.avif"> source type="image/webp" srcset="photo.webp"> source type="image/jpeg" srcset="photo.jpg"> img src="photo.jpg" alt="Тестовая картинка"> picture>      
 Источник
 Picture source type html
 Адаптирует картинки под разные устройства и поддерживаемые форматы.
 Время чтения: меньше 5 мин
 Обновлено 20 декабря 2021
 Кратко
 Скопировать ссылку "Кратко" Скопировано
 Тег используется, когда для разных устройств или вариантов отображения нам нужны разные картинки.
 Пример
 Скопировать ссылку "Пример" Скопировано
   picture> source srcset="320.jpg" media="(max-width: 800px)"> img src="640.jpg" alt="Абстрактное изображение"> picture>      
 Как понять
 Скопировать ссылку "Как понять" Скопировано
 Одна и та же страница может быть открыта на разных устройствах и в браузерных окнах разной ширины. У телефона небольшой экран, и было бы круто не загружать полноразмерные картинки с большим разрешением. В CSS мы можем изменять фон элемента ( background - image ) в зависимости от ширины экрана, используя медиавыражения. Но если изображение контентное, вставлено в HTML при помощи тега , то CSS нам уже не поможет. Мы должны использовать теги и .
 Как пишется
 Скопировать ссылку "Как пишется" Скопировано
 Внутри тега обязательно должен находиться тег , и опционально — теги .
   picture> source srcset="750x100.png" media="(min-width: 1000px)"> img src="650x100.png" alt="Картинка с размерами"> picture>      
 В этом примере при помощи атрибута media в теге мы задаём условие по аналогии с медиавыражением @media в CSS. Если условие определяется как ложное, то элемент пропускается. Разница становится видна, если менять размер окна браузера.
 Подсказки
 Скопировать ссылку "Подсказки" Скопировано
 💡 Если медиавыражение не сработало, то браузер не загружает для него изображение. Так что можно не экономить и писать столько условий, сколько нужно.
 💡 Старайтесь при вёрстке всегда готовить несколько версий одной и той же картинки для отображения на разных устройствах. Пользователи мобильных телефонов будут вам очень благодарны, если для них вы будете готовить картинки с меньшим разрешением. В то же время пользователям десктопов с экранами высокой чёткости можно показывать картинки с увеличенным разрешением:
 В этом примере пользователи с обычными экранами увидят картинку с надписью 750x100. Пользователи, у которых ретиновые дисплеи, увидят картинку с надписью 1500x200.
 На практике
 Скопировать ссылку "На практике" Скопировано
 Денис Ежков советует
 Скопировать ссылку "Денис Ежков советует" Скопировано
 🛠 Одна из частых ошибок при работе с тегом — забытый тег . Помните, что браузер показывает изображение исключительно при помощи тега , а теги только помогают выбрать нужный URL картинки для текущих условий. Поэтому если внутри не будет тега , то и показывать браузеру будет нечего.
 Егор Левченко советует
 Скопировать ссылку "Егор Левченко советует" Скопировано
 🛠 Используйте все доступные вам медиавыражения по полной.
 Не обязательно останавливаться только на размерах картинок для мобильных и ПК. Можно использовать медиавыражения для определения тёмной темы на устройстве пользователя и подменять картинку, делая интерфейс более приятным для глаз.
     picture> source srcset="image-dark.png" media="(prefers-color-scheme: dark)"> img src="image-light.png" alt=""> picture>      
 Источник
 : The Picture element
 The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn't support the element—the URL of the element's src attribute is selected. The selected image is then presented in the space occupied by the element.
 Try it
 To decide which URL to load, the user agent examines each 's srcset , media , and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.
 The element serves two purposes:
  It describes the size and other attributes of the image and its presentation.
 It provides a fallback in case none of the offered elements are able to provide a usable image.
 
  Art direction. Cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
 Offering alternative image formats, for cases where certain formats are not supported. 
 Note: For example, newer formats like AVIF or WEBP have many advantages, but might not be supported by the browser. A list of supported image formats can be found in: Image file type and format guide.
 If providing higher-density versions of an image for high-DPI (Retina) display, use srcset on the element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions.
    Content categories  Flow content, phrasing content, embedded content  
  Permitted content  Zero or more elements, followed by one element, optionally intermixed with script-supporting elements.  
  Tag omission  None, both the starting and ending tag are mandatory.  
  Permitted parents  Any element that allows embedded content.  
  Implicit ARIA role  No corresponding role  
  Permitted ARIA roles  No role permitted  
  DOM interface   HTMLPictureElement  
 
 
 Attributes
 This element includes only global attributes.
 Usage notes
 You can use the object-position property to adjust the positioning of the image within the element's frame, and the object-fit property to control how the image is resized to fit within the frame.
 Note: Use these properties on the child element, not the element.
 Examples
 These examples demonstrate how different attributes of the element change the selection of the image inside .
 The media attribute
 The media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each element.
 picture> source srcset="mdn-logo-wide.png" media="(min-width: 600px)" /> img src="mdn-logo-narrow.png" alt="MDN" /> picture> 
 The srcset attribute
 The srcset attribute is used to offer list of possible images based on size.
 It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and either:
  a width descriptor, followed by a w (such as 300w ); OR
 a pixel density descriptor, followed by an x (such as 2x ) to serve a high-res image for high-DPI screens.
 
 picture> source srcset="logo-768.png, logo-768-1.5x.png 1.5x" /> img src="logo-320.png" alt="logo" /> picture> 
 The type attribute
 picture> source srcset="photo.avif" type="image/avif" /> source srcset="photo.webp" type="image/webp" /> img src="photo.jpg" alt="photo" /> picture> 
 Specifications
 Browser compatibility
 BCD tables only load in the browser
 See also
 Found a content problem with this page?
 This page was last modified on Apr 13, 2023 by MDN contributors.
 Your blueprint for a better internet.
 MDN
 Support
 Our communities
 Developers
 Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
 Источник
 
Читайте также:  Set python home path