Разрешения изображений: Разрешение изображения — что это такое?

Разрешение цифровых камер дает понятие о том, из скольких точек будет состоять полученное изображение. На этапе преобразования цифрового изображения в компьютере понятие «разрешающая способность» весьма эфемерно. Фактически, это величина, которая показывает, какого размера будет иллюстрация в случае ее вывода. Ни на какие цифровые преобразования разрешение не влияет. Если изображение имеет 3000×1500 пикселей и разрешение 300 dpi, то оно будет выведено размером 10×5 дюймов. Однако если изменить разрешающую способность на 3000 dpi, то оно будет выведено размером 1×0,5 дюйма. При этом файл по-прежнему будет содержать 3000×1500 пикселей.

На этапе вывода мы сталкиваемся с огромным количеством разнообразных устройств. Все они связаны с разрешением. В этом случае под разрешением понимают количество точек, которое может «поставить» то или иное устройство на единицу длины.

Рассмотрим, например, вывод черно-белого тонового изображения. Для того чтобы воспроизвести черный цвет, нужно ставить черные точки подряд. Для воспроизведения белого — их не надо ставить вовсе. Все промежуточные тона воспроизводятся большим или меньшим количеством точек на единицу площади. Для воспроизведения серого 50 % поля площадь черных точек и пустого пространства должна быть одинакова. Чем светлее поле, тем меньше точек будет ставить выводное устройство.

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

Итак, для воспроизведения оттенков устройство вывода (например, принтер) вынуждено ставить определенное количество черных дискретных точек на единицу площади, которая называется растровой точкой (ячейкой). Если точки в пределах единичной области ставятся случайным образом, то это стохастическое растрирование. Если точки образуют круги или, например, эллипсы, то такой растр называют регулярным. Понятно, что каждая растровая точка образована большим количеством единичных точек. Считается, что растровая ячейка должна состоять из 16×16 единичных точек. В этом случае количество воспроизводимых оттенков составит 16×16 = 256.

Растровые точки составляют линии. Совокупность всех линий составляет изображение. Количество линий на единицу длины называют линиатурой (рис. 1). Обычно в программном обеспечении линиатура измеряется в линиях на дюйм или lpi (lines per inch).

Линия растровых точек

В принципе, каждая растровая точка выводимого изображения может соответствовать одному пикселю цифрового формата. То есть линиатура вывода может соответствовать разрешению цифрового изображения. Но для достижения наилучшего качества, разрешение должно быть вдвое большее линиатура или, другими словами, для формирования одной растровой точки следует взять 4 пикселя. Эту зависимость можно представить в виде формулы

d = l х Qf [1],

где d – разрешение цифрового файла, l – линиатура вывода, Qf – коэффициент качества, изменяющийся от 1 для малозначимых иллюстраций до 2 для высококачественной продукции.

Для того чтобы проиллюстрировать эту зависимость приведем четыре одинаковых изображения Рис 2.1, 2.2, 2.3 и 2.4. Для первого коэффициент качества равен 0,5, для второго — 1, для третьего — 2, для четвертого — 4. Линиатура, с которой печатается журнал «РТ», составляет 150 lpi. Исходя из этого, получаем, что для иллюстраций разрешение будет равно 75 dpi, 150 dpi, 300 dpi, 600 dpi соответственно. По приведенным примерам видно, что качество передачи мелких деталей возрастает при изменении Qf от 0,5 до 2. Иллюстрация с Qf = 4 неотличима от той, что имеет Qf = 2.

В практике полиграфического производства для печати журнальной продукции и художественных альбомов в большинстве случаев используются три линиатуры: 133, 150, 175 lpi. Иные значения крайне редки. Практически всегда одна растровая точка составляется как минимум из 16×16 единичных точек, поскольку разрешение фотовыводных устройств высоко и может достигать 5000 dpi. Производители драйверов (RIP – Raster Image Processor) подобных устройств также прибегают к некоторым уловкам для улучшения передачи мелких деталей, оставляя линиатуру прежней. Например, можно сместить центр растровой точки для лучшего подчеркивания контура. В силу этого, для определения максимально необходимого разрешения цифрового файла возможно применять формулу [1], приняв Qf = 2.

Итак, если вы планируете разместить иллюстрацию размером в страницу А4 в журнале, использующем линиатуру 175 lpi, то максимальный размер цифрового файла составит 2891×4186 точек (8,26 дюймов x 350 точек/дюйм и 11,69 дюймов x 350 точек/дюйм). Для журнала с линиатурой 150 lpi он составит 2478 x 3507 точек.

В газетном производстве значение используемой линиатуры изменяется от 85 до 100 lpi. Таким образом, для вывода изображения форматом А4 потребуется цифровая иллюстрация, состоящая максимум из 1652×2338 точек.

В качестве примера мы привели максимальный размер цифрового файла при Qf = 2. Также возможно принять Qf = 1, тогда размер файлов уменьшится в 4 раза, но оптимальное качество достигнуто не будет.

Теперь поговорим о цифровом разрешении аналоговой пленки. Хотелось бы разделить эту задачу на две:

1. Всю информацию, находящуюся на кадре пленки, нужно сохранить в цифровом виде.

2. Необходимо создать цифровой файл максимального качества.

Первая задача может возникнуть при необходимости сохранить какой-нибудь фотошедевр навечно, не потеряв ни одной мелкой детали. Требования, предъявляемые к процессу сканирования, будут соответствующие.

Как известно, разрешение пленки и объектива оценивается функцией передачи модуляции. Оба эти звена одинаково важны. Для оценки информационной емкости важна максимальная пространственная частота системы «объектив-пленка», т. е. максимальная разрешающая способность. Этот параметр в большинстве случаев колеблется в пределах 80-120 лин/мм.

Для того чтобы понять, сколько же точек на миллиметр понадобится для сохранения такого количества информации, вспомним теорему Котельникова. Она может быть сформулирована следующим образом: имеется сигнал с ограниченным спектром, например F(t), есть последовательность отсчетов F(t1), F(t2)…F(n). Для того чтобы исходный сигнал можно было бы восстановить абсолютно точно, частота отсчета должна быть вдвое больше, чем максимальная частота исходного сигнала. Ее следствием является то, что для передачи пространственной частоты (скажем, 100 лин/мм) потребуется сканирование с вдвое большей частотой (200 линий на мм). Это легко представить практически. Если бы мы сканировали миру с разрешением 100 лин/мм с таким же шагом в 100 линий на мм, то можно было бы сохранить ее полностью, если каждая линия миры попадет на каждую линию сканирующего устройства. Но если каждая линия миры попадет между сканирующими линиями, то получится серое поле (рис. 3). Пространственная частота устройства считывания (сканера) в 200 лин/мм, означает, что имеется 400 переходов черное/белое или 400 элементов, т. е. для создания такой пространственной частоты потребуется 400 считывающих элементов на мм. Получаем, что для сканирования миры с разрешением 100 лин/мм необходимо взять разрешение сканирующего устройства как минимум 400 точек на мм.

Если разрешение совокупности пленки и объектива составляет 80 лин/мм (что понимается как 80 пар линий или 160 переходов черное/белое), то для того, чтобы без потерь сохранить такое количество информации в цифровой форме, потребуется 320 точек на мм или 8128 точек на дюйм. Для формата 24×36 мм это равняется 7680×11520 точек.

Таким образом, для считывания всей информации с пленки потребуется разрешение сканирования около 8000 dpi. При таком значении фактически каждое зернышко фотошедевра будет сохранено в цифровом формате. На практике такая задача встречается редко.

Рассмотрим задачу получения цифрового файла максимального качества. В данном случае цель состоит в том, чтобы перенести в цифровое изображение только то, что реально сохранено на пленке. Предположим, что разрешающая способность пленки и объектива составляет 80 лин/мм. По теореме, обратной теореме Котельникова получаем, что у существовавшего в плоскости пленки изображения реально сохранена пространственная частота 40 лин/мм. Для восстановления такой частоты необходимо будет сканировать с разрешением 80 точек на мм или 2032 dpi. Получаем, что для создания цифрового файла максимально качества необходимо разрешение сканера в пределах 2000-2500 dpi. Сканеры с таким параметром вполне доступны.

Используя разрешение, скажем, в 2000 dpi, мы получим из одного кадра формата 24×36 мм файл, размером 1890×2834 пикселей. Если вернуться к рассмотренному вопросу о необходимой информации для публикации в журнале, то, приняв Qf = 2 и линиатуру журнала равной 150 lpi один кадр узкой пленки может быть напечатан с максимальным качеством форматом 16×24 см, то есть чуть больше, чем половина полосы. Примерно до этого формата не имеет значения, возьмем мы узкую пленку или широкую. Как известно, кадр с узкого формата все же можно поместить на целую полосу (Qf будет равен примерно 1,5), но отличие от среднего формата уже будет заметно.

Если пересчитать максимальное разрешение цифрового изображения, полученного с кадра 24×36 мм в мегапикселы, получается 1890 x 2834 = = 5356260 (~ 5,3 мегапикселей). Примерно таким разрешением должна обладать цифровая камера, чтобы сравниться с пленочным аналогом.

