| HTML | WebReference
- Содержание
- Синтаксис
- Закрывающий тег
- Атрибуты
- Пример
- Спецификация
- Браузеры
Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров. Вот несколько областей применения <picture> (от англ. picture — картинка, изображение):
- для экранов ретина можно показывать картинку большего размера;
- выводить рисунки разного размера для мобильных и настольных устройств;
- отображать изображения разных пропорций, учитывающих ориентацию устройства;
- выводить изображение в векторном формате SVG, а для браузеров, его не поддерживающих, показывать PNG.
Синтаксис
<picture> <source> <img> </picture>
Внутри <picture> содержится ноль или несколько элементов <source>, которые идут перед одним элементом <img>.
Закрывающий тег
Обязателен.
Атрибуты
Для этого элемента доступны универсальные атрибуты и события.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>picture</title> </head> <body> <picture> <source srcset=»image/html5-logo.svg»> <img src=»image/html5-logo.png» alt=»HTML5″> </picture> </body> </html>В данном примере используется два изображения: одно в формате SVG, а второе в привычном PNG. Браузеры, которые поддерживают элемент <picture>, отобразят картинку в векторном виде (рис. 1). Браузер IE покажет изображение в формате PNG (рис. 2). Для наглядности логотип дан размером 128х128 пикселей и увеличен до 256х256.
Рис. 1. Картинка в формате SVG
Рис. 2. Картинка в формате PNG
Спецификация
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
| 13 | 38 | 25 | 9.1 | 38 |
| 38 | 35 | 9.3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Изображения
См. также
- <img>
- <source>
- Атрибуты элементов
- Выравнивание картинок
- Добавление медиа-контента
- Изображения
- Изображения
- Масштабирование картинок
- Подрисуночная подпись
- Фон в CSS
- Форматы графических файлов
Рецепты
- Как добавить картинку на веб-страницу?
- Как задать ширину изображения?
- Как сделать картинку ссылкой?
Практика
- Абсолютный адрес
- Альтернативный текст
- Картинка в <button>
- Картинка как ссылка
- Картинки в таблице
- Картинки друг под другом
- Относительный адрес
- Подпись перед картинкой
- Подпись под картинкой
- Размеры картинки
- Ширина картинок
- Элемент <figure>
- Элемент <source>
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.
10.2018
Редакторы: Влад Мержевич
Конвертирование изображения в TGA
Перетащите файлы сюда
Введите URL Dropbox Google Диск
Изменить размер:
Ширина:
px
Высота:
px
Применить цветной фильтр: без измененийГрадации серогоМонохромноеИнвертировать цветаРетроСепия
Улучшить Повысить резкость 
Удалить фон
Точек на дюйм:
dpi
Обрезать пиксели:
Наверх:
px
Вниз:
px
Влево:
px
px
Настроить порог преобразования в ч/б: 
Обычно порог определяется автоматически, но его можно настроить и вручную. Допускаются значения от 0 до 255.»/>
Конвертируйте ваши обезображения различных форматов в формат TGA (Targa). Для изменения изображения меняйте настройки или накладывайте эффекты.
Бесплатный он-лайн конвертер TGA (Truevision Targa) позволяет конвертировать файлы более 130 форматов.
Бесплатные png графика 256×256 иконки скачать бесплатно
Расширенный поиск Запросить дизайн
[ Иконки ] тахометр alt знак плоский эскиз ( .
All-free-download.com
[ Иконки ] Американский язык жестов интерпретирует значок силуэта знака руки ок ( .ai .png .svg 209.67KB )
All-free-download.com
[Значки] копировать значок плоский силуэт эскиз (.ai .png .svg 94,18 КБ)
All-free-download.com
[Значки] значок проверки пользователя плоский силуэт геометрический эскиз ( .ai .png .svg 141.91KB )
All-free-download.com
[ Иконки ] улыбка знак значок плоский силуэт геометрический контур ( .
ai .png .svg 156.30KB )
All-free-download.com
[ Иконки ] Знак Брайля с плоскими кругами ( .ai .png .svg 213.62KB )
All-free-download.com
[Значки] Громкость телефона Значок силуэта помощника оператора ( .ai .png .svg 196.38KB )
All-free-download.com
[ Иконки ] значок знака времени пользователя плоский силуэт геометрический эскиз ( .ai .png .svg 135.11KB )
All-free-download.com
[ Иконки ] значок знака космонавта пользователя плоский контрастный черно-белый эскиз ( .
ai .png .svg 165.66KB )
All-free-download.com
[иконки] туалет знак значок мужчина женщина значок эскиз плоский силуэт эскиз ( .ai .png .svg 149.04KB )
All-free-download.com
[Значки] слепой предупреждающий силуэт плоский знак ( .ai .png .svg 120.89KB )
All-free-download.com
[ Иконки ] Плоский знак опасного нагревания для слабовидящих глаз ( .ai .png .svg 222.24KB )
All-free-download.com
[Значки] пользовательский тег знак значок плоский силуэт геометрический эскиз (.
ai .png .svg 147.31KB)
All-free-download.com
[Значки] пользователь alt косая черта знак значок плоский геометрический силуэт круг пересечение линии эскиз (.ai .png .svg 154.91KB)
All-free-download.com
[иконки] люди портрет знак значок плоский контраст геометрический эскиз ( .ai .png .svg 112.56KB )
All-free-download.com
[Значки] аудио описание a d черный белый текстовый знак (.ai .png .svg 169.89KB)
All-free-download.com
[Значки] Вспомогательные слуховые системы Знак обогрева ушей ( .
ai .png .svg 218.75KB )
All-free-download.com
[Значки] пользовательская шестеренка знак значок плоский силуэт геометрический контур ( .ai .png .svg 148.24KB )
All-free-download.com
[ Иконки ] пользователь alt 1 значок знака силуэт геометрические округлые формы ( .ai .png .svg 130.70KB )
All-free-download.com
[ Иконки ] мужской значок знак плоский силуэт эскиз симметричная геометрия ( .ai .png .svg 118.27KB )
All-free-download.com
[ Значки ] значок вспомогательной системы прослушивания ( .
ai .png .svg 233,58 КБ )
All-free-download.com
[Значки] Скрытые субтитры cc плоский текстовый знак ( .ai .png .svg 184.98KB )
All-free-download.com
[Значки] пользовательские часы знак значок плоский силуэт геометрический контур ( .ai .png .svg 143.27KB )
All-free-download.com
[Значки] вид на улицу знак значок силуэт геометрический эскиз ( .ai .png .svg 147.50KB )
All-free-download.com
256×256 бесплатно бесплатно png графика png png 256×256 png графика бесплатно значок графический поиск бесплатно логотип графика бесплатно велосипед графика скачать проверить значок в оплате доступный размер использовать бесплатные загрузки графики psp
Загрузка дополнительных элементов, пожалуйста, подождите.
..
Загрузка дополнительных элементов, подождите…
Критерий поиска:
Тип поиска:
Совпадение с любымСовпадение со всеми
Искать в:
ВекторыИконкиФотоШрифтыШаблоны сайтовPSD
Лицензия:
Все лицензииРазрешить коммерческое использование
Результат сортировки:
Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок
- Дом
- Лицензии
- Срок
- Конфиденциальность
- О
- Связаться с
Самый маленький одноцветный PNG-файл размером 256×256, где вы его видели
Узнаете эти изображения? Есть большая вероятность, что вы видели некоторые из них раньше, возможно, несколько раз.
Вот подсказка: все они изображают одно и то же.
Все они выглядят очень похоже, так почему же разница в размерах?
Краткое введение в PNG
Базовый файл PNG состоит из повторяющихся фрагментов. Каждый фрагмент состоит из четырех частей:
- Длина блока данных (четыре байта)
- Тип блока (четыре байта)
- Данные
- CRC (четыре байта)
Вот шестнадцатеричное содержимое самого маленького PNG, показанного выше — 103-байтового файла:
89 50 4E 47 0D 0A 1A 0A 00 00 00 0D 4948 44 52 | .PNG........IHDR 00 00 01 00 00 00 01 00 01 03 00 00 00 66 БК 3А | .............f¼: 25 00 00 00 03 50 4C 54 45 B5 D0 D0 63 04 16 EA | %....PLTEµРРc..ê 00 00 00 1F 49 44 41 54 68 81 ED C1 01 0D 00 00 | ....IDATh.íÁ.... 00 C2 A0 F7 4F 6D 0E 37 A0 00 00 00 00 00 00 00 | . ÷Ом.7 ....... 00 BE 0D 21 00 00 01 9A 60 E1 D5 00 00 00 00 49 | .¾.!....`áÕ....I 45 4Е 44 АЭ 42 60 82 | КОНЕЦ®B`.
Раздел IHDR — дальнейшая спецификация здесь — помечает это как изображение размером 256×256 пикселей (00 00 01 00 00 00 01 00), глубиной 1 бит (01), где каждый пиксель представлен как индекс в палитре (03) . Изображение использует дефлятное сжатие по умолчанию (00), базовую фильтрацию (00) и отсутствие чересстрочной развертки (00).
Раздел PLTE является обязательным для изображений с палитрой (PNG также поддерживает изображения в реальном цвете, где это не требуется) — он может содержать до 256 записей, но этот содержит только одну запись — B5 D0 D0 — как нужен только один цвет. Это также пример «усеченной палитры» — глубина в один бит, выбранная в разделе IHDR, позволяет использовать 2 цвета, но поскольку используется только один цвет, в палитру включается только один.
Раздел IDAT представляет собой фактические данные изображения. Он имеет длину 31 байт, сжат с помощью алгоритма DEFLATE. Если вы раздуете данные в этом примере, вы получите 8448 байтов нулей.
Почему 8448? Ну 8192 байта соответствуют пикселям по одному биту на пиксель ( 256 * 256/8 = 8192 ), а 256 соответствуют одному байту для каждой строки изображения, указывая применяемый фильтр. В нашем случае байт фильтра всегда равен 0, что соответствует отсутствию фильтрации.
Раздел IEND обозначает конец изображения.
Почему изображения выше отличаются по размеру?
| Размер | Объяснение |
|---|---|
| 103 байта | Палитированный, 1 бит на пиксель, 3 байта PLTE, 31 байт IDAT |
| 156 байт | С палитрой, 8 бит на пиксель, 3 байта PLTE, 84 байта IDAT |
| 178 байт | Палетизированный, 8 бит на пиксель, 3 байта PLTE, 85 байтов IDAT, секция pHYs (физические размеры в пикселях) |
| 379 байт | С палитрой, 8 бит на пиксель, 3 байта PLTE, 307 байтов IDAT (IDAT имеет то же самое содержимое со всеми нулями, что и два предыдущих изображения — просто менее эффективный алгоритм сжатия?) |
| 921 байт | С палитрой, 8 бит на пиксель, 768 байт PLTE (с дополнением во всех байтах, кроме первых трех), 84 байта IDAT |
| 1189 байт | Палитированный, 8 бит на пиксель, 768 байт PLTE (с дополнением во всех байтах, кроме первых трех), 84 байта IDAT, 256 байт секции tRNS (данные прозрачности для элементов палитры, дополнение во всех байтах, кроме первого) |
(Последний на самом деле обслуживается путем перенаправления на кешированный ресурс, поэтому не так уж плохо работает по сравнению с другими)
Почему для представления данных, состоящих только из нулей, требуется 84 байта? Разве эти люди не слышали о кодировании длин серий?
Алгоритм дефляции используется для сжатия раздела IDAT файлов PNG и поддерживает кодирование длин серий, но длина серий представлена в виде 8-битного числа в кодировке Хаффмана; теоретическая максимальная степень сжатия для deflate составляет около 1030,3 : 1
На практике мы не достигаем этого теоретического максимума (существуют фиксированные накладные расходы для таких вещей, как определение словаря).
Коэффициенты сжатия, которые мы видим, включают 264,2:1 для 103-байтового файла и 780,1:1 для 156-байтового файла.
Так кому нужны эти микрооптимизации?
Вот 103-байтовое изображение в более знакомом контексте:
Тайлы карты, изображающие море!
Карты Slippy традиционно представляют собой «плитки карты» фиксированного размера в сетке с заданным уровнем масштабирования — например, http://b.tile.openstreetmap.org/6/29/20.png будет иметь уровень масштабирования 6, 29-й. столбик и 20-й ряд; http://a.tile.openstreetmap.org/19/516664/319949.png соответствует уровню масштабирования 19, столбец 516664, строка 319949. Чем выше уровень масштабирования, тем больше фрагментов требуется, чтобы показать всю планету. много моря в этих данных. В зависимости от размера вашего монитора вы, возможно, загрузили 10 или более фрагментов всего моря только для того, чтобы отобразить эту карту выше, и это до того, как вы увеличили масштаб или прокрутили.
Серверы могут отправлять редирект на кешированный ресурс — некоторые карты делают именно это! Но когда вы можете отправить плитку размером всего 103 байта, отправить плитку так же просто, как отправить перенаправление.
| Размер | Поставщик карт | Источник |
|---|---|---|
| 103 байта | OpenStreetMap | Пример |
| 156 байт | Карты Bing | Пример |
| 178 байт | Карты Google (классические) | Пример |
| 379 байт | Карты Скоблера | Пример |
| 921 байт | ТомТом | Пример (на самом деле перенаправление, поэтому размер исходного изображения не имеет большого значения) |
| 1189 байт | здесь.com (Navteq) | Пример |
Есть еще какие-нибудь хитрости в рукаве?
69 байт — если все ваши клиенты поддерживают масштабирование Вместо изображения размером 256×256 пикселей вы можете использовать изображение размером 1 пиксель и указать браузеру увеличить его. Конечно, если вам нужно указать ширину = «256px» height = «256px» в вашем HTML, это добавит 30 байт к вашему HTML! Но если вы программно вставляете узлы DOM с помощью javascript (например, для скользкой карты), это не проблема.
Когда вы создаете очень маленькое изображение, на самом деле более эффективно использовать изображение в реальном цвете вместо изображения с палитрой, поскольку каждый дополнительный сегмент в файле PNG добавляет 12 байтов длины, заголовка и информации CRC. Но это преимущество быстро уменьшается по мере увеличения размера изображения; преобразование 103-байтового файла в истинный цвет увеличивает его размер до 567 байт.
На некоторых скользких картах используются плитки большего размера; тайл 512px, занимающий 126 байт, может заменить четыре тайла 256px, занимающих 412 байт между ними, а также накладные расходы на заголовки http. Но в областях, где плитки показывают больше данных, вы будете использовать относительно большую пропускную способность для вещей за пределами области просмотра, которые не будут отображаться, пока пользователь не прокрутит. В некоторых версиях Google Maps используются фрагменты размером 512 пикселей, как и на сайте here.com.
TomTom не обслуживает плитку размером 921 байт повторно — вместо этого пользователи получают перенаправление HTTP 302 с заголовком «Расположение: http://s3.