В заключение хотелось бы отметить, что все приведенные значения не следует понимать буквально. Отличие разрешающей способности пар «объектив – пленка» может быть велико и колеблется от 40 до 150 лин/мм. Поэтому размер полученного цифрового файла с максимальным качеством будет различным. Все рекомендации относительно разрешения цифрового файла для печати могут незначительно меняться, в частности, в зависимости от алгоритма растрирования.

Смотрите также:

Принтер останавливается во время печати

Защита от неприятностей

Что делать если произошло загрязнение печатающей головки или помпы Вашего струйного принтера

Взаимосвязанное расположение картриджа и печатающей головки струйного принтера

Подходы к фотопечати с помощью струйных принтеров. Управление размером точки

Склеивание трубок-капиляров в шлейф. Изготовление многоканального шлейфа для СНПЧ

Масштабирование и размер изображений на современных страницах SharePoint

Современные страницы и веб-части полностью реагируют на различные устройства, поэтому масштаб изображений, используемых в веб-частях, зависит от того, где они показаны, какой макет используется и какое устройство их просматривает. Например, современные страницы прекрасно смотрятся на мобильных устройствах, а автоматическое масштабирование изображений помогает создать привлекательный вид.

Какие размеры изображений лучше всего работают?

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

Поиск изображений наилучшего размера зависит от указанных здесь факторов.

• Пропорции:отношение между высотой и шириной изображений

• Макет столбца:тип и количество столбцов на странице

• Макет веб-части:макет веб-части, в которой используется изображение

Пропорции

Пропорции — это отношение между шириной и высотой изображений. Обычно оно выражается в двух числах, таких как 3:2, 4:3 или 16:9. Ширина всегда является первым числом. Например, соотношение 16:9 может иметь ширину 1600 пикселей на 900 пикселей в высоту. Это может быть 1920 x 1080, 1280 x 720 или любые другие комбинации ширины и высоты, которые можно вычислить, равные 16:9. Калькуляторы пропорций можно найти в Интернете и некоторых средствах редактирования фотографий, чтобы определить пропорции изображений. 

В большинстве случаев изображения в современных веб-частях лучше всего работают на разных макетах и устройствах с соотношением сторон 16:9 или 4:3 в зависимости от макета.

Макеты столбцов

На странице можно найти разделы с различными типами столбцов и макетами, такими как полно ширинные столбцы, один столбец, два столбца, три столбца, один третий левый и один третий правый столбец. Обычно изображения, которые должны заполнять ширину столбца, должны быть по крайней мере такой же ширины, как и в столбце, в котором они размещены. Например, изображение веб-части изображения в одном столбце должно иметь ширину не менее 1204 пикселей. Ниже указаны правила ширины для каждого макета столбца.

Из-за скорости реагирования страниц изображения в полношириных столбцах всегда будут отображаться на полноширивной странице с автоматической высотой в зависимости от размера экрана.

Высота изображений в других макетах столбцов будет зависеть от пропорций. Ниже указаны рекомендации по высоте и ширине для пропорций 16:9 и 4:3 (округлка вверх/вниз до ближайшего пикселя). Это помогает, например, сохранить ширину и высоту изображений с соответствующим масштабом для мобильных устройств.

Макеты веб-части

Макеты в веб-частях, которые вы используете, также влияют на масштаб изображений. В следующих примерах различные веб-части и их макеты в одном столбце, а также пропорции, используемые в каждой из них.

Рассмотрим это изображение с исходными пропорциами 16:9:

Ниже показаны примеры рисунка, показанного в макете страницы с одной колонкой в разных веб-частях и макетах.

Советы: 

• При добавлении изображения в область заголовка страницы или веб-части главного имиджегового рисунка также лучше всего установить его фокальной точкой. Дополнительные информацию о настройке фокальной точки для этих двух сценариев см. в веб-части «Изменение фокальной точки рисунка в веб-части «Главного имиджевного рисунка» и настройке области заголовка на странице.

Рекомендации по изображению в заглавной области сайта

Кроме страниц, может потребоваться добавить дополнительные логотипы или изображения. Ниже рекомендации по размеру этих элементов.

Обзор методов супер-разрешения изображений для начинающих

Супер-разрешение — это результат восстановления изображения с высоким разрешением (HR) из данного изображения с низким разрешением (LR). В этой статье приведены основные подходы для решения задачи генерации супер-разрешения изображения с учителем. Изображение может иметь «более низкое разрешение» из-за меньшего пространственного разрешения (то есть размера) или из-за ухудшения качества (такого как размытие). Мы можем связать изображения HR и LR с помощью следующего уравнения: LR = degradation(HR).

Перевод статьи An Introduction to Super Resolution using Deep Learning, автор — Bharath Raj. Ссылка на оригинал — в подвале статьи.

Очевидно, что при применении функции ухудшения качества мы получаем изображение LR из изображения HR. Но можем ли мы сделать обратное? В идеальном случае да! Если мы знаем точную функцию деградации, применяя ее инверсию к изображению LR, мы можем восстановить изображение HR.

Но в этом и заключается проблема. Обычно мы не знаем эту функцию заранее. Непосредственная оценка обратной функции деградации является некорректной задачей. Несмотря на это, методы глубокого обучения доказали свою эффективность для супер-разрешения. Используя изображение HR в качестве цели  и изображение LR в качестве входных данных, мы можем рассматривать это как задачу обучения с учителем.

Эта статья в основном посвящена ознакомлению с супер-разрешением с использованием глубокого обучения с использованием методов обучения с учителем. Также в ней обговариваются некоторые важные функции потерь и метрики. Большая часть контента взята из этого обзора методов, на который вы можете ссылаться.

Подготовка данных

Одним из простых способов получения данных LR является ухудшение данных HR. Это часто делается с помощью размытия или добавления шума. Изображения с более низким пространственным разрешением также можно масштабировать с помощью классического метода повышения дискретизации, такого как билинейная или бикубическая интерполяция. Особенности JPEG и аномалии квантования также могут быть использованы для ухудшения изображения.

Важно отметить, что рекомендуется хранить изображение HR в несжатом (или сжатом без потерь) формате. Это должно предотвратить ухудшение качества изображения HR из-за сжатия с потерями, которое может дать низкую производительность.

Типы сверток

Помимо классических 2D-сверток, в сетях можно использовать несколько интересных вариантов для улучшения результатов. Развернутые (злокачественные) свертки могут обеспечить более широкое поле зрения, то есть, использовать информацию, расположенную на большом расстоянии. Такие приемы, как пропуск соединений, пространственный пирамидальный пуллинг и полносвязные блоки объединеняют признаки как низкого, так и высокого уровня для повышения производительности.

На приведенном выше изображении приводится ряд стратегий проектирования сетей. Вы можете обратиться к этой статье для получения дополнительной информации. Для ознакомления с различными типами сверток, обычно используемых в глубоком обучении, вы можете обратиться к этому блогу.

Методы супер-разрешения

Предварительное увеличение разрешения (Pre-Upsampling)

В этой группе методов изображения с низким разрешением сначала интерполируются для получения «грубых» изображений с большим разрешением. Теперь CNN используются для обучения end-to-end отображения от интерполированных изображений с низким качеством до изображений с высоким качеством. Идея этой группы методов состоит в том, что может быть проще сначала увеличить разрешение изображений, используя традиционные методы (такие как билинейная интерполяция), а затем сделать резул результирующий результат, чем изучить прямое отображение из низкоразмерного пространства в многомерное пространство.

Вы можете обратиться к странице 5 этого документа для просмотра информации о моделях, использующих эту технику. Преимущество состоит в том, что, поскольку Upsampling обрабатывается традиционными методами, CNN нужно только научиться уточнять грубое изображение, что проще. Более того, поскольку здесь мы не используем транспонированные свертки, есть возможность не допустить «артефактов шахматной доски«. Однако недостаток этой группы методов заключается в возможном усилении шумов и размытия изображения из-за предварительного повышения разрешения.

Пост-увеличение разрешения (Post-Upsampling)

В этом случае на CNN подаются оригинальные изображения с низким разрешением. Повышение разрешения выполняется на последнем обучаемом слое.

Преимущество этого метода состоит в том, что извлечение признаков выполняется в пространстве меньшего размера (перед повышением разрешения), и, следовательно, вычислительная сложность уменьшается. Кроме того, используя обучаемый слой upsampling, модель можно обучать end-to-end.

Прогрессивное увеличение разрешения (Progressive Upsampling)

В группе методов с пост-увеличением разрешения, хотя вычислительная сложность и была снижена, но использовалась только одна свертка с повышением размерности. Это усложняет процесс обучения при больших коэффициентах масштабирования. Для устранения этого недостатка, в таких работах, как сеть Laplacian Pyramid SR (LapSRN) и Progressive SR (ProSR), была принята концепция прогрессивного увеличения разрешения. Модели в этом случае используют каскад CNN для постепенного восстановления изображений с высоким разрешением при меньших коэффициентах масштабирования на каждом этапе.

Раскладывая сложную задачу на более простые, трудность в обучении значительно снижается, и можно добиться лучшей производительности. Кроме того, стратегии обучения, такие как обучение по учебному плану, могут быть интегрированы для дальнейшего снижения сложности обучения и повышения итоговой успеваемости.

Итеративное понижение и повышение разрешения

Другой популярной моделью архитектуры является структура песочных часов (или U-Net). В некоторых вариантах, таких как сеть Stacked Hourglass, используется несколько последовательных структур песочных часов, которые эффективно чередуются между процессами повышения и понижения размерности.

Модели в этой структуре могут лучше определить глубокие отношения между парами изображений LR-HR и, таким образом, обеспечить более качественные результаты реконструкции.

Функции потерь

Функции потерь используются для измерения разницы между сгенерированным изображением высокого разрешения и настоящим изображением высокого разрешения. Эта разница (ошибка) затем используется для оптимизации модели обучения с учителем. Существует несколько классов функций потерь, каждый из которых оштрафовывает свой аспект генерируемого изображения.

Часто более одной функции потерь используется путем взвешивания и суммирования ошибок, полученных от каждой функции потерь в отдельности. Это позволяет модели сосредоточиться на аспектах, одновременно вносимых множественными функциями потерь.

total_loss = weight_1 * loss_1 + weight_ 2 * loss_2 + weight_3 * loss_3

В этом разделе мы рассмотрим некоторые популярные классы функций потерь, используемые для обучения моделей.

Пиксельная ошибка (Pixel Loss)

Пиксельная ошибка — это самый простой класс функций потерь, где каждый пиксель в сгенерированном изображении напрямую сравнивается с каждым пикселем в настоящем изображении. Используются популярные функции потерь, такие как потери L1 или L2, или расширенные варианты, такие как потери Smooth L1.

Метрика PSNR (обсуждаемая ниже) сильно коррелирует с разностью пикселей, и, следовательно, минимизация потери пикселей напрямую максимизирует значение метрики PSNR (что указывает на хорошую производительность). Тем не менее, пиксельная ошибка не учитывает качество изображения, и модель часто выдает неудовлетворительные результаты.

Ошибка содержимого (Content Loss)

Эта ошибка оценивает качество изображения на основе его воспринимаемого качества. Интересный способ сделать это — сравнить характеристики высокого уровня сгенерированного изображения и настоящего изображения. Мы можем получить эти функции высокого уровня, передав оба этих изображения через предварительно обученную сеть классификации изображений (например, VGG-Net или ResNet).

Вышеупомянутое уравнение вычисляет потерю контента между настоящим и сгенерированным изображением, учитывая предварительно обученную сеть (Φ) и слой ( l ) этой предварительно обученной сети, на котором вычисляются потери. Эта потеря способствует тому, что сгенерированное изображение воспринимается как настоящее изображение. По этой причине эта ошибка также известна как ошибка восприятия (perceptual loss).

Ошибка текстуры

Чтобы позволить сгенерированному изображению иметь тот же стиль (текстуру, цвет, контраст и т.д.), что и у настоящего изображения, используется вычисление ошибки текстуры (или ошибка реконструкции стиля). Текстура изображения, как описано Gatys et. al, определяется как корреляция между различными характерными каналами. Каналы объектов обычно получают из карт признаков, извлеченных с использованием предварительно обученной сети классификации изображений (Φ).

Корреляция между картами признаков представлена ​​матрицей Грама (G), которая является внутренним произведением между векторизованными картами объектов i и j на слое  l (показано выше). Как только матрица Грамма рассчитана для обоих изображений, вычисляется ошибка текстуры:

Используя эту ошибку, модель мотивируется создавать реалистичные текстуры и визуально более удовлетворительные результаты.

Полная вариационная ошибка

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

Здесь i, j, k перебирает высоту, ширину и каналы соответственно.

Состязательная ошибка

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

Учитывая набор целевых образцов, Генератор пытается создать образцы, которые могут обмануть Дискриминатора, заставив его поверить, что они реальны. Дискриминатор пытается отличить реальные (целевые) выборки от поддельных (сгенерированных) выборок. Используя этот итеративный подход к обучению, мы в конечном итоге получим Генератор, который действительно хорош в создании образцов, подобных целевым образцам. На следующем рисунке показана структура типичного GAN.

Усовершенствования базовой архитектуры GAN были введены для повышения производительности. Вы можете посмотреть этот блог для более подробной информации о достижениях в GAN.

Как правило, модели, обученные с состязательной ошибкой, имеют лучшее качество восприятия, даже если они могут проиграть по метрике PSNR по сравнению с теми, которые обучены с ошибкой пикселей. Недостатком является то, что процесс обучения GAN немного сложен и нестабилен. Тем не менее, методы стабилизации обучения GAN активно разрабатываются.

Метрики

Один большой вопрос заключается в том, как мы можем количественно оценить производительность нашей модели. Ряд методов оценки качества изображения (IQA) (или метрики) используются для одного и того же.  Эти метрики можно в целом классифицировать на две категории -  субъективные метрики и объективные метрики.

Субъективные метрики основаны на оценке восприятия человеком-наблюдателем, тогда как объективные метрики основаны на вычислительных моделях, которые пытаются оценить качество изображения. Субъективные метрики часто являются более «точными для восприятия», однако некоторые из этих метрик неудобны, трудоемки или дороги для вычисления. Другая проблема заключается в том, что эти две категории метрик могут не соответствовать друг другу. Следовательно, исследователи часто анализируют результаты, используя метрики из обеих категорий.

В этом разделе мы кратко рассмотрим несколько широко используемых метрик для оценки производительности нашей модели с супер-разрешением.

PSNR

Пиковое отношение сигнал/шум (PSNR) — это обычно используемая объективная метрика для измерения качества восстановления преобразования с потерями. PSNR обратно пропорционально логарифму средней квадратичной ошибки (MSE) между настоящим и сгенерированным изображением.

В приведенной выше формуле L — максимально возможное значение пикселя (для 8-битных изображений RGB — 255). Неудивительно, что, поскольку PSNR заботится только о разнице между значениями пикселей, он не так хорошо отражает воспринимаемое качество.

SSIM

Структурное сходство (SSIM) — это субъективная метрика, используемая для измерения структурного сходства между изображениями на основе трех относительно независимых сравнений, а именно: яркости, контрастности и структуры. Абстрактно, формула SSIM может быть показана как взвешенное произведение яркости, контраста и структуры, вычисленных независимо.

В приведенной выше формуле альфа, бета и гамма являются весами функций сравнения яркости, контраста и структуры соответственно. Обычно используемое представление формулы SSIM показано ниже:

В приведенной выше формуле μ(I) представляет среднее значение конкретного изображения, σ(I) представляет стандартное отклонение конкретного изображения, σ(I, I’) представляет ковариацию между двумя изображениями и C1, C2 задают константы, чтобы избежать нестабильности. Для краткости, значение терминов и точный вывод не объяснены в этой статье, но заинтересованный читатель может ознакомиться с ними в разделе 2.3.2 в этой статье.

Из-за возможного неравномерного распределения статистических характеристик или искажений изображения локальная оценка качества изображения более надежна, чем его оценка в глобальном масштабе. Среднее значение SSIM (MSSIM), которое разбивает изображение на несколько окон и усредняет значение SSIM, полученное в каждом окне, является одним из таких методов оценки качества на локальном уровне.

В любом случае, поскольку SSIM оценивает качество реконструкции с точки зрения зрительной системы человека, эта метрика лучше соответствует требованиям оценки восприятия.

Другие результаты IQA

Без объяснения, некоторые другие метрики оценки качества изображения перечислены ниже. Заинтересованный читатель может обратиться к этой статье для более подробной информации.

• Средняя оценка мнений (MOS)
• Оценка на основе задач
• Критерий достоверности информации (IFC)
• Визуальная достоверность информации (VIF)

Заключение

В этой статье были рассмотрены некоторые вводные материалы и процедуры для обучения моделей глубокого обучения для задачи супер-разрешения. На самом деле, благодаря современным исследованиям, существуют более продвинутые методики, которые могут дать лучшую производительность. Кроме того, исследование таких направлений, как супер-разрешение без учителя, лучшие методы нормализации и лучшие репрезентативные метрики, могут значительно расширить эту область. Заинтересованным читателям предлагается экспериментировать с их инновационными идеями, участвуя в таких задачах, как PIRM Challenge.

КАКИЕ БЫВАЮТ ВИДЕО РАЗРЕШЕНИЯ ?

1. Что такое камера видеонаблюдения высокого разрешения?

Все форматы изображения с разрешением от 1280×720, считаются форматом высокой четкости (HD). В современном мире видеонаблюдения существуют два направления: аналоговое и цифровое. Соответственно, существуют аналоговые и сетевые (IP) HD-камеры. Разрешение 960H (NTSC: 960×480) не относится к категории HD. Текущие форматы разрешения HD включают в себя: 1.0 мегапиксель (720p), 1,3 мегапикселя (960p), 2 мегапикселя (1080p), 3 мегапикселя, 5 мегапикселей, 8 мегапикселей (4K UHD), 12 мегапикселей, 33 мегапикселя (8K UHD).
Как правило, сетевые HD камеры обеспечивают несколько лучшее качество изображения, чем аналоговые HD камеры того же разрешения (например, 720p).
Недавно назад один из наших клиентов сообщил, что установил систему видеонаблюдения на AHD камерах 720p (производитель заявил 1000ТВЛ) и остался недоволен: качество изображения этих 720p AHD камер оказалось даже хуже, чем у старых камер 960H. Почему это произошло, мы расскажем в четвёртой части статьи.

2. Преимущества высокой чёткости

По сравнению со стандартной чёткостью, технология HD увеличила детальность изображения. Качество изображения дополнительно улучшено благодаря различным технологиям улучшения, таких как прогрессивное сканирование, 2D/3D динамический шумоподавитель, широкий динамический диапазон (WDR) и т.д. Короче говоря, HD обеспечивает превосходное качество изображения. Обычная аналоговая камера стандарта 960H даёт разрешение 960H/WD1, что составляет 960×480 пикселей (для NTSC) или 960×576 пикселей (для PAL). После того, как сигнал будет оцифрован в DVR или гибридном видеорегистраторе, изображение будет состоять максимум из 552960 пикселей (0,5 мегапикселя).
Камера высокого разрешения может охватывать гораздо более широкую область, чем обычная камера. Возьмём для примера 12-мегапиксельная панорамную камеру с объективом типа »рыбий глаз» с углом обзора 360 градусов. Благодаря встроенному 12-мегапиксельному сенсору изображения и ePTZ (виртуальное панорамирование/наклон/масштабирование), а также возможности разделения изображения, она может заменить сразу несколько обычных камер видеонаблюдения, что значительно снизит затраты на установку и плату за последующее техобслуживание.
Отличная совместимость — еще одно преимущество HD. Независимо от того, совершаете ли вы покупки онлайн или ходите в местные магазины электроники, вы обратили внимание, что все телевизоры, видеокамеры и цифровые фотоаппараты поддерживают формат HD 1080p (FullHD). Соответственно, если вы хотите, чтобы это оборудование работало с вашей системой видеонаблюдения, вам следует выбрать систему видеонаблюдения, поддерживающую 1080p. Также мы понимаем, что 4K является текущей тенденцией, логично ожидать, что система видеонаблюдения 4K UHD станет популярной в будущем.

3. Различные форматы разрешения HD

IP камеры высокого разрешения занимают главное место в системах видеонаблюдения. Они могут обеспечить более качественное видео с большей детализацией изображения и широким охватом, чем камеры стандартного разрешения. Вы можете подобрать нужный формат сетевых (IP) камер в соответствии с вашими требованиями. Например, для приложений распознавания лиц или автомобильных номеров выбирайте мегапиксельные сетевые камеры с разрешением 1080p и более. Чтобы узнать разрешение того или иного HD формата, обратитесь к следующей таблице:

Формат	Разрешение (в пикселях)	Соотношение сторон	Развёртка
1MP/720P	1280×720	16:9	Прогрессивная
SXGA/960P	1280×960	4:3	Прогрессивная
1. 3MP	1280×1024	5:4	Прогрессивная
2MP/1080P	1920×1080	16:9	Прогрессивная
2.3MP	1920×1200	16:10	Прогрессивная
3MP	2048×1536	4:3	Прогрессивная
4MP	2592×1520	16:9	Прогрессивная
5MP	2560×1960	4:3	Прогрессивная
6MP	3072×2048	3:2	Прогрессивная
4K Ultra HD	3840×2160	16:9	Прогрессивная
8K Ultra HD	7680×4320	16:9	Прогрессивная

4 Выбор HD камеры видеонаблюдения

Что ещё помимо разрешения изображения следует учитывать при выборе сетевых HD камер? Здесь мы поделимся информацией о том, как правильно выбрать HD камеры с точки зрения установщика.

Низкая освещённость (Low illumination)

Как известно, камера видеонаблюдения работает не так, как бытовой фотоаппарат — камера видеонаблюдения не может использовать вспышку при захвате изображения/видео. Если камера имеет слабые характеристики при низкой освещённости, её применение ограничено. При работе в условиях низкой освещённости такая камера »слепнет», несмотря на её очень высокое разрешение.

Высокое разрешение — палка о двух концах: производитель сенсоров не имеет возможности бесконечно увеличивать площадь кристалла, поэтому повышение разрешения связано с уменьшением размера самого пикселя при тех же размерах кристалла сенсора (обычно 1/3»), поэтому на каждый пиксель приходится меньшее количество света, что приводит к уменьшению чувствительности при возрастании разрешения (мегапикселей).

В настоящее время оптимальным значением для большинства областей видеонаблюдения является разрешение 2Мп (1080p/FullHD), именно под это разрешение существует большинство сенсоров из серии Low Illumination.

Задержка видео (Time lag)

Все сетевые (IP) камеры видеонаблюдения имеют некоторую задержку в сравнении с реальным временем, и стоимость или качество камеры не является определяющей величины этой задержки. Например, для того же изображения с разрешением 720p время задержки видео для некоторых камер составляет 0,1 с, а для некоторых других сетевых камер это время может составлять 0,4с, и даже больше 0,7с. Почему время задержки видео отличается? В отличие от аналоговой камеры, сетевая камера сжимает видео (этот процесс называется кодированием), а на пользовательских устройствах происходит декодирование видео для отображения, что приводит к задержке видео. Обычно, чем меньше время задержки, тем лучше возможности процессора обработки изображения. Это означает, что нужно выбрать сетевую камеру с наименьшей задержкой видео.

Тепловыделение

Когда камера видеонаблюдения работает, она выделяет тепло, особенно когда ночью включается инфракрасная подсветка. Это правило справедливо для любой камеры видеонаблюдения. Чрезмерное тепловыделение увеличивает вероятность перегрева и, как следствие, повреждения камеры. При выборе мегапиксельных камер обращайте внимание на:

Выбирайте камеру с меньшим энергопотреблением. Низкое энергопотребление означает, что камера экономит электроэнергию, выделяет меньше тепла. Обратная сторона: в зимнее время камера с малым тепловыделением может замёрзнуть (обычно это касается ИК фильтра), а также малое потребление означает, что установлена слабая ИК подсветка, это тоже следует учитывать.

Задумайтесь об использовании камеры с улучшенными характеристиками при низкой освещенности (без инфракрасного освещения или другого искусственного освещения). Такая камера в условиях слабой освещенности может снимать изображения даже в темноте (> 0,009 — 0,001 люкс).

Выбирайте камеру в корпусе с хорошим рассеиванием тепла. Металлический корпус предпочтительнее пластикового. Для обеспечения надёжной работы, сетевые камеры элитной серии используют ребристый радиатор на корпусе для максимального рассеивания тепла, что значительно помогает камере в обеспечении надежной работы.

Цена

»Высокая цена = это высокое качество» — в большинстве случаев это правило верно. Основываясь на отчетах исследований можно сказать: потребитель часто полагает, что более высокая цена продукта указывает на более высокий уровень качества. Но цена — не единственный показатель хорошего качества, особенно при покупке продукции »Сделано в Китае». Я работаю в сфере видеонаблюдения более пяти лет и могу утверждать, что конечные пользователи, интеграторы и установщики могут получить высококачественные продукты от китайских поставщиков/производителей по очень конкурентоспособной цене. Высококачественные камеры могут иметь уникальный дизайн корпуса, предлагать особые функции, отсутствующие в других продуктах.

Техническая поддержка

В заключение хочу сказать, что сетевые камеры также должны иметь хорошую техническую поддержку. Несмотря на то, что IP камеры становятся все более простыми в настройке и эксплуатации, конечные пользователи могут столкнуться с техническими проблемами, которые потребуют сторонней помощи. Столкнувшись с такой проблемой, вы получите у нас техническую поддержку в течение 1-2 дней, это вполне приемлемо. Именно из-за этого лично я не советую покупать камеры видеонаблюдения на Aliexpress, так как в будущем вы вряд ли получите техническую поддержку от продавцов оперативную поддержку.

Мегапиксели против ТВ-линий

Тип устройства	ТВЛ/Мегапиксели	Итоговое разрешение NTSC	Итоговое разрешение PAL	Мегапиксели NTSC	Мегапиксели PAL
Аналоговые матрицы SONY CCD	480TVL	510H*492V	500H*582V	≈0.25 мегапикселей	≈0.29 мегапикселей
	600TVL	768*494	752*582	≈0.38 мегапикселей	≈0.43 мегапикселей
	700TVL	976*494	976*582	≈0.48 мегапикселей	≈0.56 мегапикселей
Аналоговые матрицы SONY CMOS	1000TVL	1280*720		≈0. 92 мегапикселей
IP камеры и IP регистраторы	720P	1280*720		≈0.92 мегапикселей
	960P	1280*960		≈1.23 мегапикселей
	1080P	1920*1080		≈2.07 мегапикселей
	3MP	2048×1536		≈3.14 мегапикселей
	5MP	2592×1920		≈4.97 мегапикселей
Аналоговые регистраторы	QCIF	176*144		≈0.026 мегапикселей
	CIF	352*288		≈0.1 мегапикселей
	HD1	576*288		≈0.16 мегапикселей
	D1(FCIF)	704*576		≈0.4 мегапикселей
	960H	928*576		≈0. 53 мегапикселей

QVGA	320×240	4:3	76,8 кпикс
SIF (MPEG1 SIF)	352×240	22:15	84,48 кпикс
CIF (MPEG1 VideoCD)	352×288	11:9	101,37 кпикс
WQVGA	400×240	5:3	96 кпикс
[MPEG2 SV-CD]	480×576	5:6	276,48 кпикс
HVGA	640×240	8:3	153,6 кпикс
HVGA	320×480	2:3	153,6 кпикс
nHD	640×360	16:9	230,4 кпикс
VGA	640×480	4:3	307,2 кпикс
WVGA	800×480	5:3	384 кпикс
SVGA	800×600	4:3	480 кпикс
FWVGA	848×480	16:9	409,92 кпикс
qHD	960×540	16:9	518,4 кпикс
WSVGA	1024×600	128:75	614,4 кпикс
XGA	1024×768	4:3	786,432 кпикс
XGA+	1152×864	4:3	995,3 кпикс
WXVGA	1200×600	2:1	720 кпикс
HD 720p	1280×720	16:9	921,6 кпикс
WXGA	1280×768	5:3	983,04 кпикс
SXGA	1280×1024	5:4	1,31 Мпикс
WXGA+	1440×900	8:5	1,296 Мпикс
SXGA+	1400×1050	4:3	1,47 Мпикс
XJXGA	1536×960	8:5	1,475 Мпикс
WSXGA (?)	1536×1024	3:2	1,57 Мпикс
WXGA++	1600×900	16:9	1,44 Мпикс
WSXGA	1600×1024	25:16	1,64 Мпикс
UXGA	1600×1200	4:3	1,92 Мпикс
WSXGA+	1680×1050	8:5	1,76 Мпикс
Full HD 1080p	1920×1080	16:9	2,07 Мпикс
WUXGA	1920×1200	8:5	2,3 Мпикс
2K	2048×1080	256:135	2,2 Мпикс
QWXGA	2048×1152	16:9	2,36 Мпикс
QXGA	2048×1536	4:3	3,15 Мпикс
WQXGA / Quad HD 1440p	2560×1440	16:9	3,68 Мпикс
WQXGA	2560×1600	8:5	4,09 Мпикс
QSXGA	2560×2048	5:4	5,24 Мпикс
3K	3072×1620	256:135	4,97 Мпикс
WQXGA	3200×1800	16:9	5,76 Мпикс
WQSXGA	3200×2048	25:16	6,55 Мпикс
QUXGA	3200×2400	4:3	7,68 Мпикс
QHD	3440×1440	43:18	4. 95 Мпикс
WQUXGA	3840×2400	8:5	9,2 Мпикс
4K UHD (Ultra HD) 2160p	3840×2160	16:9	8,3 Мпикс
4K UHD	4096×2160	256:135	8,8 Мпикс
	4128×2322	16:9	9,6 Мпикс
	4128×3096	4:3	12,78 Мпикс
	5120×2160	21:9	11,05 Мпикс
5K UHD	5120×2700	256:135	13,82 Мпикс
	5120×2880	16:9	14,74 Мпикс
	5120×3840	4:3	19,66 Мпикс
HSXGA	5120×4096	5:4	20,97 Мпикс
6K UHD	6144×3240	256:135	19,90 Мпикс
WHSXGA	6400×4096	25:16	26,2 Мпикс
HUXGA	6400×4800	4:3	30,72 Мпикс
7K UHD	7168×3780	256:135	27,09 Мпикс
8K UHD (Ultra HD) 4320p / Super Hi-Vision	7680×4320	16:9	33,17 Мпикс
WHUXGA	7680×4800	8:5	36,86 Мпикс
8K UHD	8192×4320	256:135	35,2 Мпикс

Таблица объема (Гб) часа записи камер видеонаблюдения для кодека H.

Для уменьшения объема хранимой видеоинформации в видеорегистраторах применяются различные алгоритмы ее компрессии.

Основным преимуществом алгоритма H.264 является межкадровое сжатие, при котором для каждого следующего кадра определяются его отличия от предыдущего, и только эти отличия после компрессии сохраняются в архиве. При работе алгоритма периодически в архиве сохраняются опорные кадры (I-кадры), представляющие собой сжатое полное изображение, а затем на протяжении 25-100 кадров сохраняются только изменения, называемые промежуточными кадрами (P- и B-кадрами). Такой способ компрессии позволяет получить высокое качество изображения при малом объеме, но требует большего объема вычислений, чем компрессия в стандарте MJPEG.

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

Еще одним преимуществом алгоритма h364 является его возможность работы в режиме постоянного потока (CBR — constant bit rate) при котором степень компрессии видеоинформации изменяется динамически и таким образом четко фиксируется объем создаваемого архива за одну секунду. Такая особенность алгоритма позволяет однозначно определить максимальный объем архива за час непрерывной работы системы, а также необходимый сетевой трафик при удаленном доступе.

Разрешение записи. Wiki-информация — SafeLook

Разрешение видеокамер, видеозаписей, мониторов, телевизоров

Общепринятое определение:

Разрешение. Величина, определяющая количество точек (элементов) изображения на единицу площади изображения. Обычно это понятие применяется к изображениям в цифровой форме, хотя его можно использовать и для описания фотоплёнки, фотобумаги или иного физического носителя изображений. Более высокое разрешение (больше точечных элементов) обеспечивает наиболее точную передачу фактического оригинала.

Определение, относящееся к видеоизображению (видеокамерам, видеозаписи, мониторам и т.д.):

Resolution. Разрешающая способность. Мера способности телекамеры или телевизионной системы воспроизводить детали. Число элементов изображения, которые могут быть воспроизведены с достаточной четкостью. 
 

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

Для цифровой техники определяющим является число точек (пикселей) по горизонтали и вертикали, их количество на единицу площади и определяет качество изображения. А соотношение количества точек (пикселей) по горизонтали к количеству их по вертикали определяет формат изображения.

Показательным в этом случае является представление одной и той же картинки в различном разрешении:

Отсутствие стандартов по разрешению у производителей видеокамер, видеозаписывающего оборудования, производителей мониторов и ТВ оборудования

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

К примеру, среди производителей мониторов имеются свои стандарты (CGA, EGA, VGA, SVGA и. т.д.) по разрешению. У производителей ТВ-приемников (телевизоров) они совершенно иные. Связано это, как правило, с развитием компьютерных мощностей и производительностью видеокарт у первых, а у вторых — с развитием видеоматриц профессиональных видеокамкордеров и прогрессом оборудования обработки ТВ сигналов — от эфирного телевидения до спутникового ТВЧ. Кроме того, и на тех и на  других, конечно же, влияет развитие записывающей цифровой аппаратуры, производители которой прогрессируют от магнитных носителей к CD, DVD, BlueRey и т.д.

Примеры различия разрешающей способности мониторов, телевизоров, матриц видеокамер и видеозаписывающей аппаратуры 

Ниже приведены графические представления в различиях разрешений оборудования различных областей применения и назначения.

Обратите внимание на последнюю картинку — на ней представлены разрешения матриц для видеокамер различного назначения. Как видите, среди форматов (соотношения сторон) практически нет общепринятого и известного потребителю формата 16:9. Этот формат получают «обрезая» изображение любого другого формата сверху и снизу.

Этот, можно сказать маркетинговый, ход появился вследствие требований к уменьшению объемов записываемой информации. Человеческий мозг (и глаз) вполне достоверно умеет «добавлять» (додумывать) картинку даже при отсутствии полноформатного изображения.

Разрешающая способность видеозаписывающей аппаратуры SafeLook (семейство SL02-BX). 

Применительно к регистрирующему оборудованию (видеорегистраторам), по нашему мнению, недопустимо обрезание картинки, полученной от камеры, пускай даже в ущерб объему записи. Чем больше деталей (событий) будет зафиксировано на кадровом растре, тем больше полезной информации можно будет получить при рассмотрении критических ситуаций или ЧП.

Именно по этой причине (в отличие от других производителей) мы «не обрезаем» стандартное для аналоговых записей цифровое изображение 720х576 pix. Для увеличения объема записываемых данных существует множество иных способов.

Один из общепринятых способов — запись может производиться не в полном формате, а в «прореженном варианте» — через строку. При воспроизведении строки просто удваиваются, конечно же, с применением специализированной обработки и фильтров для формата записи  с «черезстрочной» разверткой.

Этот способ, к примеру, применяется и в высококачественном телевидении. Существующие форматы видеозаписей HD720i и HD1080i имеют «половинное» количество строк (разрешение по вертикали), а до полноформатного изображение «восстанавливается»  уже непосредственно «в телевизоре».

Китайские производители видеорегистраторов предпочитают вообще не упоминать букву «i» при маркировке своих аппаратов. Проще писать маркетинговые «HD», «FullHD», «2k» или «4k».

Конечно же, картинку можно попробовать «сжать» не только построчно, но еще и по длине строки — казалось бы, изображение можно уменьшить еще вдвое. Можно, но, в отличие от «черезстрочного прореживания» этот способ существенно ухудшает картинку. По сути, получаемое от «аналоговых» камер изображение, оцифрованное до 720х576 pix (стандарт формата D1) в этом случае будет уменьшено до разрешения формата CIF (360х288 pix). А результаты восстановления такой картинки до стандартного формата D1 очень отличаются по качеству от картинки, восстановленной из «половинного» формата записи HD1 (720х288 pix). 

Несколько примеров кадров, записываемых видеорегистраторами нашего производства, и восстанавливаемых из форматов D1, HD1 и CIF можно посмотреть здесь.

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

Следует помнить, что качество записываемого изображения так же зависят от характеристик применяемых видеокамер  и параметров «качества» (сжатия) записи.

Разрешение изображения | Образовательный веб-сайт Microbus Microscope

Что означает разрешение изображения?

Разрешение — это количество пикселей в изображении. Разрешение иногда определяется шириной и высотой изображения, а также общим количеством пикселей в изображении. Например, изображение шириной 2048 пикселей и высотой 1536 пикселей (2048 x 1536) содержит (умножение) 3 145 728 пикселей (или 3,1 мегапикселя). Вы можете назвать это изображением 2048 x 1536 или 3,1 мегапикселя. По мере того, как количество мегапикселей в устройстве захвата в вашей камере увеличивается, увеличивается и изображение максимального размера, которое вы можете создать. Это означает, что 5-мегапиксельная камера способна снимать изображение большего размера, чем 3-мегапиксельная камера.

Как разрешение изображения отображается на мониторе моего компьютера?

Экран компьютера, на который вы сейчас смотрите, также имеет определенное разрешение. Чем больше экран, тем больше у вас, вероятно, установлено разрешение экрана. Если у вас 17-дюймовый монитор, вероятно, вы установили его на 800 x 600 пикселей. Если у вас 19-дюймовый экран, он, вероятно, будет установлен на 1024 x 768. Вы можете изменить настройки, но они оптимальны для этих размеров экрана.

Теперь, если ваш монитор настроен на 800 x 600 и вы открываете изображение размером 640 x 480, оно будет занимать только часть экрана. Если вы откроете изображение размером 2048 x 1536 (3,1 мегапикселя), то обнаружите, что перемещаете ползунок, чтобы увидеть все различные части изображения. Это просто не подходит. Чтобы увидеть паука выше в этом разрешении, щелкните одно из изображений паука выше. Добавьте к этому тот факт, что монитор компьютера имеет конечное количество доступных пикселей на дюйм (например, 72), поэтому, если вы собираетесь отображать изображение только на мониторе, вам следует понизить качество до 72, чтобы сэкономить место в файле. . Если вы собираетесь разместить свое изображение на веб-странице или отправить его по электронной почте другу, вам нужно сначала сделать его подходящего размера. Не слишком большой, не слишком маленький. Возможно, высота 200-300 пикселей будет хорошим размером. Вы также можете уменьшить размер файла (не обязательно размер изображения), чтобы он загружался быстрее. Вы уменьшаете размер файла на сжатие изображения (см. следующий вопрос).

Что означает качество изображения?

Помимо размера изображения, можно также управлять его качеством. Здесь мы используем слово «сжатие». Несжатое изображение сохраняется в формате файла, который вообще не сжимает пиксели изображения. Такие форматы, как файлы BMP или TIF, не сжимают изображение. Если вы хотите уменьшить «размер файла» (количество мегабайт, необходимое для сохранения изображения), вы можете сохранить изображение в виде файла JPG и выбрать желаемую степень сжатия перед сохранением изображения.

Сжатие JPG анализирует изображения блоками размером 8X8 пикселей и выборочно снижает детализацию внутри каждого блока. При более высоких степенях сжатия рисунок блоков становится более заметным, и может быть заметна потеря деталей, особенно когда вы пытаетесь сделать отпечатки большего размера, чем рекомендуется. Тема и рисунок на изображении также являются фактором. Например, изображение голубого неба можно немного сжать без каких-либо заметных эффектов, а изображение разноцветной птицы довольно быстро «пикселизируется». Взгляните еще раз на два изображения вверху. Первый несколько сжат, около 200 пикселей в высоту (размер) и файл всего 14Кб. Изображение справа имеет тот же размер, но сжато немного больше, уменьшая размер файла до 4 КБ.

Используя сжатие JPG, вы можете сохранить физический размер изображения и уменьшить объем дискового пространства, необходимого для его хранения, но вы пожертвуете качеством изображения.

Итак, у меня есть изображение размером 640 x 480. Насколько большой отпечаток я могу сделать?

Верный ответ: вы можете сделать отпечаток любого размера, но очень быстро вы начнете видеть «блоки» (пикселизация) и качество упадет. Чтобы максимизировать возможности вашего принтера, вы должны распечатать изображение такого размера, который может обработать принтер. Здесь мы вводим новый термин «точек на дюйм» (dpi) или «пикселей на дюйм» (ppi). Например, у вас есть изображение размером 640 x 480, и вы хотите напечатать его с разрешением 200 dpi. 640, деленное на 200, равно 3,2, а 480, деленное на 200, равно 2,4, поэтому, если вы напечатаете это изображение размером 3,2 x 2,4 дюйма, вы получите отпечаток с 200 точками на дюйм. Мы рекомендуем как минимум 200 dpi для хорошего качества печати.

Теперь давайте решим одну из этих задач в обратном порядке. Допустим, мы хотим напечатать изображение размером 8 X 10 дюймов с разрешением 300 dpi. Какое разрешение мы должны иметь для этого? (Остановитесь здесь и подумайте, или читайте дальше…) Хорошо, 300 умножить на 8 — это 2400 и 300 умножить. 10 — это 3000. Итак, для этого нам понадобится изображение 3000 x 2400. Давайте посмотрим, 3000 x 2400 — это 7,2 мегапикселя! Это может быть большой размер файла.

Да. Сначала попытайтесь определить, как вы будете использовать изображение. Вы хотите распечатать его размером 8 x 10 дюймов или вы отправите его по электронной почте только другу? Выберите размер изображения и степень сжатия в соответствии с этими потребностями и снимайте с минимально возможным сжатием. Компромисс заключается в больших размерах файлов, и вы быстрее заполните свой носитель, но позже вы можете сбросить исходный несжатый образ на флэш-накопитель или жесткий диск, сжать оригинал и повторно сохранить его с другим именем файла. Вы не можете расширить ранее сжатый файл, поэтому оставьте несжатый (или слабо сжатый) файл в качестве основного. Чтобы определить, какое разрешение вам потребуется для конкретных размеров отпечатков, см. таблицу ниже.

Объяснение размера и разрешения изображения для печати и на экране

Одной из самых сложных вещей для начинающего фотографа является понимание размера изображения, разрешения и печати.

Итак, в этой статье я объясню, что означают эти термины.

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

Давайте начнем.

Какое разрешение у цифровых камер?

Когда речь идет о цифровых камерах, под разрешением понимается количество мегапикселей, создаваемых датчиком изображения.

Это, в свою очередь, обычно соответствует количеству деталей , которое камера может зафиксировать.

Таким образом, если ваша камера имеет разрешение 20 мегапикселей (часто пишется как 20 мегапикселей), она фиксирует меньше деталей, чем камера с разрешением 30 мегапикселей, которая, в свою очередь, фиксирует меньше деталей, чем камера с разрешением 40 мегапикселей.

Но что такое мегапиксель на самом деле? И как это влияет на вашу способность печатать и отображать фотографии?

мегапикселя и размер фото

Технически мегапиксель равен 1 048 576 пикселям; на самом деле производители камер округляют это число до 1 000 000, когда указывают, насколько большое изображение будет снимать камера.

Итак, моя камера, например, снимает 14,6-мегапиксельные изображения, что составляет около 14 600 000 пикселей на изображение (14,6 x 1 000 000). Эта информация ничего не говорит вам о фактических размерах изображения в пикселях — она сообщает только общее количество пикселей, из которых состоит изображение.

Моя камера, как и большинство зеркальных фотокамер, снимает изображения с соотношением сторон 1,5. Таким образом, соотношение, сравнивающее количество пикселей вдоль длинного края изображения к короткому краю изображения, составляет 3:2.

Каждое из моих полноразмерных изображений RAW имеет размер 4672 x 3104 пикселей. Таким образом, умножая количество пикселей по ширине изображения на количество пикселей по высоте изображения, мы получаем фактическое количество пикселей в изображении (4672 x 3104 = 14 501 888). Вы и я могли бы назвать это 14,5 МП, но производители камер округляют это и называют его камерой 14,6 МП.

Вы можете проверить ширину и высоту изображения с помощью программного обеспечения для редактирования фотографий. В Photoshop вы можете открыть свое изображение, а затем выбрать «Файл» > «Информация о файле» > «Данные камеры».0012 . На изображении выше показано итоговое информационное диалоговое окно.

Пиксель — это отдельный элемент изображения, и для наших целей это наименьший элемент, на который можно разделить фотографию. Пиксель может быть только одного цвета, а фотография состоит из сетки тысяч пикселей, каждый из которых разного цвета и составляет ваше изображение.

Вы можете увидеть эти пиксели, если откроете фотографию и увеличите ее до тех пор, пока не увидите отдельные цветные блоки (как показано ниже). Каждый из этих блоков представляет собой пиксель:

Почему размер важен при печати

При печати изображения вы можете встретить термин PPI или пикселей на дюйм . Это буквально относится к количеству пикселей в строке изображения длиной в дюйм.

Большинству служб печати и даже вашему собственному принтеру потребуется определенная плотность пикселей в изображении (PPI), чтобы иметь возможность отображать отпечаток, который выглядит хорошо (т. е. с плавными переходами цветов, чтобы вы не могли видеть каждый отдельный пиксель). ).

Типичные значения PPI для печати находятся в диапазоне от 150 до 300 PPI, хотя для некоторых элитных журналов могут потребоваться изображения с разрешением 1200 PPI.

Так, например, если вы хотите напечатать изображение размером 4 x 6 дюймов с разрешением 300 PPI, вам потребуется файл с разрешением не менее 4 x 300 (1200) пикселей по короткой стороне и 6 x 300 (1800) пикселей по длинная сторона. Другими словами, он должен быть размером не менее 1200 x 1800 пикселей.

Чтобы напечатать изображение размером 8 x 10 дюймов с разрешением 300 пикселей на дюйм, используйте ту же математику:

Умножьте ширину и высоту напечатанного изображения в дюймах на 300 пикселей. В результате получается 2400 x 3000 пикселей, то есть разрешение изображения, необходимое для печати изображения 8 x 10 с плотностью 300 пикселей на дюйм.

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

Ниже приведен снимок экрана с веб-сайта MpixPro.com, показывающий их оптимальный и минимальный размеры изображения для стандартных размеров печати. Их принтер печатает с разрешением 250 PPI (но может обрабатывать изображения с разрешением 100 PPI), хотя другие службы могут отличаться, поэтому всегда проверяйте перед подготовкой изображений.

Используйте функцию обрезки или изменения размера в своем программном обеспечении, чтобы изменить размер изображения до нужной ширины и высоты и желаемого разрешения PPI.

Здесь изображение, обрезанное до размера 3000 x 2400 пикселей, корректируется с 72 PPI до 300 PPI при подготовке к печати с разрешением 300 PPI. Передискретизация не требуется, так как изображение уже имеет правильные размеры и требуется только настройка разрешения.

Photoshop, как и другие приложения, также обрезает изображение до фиксированного размера и разрешения, если вы введете нужные значения на панели параметров, когда выбран инструмент кадрирования (см. ниже). Если ваше изображение меньше введенных размеров, оно будет увеличено с использованием метода передискретизации по умолчанию. Хотя обычно не рекомендуется увеличивать изображения, при условии, что изображение уже близко к желаемому размеру, его небольшое увеличение, как правило, не приведет к заметной потере качества.

Размер экрана

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

Это связано с тем, что плотность пикселей на экране намного меньше, чем требуется для печати. Например, типичный монитор имеет размер 1920 x 1080 пикселей; чтобы заполнить монитор, вам нужно только изображение размером 1920 x 1080 пикселей. Это примерно тот же размер изображения, который вам нужен для печати 4 x 6 с разрешением 300 пикселей на дюйм, но изображение с разрешением 1920 x 1080 пикселей отлично отображается на 23-дюймовом мониторе.

Адаптивные изображения — Изучите веб-разработку

• Предыдущий
• Обзор: мультимедиа и встраивание
• Следующий

В этой статье мы узнаем о концепции адаптивных изображений — изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешениями и другими подобными функциями — и посмотрим, какие инструменты HTML предоставляет для их реализации. Это помогает повысить производительность на разных устройствах. Адаптивные изображения — это лишь часть адаптивного дизайна, будущая тема CSS, которую вы должны изучить.

Рассмотрим типичный сценарий. Типичный веб-сайт может содержать изображение заголовка и некоторые изображения содержимого под заголовком. Изображение заголовка, скорее всего, будет охватывать всю ширину заголовка, а изображение содержимого будет располагаться где-то внутри столбца содержимого. Вот простой пример:

Это хорошо работает на устройствах с широким экраном, таких как ноутбук или настольный компьютер (вы можете увидеть пример вживую и найти исходный код на GitHub). В этом уроке мы не будем подробно обсуждать CSS, скажем только следующее:

• Содержимое тела было установлено на максимальную ширину 1200 пикселей — в окнах просмотра выше этой ширины тело остается на 1200 пикселей и центрируется в доступном пространстве. В окнах просмотра ниже этой ширины тело останется равным 100% ширины окна просмотра.
• Изображение заголовка настроено таким образом, что его центр всегда остается в центре заголовка, независимо от ширины заголовка. Если сайт просматривается на более узком экране, важная деталь в центре изображения (люди) все еще видна, а лишнее теряется по обеим сторонам. Его высота 200 пикселей.
• Изображения содержимого настроены таким образом, что если элемент body становится меньше изображения, изображения начинают сжиматься, чтобы они всегда оставались внутри тела, а не выходили за его пределы.

Однако проблемы возникают, когда вы начинаете просматривать сайт на устройстве с узким экраном. Заголовок ниже выглядит нормально, но он начинает занимать большую часть высоты экрана мобильного устройства. И при таком размере трудно увидеть лица двух людей на первом изображении контента.

Улучшением будет отображение обрезанной версии изображения, которая отображает важные детали изображения при просмотре сайта на узком экране. Второе обрезанное изображение может отображаться на устройстве с экраном средней ширины, например на планшете. Общая проблема, связанная с тем, что вы хотите таким образом обслуживать различные обрезанные изображения для различных макетов, широко известна как проблема художественного направления .

Кроме того, нет необходимости вставлять такие большие изображения на страницу, если она просматривается на экране мобильного устройства. И наоборот, маленькое растровое изображение начинает выглядеть зернистым, когда отображается больше, чем его первоначальный размер (растровое изображение имеет заданное количество пикселей в ширину и заданное количество пикселей в высоту, как мы видели, когда смотрели на векторную графику). Это называется проблема переключения разрешения .

И наоборот, нет необходимости отображать большое изображение на экране, значительно меньшем, чем размер, для которого он был предназначен. Это может привести к потере пропускной способности; в частности, мобильные пользователи не хотят тратить пропускную способность, загружая большое изображение, предназначенное для пользователей настольных компьютеров, когда маленькое изображение может сделать для своего устройства. В идеале, веб-сайту пользователя должно быть доступно несколько разрешений. браузер. Затем браузер может определить оптимальное разрешение для загрузки в зависимости от размера экрана. устройства пользователя.

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

Вы можете подумать, что векторные изображения решат эти проблемы, и в какой-то степени они это делают — они имеют небольшой размер файла и хорошо масштабируются, и вы должны использовать их везде, где это возможно. Однако они подходят не для всех типов изображений. Векторные изображения отлично подходят для простой графики, шаблонов, элементов интерфейса и т. д., но становится очень сложно создать векторное изображение с такой детализацией, которую вы найдете, скажем, на фотографии. Форматы растровых изображений, такие как JPEG, больше подходят для изображений, которые мы видим в приведенном выше примере.

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

Примечание: Новые функции, обсуждаемые в этой статье — srcset / размеры / — поддерживаются в современных настольных и мобильных браузерах (включая браузер Microsoft Edge, но не Internet Explorer).

В этом разделе мы рассмотрим две проблемы, проиллюстрированные выше, и покажем, как их решить с помощью функций адаптивного изображения HTML. Обратите внимание, что мы сосредоточимся на элемента для этого раздела, как видно из области контента в примере выше — изображение в шапке сайта предназначено только для украшения и поэтому реализовано с использованием фоновых изображений CSS. У CSS, возможно, есть лучшие инструменты для адаптивного дизайна, чем у HTML, и мы поговорим о них в следующем модуле CSS.

Переключение разрешения: разные размеры

Итак, какую проблему мы хотим решить с помощью переключения разрешения? Мы хотим отображать идентичный контент изображения, только большего или меньшего размера в зависимости от устройства — это ситуация, которая у нас есть со вторым изображением контента в нашем примере. Стандарт 9Элемент 0161 традиционно позволяет указать браузеру только один исходный файл:

Однако мы можем использовать два атрибута — srcset и размеры — чтобы предоставить несколько дополнительных исходных изображений вместе с подсказками, которые помогут браузеру выбрать правильное. Вы можете увидеть пример этого в нашем примере responsive.html на GitHub (см. также исходный код):

Атрибуты srcset и Sizes выглядят сложными, но их несложно понять, если отформатировать их, как показано выше, с разными частями значения атрибута в каждой строке. Каждое значение содержит список, разделенный запятыми, и каждая часть этих списков состоит из трех частей. Давайте пробежимся по содержимому каждого из них:

srcset определяет набор изображений, из которых браузер может выбирать, и размер каждого изображения. Каждый набор информации об изображении отделяется от предыдущего запятой. Для каждого пишем:

1. Имя файла изображения ( elva-fairy-480w.jpg )
2. Пространство
3. Внутренняя ширина изображения в пикселях ( 480w ) — обратите внимание, что здесь используется единица измерения w , а не пикселей , как вы могли ожидать. Внутренний размер изображения — это его реальный размер, который можно узнать, просмотрев файл изображения на вашем компьютере (например, на Mac вы можете выбрать изображение в Finder и нажать Команда + я чтобы открыть информационный экран).

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

1. A media condition ( (max-width:600px) ) — вы узнаете больше об этом в теме CSS, а пока просто скажем, что состояние мультимедиа описывает возможное состояние, в котором может находиться экран. В этом случае мы говорим «когда ширина области просмотра составляет 600 пикселей или меньше».
2. Пространство
3. ширина слота изображение будет заполнено, когда условие мультимедиа истинно ( 480px )

Примечание: Для ширины слота вместо абсолютной ширины (например, 480px ) можно указать ширину относительно области просмотра (например, 50vw ) — но не в процентах. Возможно, вы заметили, что ширина последнего слота не имеет условия носителя (это значение по умолчанию, которое выбирается, когда ни одно из условий носителя не выполняется). Браузер игнорирует все после первого условия совпадения, поэтому будьте осторожны с порядком условий мультимедиа.

Итак, с этими атрибутами браузер будет:

1. Смотреть на ширину своего устройства.
2. Выясните, какое условие носителя в списке размеров является первым верным.
3. Посмотрите на размер слота, указанный для этого медиа-запроса.
4. Загрузите изображение, указанное в списке srcset , которое имеет тот же размер, что и слот, или, если его нет, первое изображение, размер которого превышает выбранный размер слота.

И все! На этом этапе, если поддерживающий браузер с шириной области просмотра 480 пикселей загружает страницу, (max-width: 600px) условие мультимедиа будет истинным, поэтому браузер выбирает слот 480px . elva-fairy-480w.jpg будет загружен, так как его собственная ширина ( 480w ) ближе всего к размеру слота. Изображение размером 800 пикселей занимает на диске 128 КБ, а версия с разрешением 480 пикселей — всего 63 КБ, что позволяет сэкономить 65 КБ. А теперь представьте, если бы это была страница, на которой было бы много картинок. Использование этой техники может значительно сэкономить мобильным пользователям полосу пропускания.

Примечание: При тестировании с настольным браузером, если браузер не может загрузить более узкие изображения, когда у вас установлена ​​самая узкая ширина окна, посмотрите, что такое окно просмотра (вы можете примерно заходим в консоль JavaScript браузера и вводим document.querySelector('html').clientWidth ). У разных браузеров есть минимальные размеры, до которых они позволяют уменьшить ширину окна, и они могут быть шире, чем вы думаете. При тестировании с помощью мобильного браузера вы можете использовать такие инструменты, как страница Firefox about:debugging , чтобы проверить страницу, загруженную на мобильный телефон, с помощью инструментов разработчика для настольных компьютеров.

Чтобы увидеть, какие изображения были загружены, вы можете использовать вкладку «Сетевой монитор» Firefox DevTools.

Старые браузеры, не поддерживающие эти функции, просто игнорируют их. Вместо этого эти браузеры загрузят изображение, указанное в src атрибут как обычно.

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

Переключение разрешения: одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение на экране с одним и тем же реальным размером, вы можете разрешить браузеру выбирать изображение с подходящим разрешением, используя srcset с x-дескрипторами и без размеры — несколько проще синтаксис! Вы можете найти пример того, как это выглядит в srcset-resolutions. html (см. также исходный код):

В этом примере к изображению применяется следующий CSS, чтобы оно имело ширину 320 пикселей на экране (также называемую пикселями CSS):

 изображение {
  ширина: 320 пикселей;
}
 

В этом случае размеров не нужен — браузер определяет, какое разрешение имеет дисплей, на котором он отображается, и выдает наиболее подходящее изображение, указанное в srcset . Таким образом, если устройство, обращающееся к странице, имеет дисплей со стандартным/низким разрешением, где один пиксель устройства представляет каждый пиксель CSS, elva-fairy-320w.jpg Будет загружено изображение (подразумевается 1x, поэтому включать его не нужно). -fairy-640w.jpg Будет загружено изображения. Размер изображения 640 пикселей составляет 93 КБ, а размер изображения 320 пикселей — всего 39 КБ.

Художественное направление

Напомним, что проблема художественного направления связана с желанием изменить отображаемое изображение, чтобы оно соответствовало различным размерам отображаемого изображения. Например, веб-страница содержит большой пейзажный снимок с человеком в центре при просмотре в браузере настольного компьютера. При просмотре в мобильном браузере это же изображение уменьшается, в результате чего человек на изображении становится очень маленьким и его трудно увидеть. Вероятно, было бы лучше показать портретное изображение меньшего размера на мобильном телефоне, которое увеличивает изображение человека. 9Элемент 0161 позволяет реализовать именно такое решение.

Возвращаясь к нашему исходному примеру not-responsive.html, у нас есть изображение, которое крайне нуждается в художественном оформлении:

Давайте исправим это с помощью ! Подобно и , элемент представляет собой оболочку, содержащую несколько элементов, предоставляющих различные источники для выбора браузером, за которыми следует самый важный элемент . Код в responsive.html выглядит так:

• Элементы включают атрибут media , который содержит условие мультимедиа — как и в первом примере srcset , эти условия являются тестами, которые определяют, какое изображение будет показано — первое, которое возвращает true, будет отображаться . В этом случае, если ширина области просмотра составляет 799 пикселей или меньше, будет отображаться изображение первого элемента . Если ширина области просмотра составляет 800 пикселей или больше, это будет вторая.
• Атрибуты srcset содержат путь к отображаемому изображению. Так же, как мы видели с выше, может принимать атрибут srcset с несколькими ссылками на изображения, а также атрибут размеров . Таким образом, вы можете предлагать несколько изображений с помощью элемента , а также предлагать несколько разрешений каждого из них. На самом деле, вы, вероятно, не захотите делать такие вещи очень часто.
• Во всех случаях необходимо указать элемент с src и alt непосредственно перед , иначе изображения не появятся. Это обеспечивает случай по умолчанию, который будет применяться, когда ни одно из условий мультимедиа не возвращает значение true (вы можете фактически удалить второй элемент в этом примере), и запасной вариант для браузеров, которые не поддерживают . элемент.

Этот код позволяет отображать подходящее изображение как на широкоэкранных, так и на узких экранах, как показано ниже:

Примечание: Атрибут media следует использовать только в сценариях художественного оформления; когда вы используете носитель , не предлагайте также условия носителя в атрибуте размеры .

Почему мы не можем сделать это с помощью CSS или JavaScript?

Когда браузер начинает загружать страницу, он начинает загружать (предварительно загружать) любые изображения до того, как основной парсер начнет загрузку и интерпретацию CSS и JavaScript страницы. Этот механизм полезен в целом для сокращения времени загрузки страницы, но бесполезен для адаптивных изображений — отсюда и необходимость реализации таких решений, как 9.0161 источник . Например, вы не можете загрузить элемент , затем определить ширину области просмотра с помощью JavaScript, а затем при желании динамически изменить исходное изображение на меньшее. К тому времени исходное изображение уже будет загружено, и вы также загрузите маленькое изображение, что еще хуже с точки зрения адаптивного изображения.

Смело используйте современные форматы изображений

Новые форматы изображений, такие как WebP и AVIF, могут поддерживать небольшой размер файла и одновременно высокое качество. Эти форматы теперь имеют относительно широкую поддержку браузеров, но небольшую «историческую глубину».

позволяет нам продолжать работать со старыми браузерами. Вы можете указать типы MIME внутри атрибутов type , чтобы браузер мог немедленно отклонить неподдерживаемые типы файлов:

 
  
  
  <изображение
    источник = "пирамида.png"
    alt="правильная пирамида, построенная из четырех равносторонних треугольников" />

 

• До , а не , используйте атрибут media , если только вам не требуется художественное оформление.
• В элементе можно ссылаться только на изображения типа, объявленного в типа .
• При необходимости используйте списки, разделенные запятыми, с srcset и размерами .

Для этого активного обучения мы ожидаем, что вы будете смелыми и будете делать это в основном в одиночку. Мы хотим, чтобы вы реализовали свой собственный подходящий арт-направленный узкий экран / широкий скриншот, используя и пример переключения разрешения, в котором используется srcset .

1. Напишите простой HTML-код, который будет содержать ваш код (используйте not-responsive.html в качестве отправной точки, если хотите).
2. Найдите красивое широкоэкранное пейзажное изображение с какой-нибудь деталью, содержащейся где-нибудь. Создайте его веб-версию с помощью графического редактора, затем обрежьте его, чтобы показать меньшую часть, которая увеличивает детали, и создайте второе изображение (для этого подойдет ширина около 480 пикселей).
3. Используйте элемент для реализации переключателя изображений в художественном направлении!
4. Создайте несколько файлов изображений разного размера, каждый из которых содержит одно и то же изображение.
5. Используйте srcset / размер , чтобы создать пример переключателя разрешения, либо для показа изображения одного размера при разных разрешениях, либо для изображения разных размеров при разной ширине области просмотра.

Вот и все для адаптивных изображений — надеемся, вам понравилось играть с этими новыми методами. Напомню, что мы здесь обсуждали две отдельные проблемы:

• Художественное направление : Проблема, из-за которой вы хотите использовать обрезанные изображения для разных макетов — например, альбомное изображение, показывающее полную сцену для макета для настольного компьютера, и портретное изображение, показывающее увеличенный основной объект для мобильного макета. Вы можете решить эту проблему с помощью элемента .
• Переключение разрешения : Проблема, связанная с тем, что вы хотите передавать файлы изображений меньшего размера на устройства с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также отображать изображения с различным разрешением на экранах с высокой/низкой плотностью. Вы можете решить эту проблему, используя векторную графику (изображения SVG) и srcset с размерами атрибутов.

На этом весь модуль мультимедиа и встраивания заканчивается! Единственное, что нужно сделать сейчас, прежде чем двигаться дальше, — это попробовать нашу оценку мультимедиа и встраивания и посмотреть, как у вас идут дела. Веселиться!

• Отличное введение Джейсона Григсби в адаптивные изображения
• Адаптивные изображения: если вы просто меняете разрешение, используйте srcset — содержит дополнительные объяснения того, как браузер определяет, какое изображение использовать
• <картинка>
• <источник>

• Предыдущий
• Обзор: мультимедиа и встраивание
• Следующий

• Изображения в HTML
• Видео- и аудиоконтент
• От