какое изображение масштабируется без потери качества
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной?
Растровая графика
Растровое изображение, как мозаика, складывается из множества маленьких ячеек — пикселей, где каждый пиксель содержит информацию о цвете. Определить растровое изображение можно увеличив его масштаб: на определённом этапе станет заметно множество маленьких квадратов — это и есть пиксели.
Наиболее распространённые растровые форматы: JPEG, PNG.
Растровое изображение и его увеличенный фрагмент
Применение
Растровая графика удобна для создания качественных фотореалистичных изображений, цифровых рисунков и фотографий. Самый популярный редактор растровой графики — Adobe Photoshop.
Пример использования растровой графики: цифровой рисунок (автор изображения: Катя Климович)
Пример использования растровой графики: фотография
Преимущества
Недостатки
Векторная графика
В отличие от растровых, векторные изображения состоят уже не из пикселей, а из множества опорных точек и соединяющих их кривых. Векторное изображение описывается математическими формулами и, соответственно, не требует наличия информации о каждом пикселе. Сколько ни увеличивай масштаб векторного изображения, вы никогда не увидите пикселей.
Самые популярные векторные форматы: SVG, AI.
Векторное изображение и его увеличенный фрагмент
Применение
Векторная графика используется для иллюстраций, иконок, логотипов и технических чертежей, но сложна для воспроизведения фотореалистичных изображений. Самый популярный редактор векторной графики — Adobe Illustrator.
Преимущества
Недостатки
Мы приходим к выводу, что не существует «серебряной пули»: и растровая, и векторная графика имеют свои достоинства и недостатки, соответственно, стоит выбирать формат, который подходит для решения поставленных перед вами задач.
Подробнее про форматы можно посмотреть в статье «Форматы изображений».
Целая глава о графике
Нажатие на кнопку — согласие на обработку персональных данных
Технология Google повышает разрешение изображений до 16 раз без потери качества
В июле исследователи Google из команды Brain Team поделились своими достижениями в области масштабирования изображений. Результаты своих исследований они опубликовали в блоге Google AI, посвящённом исследованиям и разработкам в области машинного обучения и искусственного интеллекта.
В статье под названием «Создание высокоточных изображений с использованием диффузионных моделей» (High Fidelity Image Generation Using Diffusion Models) продемонстрирована технология масштабирования изображений на базе диффузионных моделей.
Говоря простыми словами, Image Super-Resolution — это технология «умного» увеличения изображений. Она заключается в обучении модели превращать изображение с низким разрешением в изображение с высоким разрешением (технология RAISR была описана в блоге Google AI в 2016 году).
Если быть точным, в свежей публикации описан подход, основанный на комбинации двух алгоритмов — SR3 и CDM. Он позволяет создавать изображения высокого разрешения без заметной потери качества.
Super-Resolution via Repeated Refinements
Обученная на огромном массиве данных, модель SR3 показывает хорошие результаты в задачах масштабирования в 4-8 раз изображений лиц и изображений объектов живой природы: 64×64 → 256×256 (в 4 раза) и 256×256 → 1024×1024 (в 4 раза). Объединив модели в каскад, можно масштабировать изображения до 16 раз: 64×64 → 1024×1024.
Как оценить качество работы SR3? Результаты работы модели сравнивают с результатами работы других моделей. Участвующих в эксперименте людей просят выбрать изображение, которое, по их мнению, сделано на фотокамеру (так ставится вопрос).
Участники выбирают между изображением, которое создала модель, и оригинальным изображением с камеры.
Результаты масштабирования трёх алгоритмов (Bicubic, Regression, SR3): сверху — изображения с лицом (64×64 → 512×512), снизу — изображения животного (64×64 → 256×256). Оригинальное изображение в правом столбце.
Эффективность модели измеряется с помощью коэффициента путаницы (confusion rate): какой процент времени участники эксперимента выбирают результат работы модели, а не эталонное изображения (а идеальный алгоритм как раз и даёт «50-процентный коэффициент путаницы»).
Результаты этого исследования показаны ниже:
Сверху: коэффициент путаницы в задаче с изображениями лиц (16×16 → 128×128). Снизу: коэффициент путаницы в гораздо более сложной задаче — с изображениями объектов живой природы (64×64 → 256×256)
Cascaded Diffusion Models
CDM обучена на огромном количестве изображений из базы ImageNet, которые представляют собой достаточно сложный набор данных. Именно по этой причине CDM построена как каскад нескольких моделей.
Каскадный подход представляет собой цепочку нескольких генеративных моделей, каждая из которых создаёт изображение с разным разрешением: одна диффузионная модель генерирует изображение с низким разрешением, которое обрабатывает SR3, постепенно повышая разрешение до максимально доступного.
Масштабирование изображения с 32×32 до 256×256
О реальном внедрении или коммерческом применении информации пока что нет.
Изображения, созданные из изображений низкого разрешения
Растровая и векторная графика: это как?
Есть два вида картинок: в одной миллионы цветов и полный фотореализм; вторую можно увеличивать и уменьшать до бесконечности без потери качества. Вот как это всё работает.
👉 Как и большинство статей в журнале «Код», эта статья для начинающих. Юные Артемии, вам не сюда. Лучше порешайте наши задачки в паблике.
Растровая графика
Растр — это множество мелких точек, из которых может состоять изображение. В случае с компьютером растр — это пиксели, из которых состоит фотография.
Например, когда вы фотографируете на смартфон или цифровой фотоаппарат, вы получаете растровое изображение, которое состоит из множества отдельных точек. Если смотреть на экране телефона или компьютера, они не видны, но если сильно увеличить, то эти точки станут заметны.
Чем сильнее увеличим фотографию, тем больше видны пиксели
👉 У растровой графики есть два главных параметра: размер изображения и глубина цвета.
Размер изображения — это количество пикселей по горизонтали и вертикали. Чем больше размер, тем сильнее можно увеличивать картинку без потери качества. Например, возьмём одну и ту же фотографию, но у одной будет размер 100 на 200 пикселей, а у другой — 1000 на 2000 пикселей:
В одном и том же масштабе вторая картинка смотрится гораздо лучше, потому что в ней больше пикселей, которые передают больше деталей
Общее правило такое: чем больше пикселей на фотографии, тем больше мелких деталей можно на ней разглядеть. Именно поэтому производители камер и смартфонов постоянно увеличивают количество пикселей у себя в устройствах.
Глубина цвета. Представьте, что ваша камера в телефоне может различать только 16 цветов. В этом случае фотографии получались бы такими:
В целом понятно, что тут изображено, но выглядит странно
Это и есть глубина цвета — сколько разных оттенков присутствует на изображении. В нашем примере 16 цветов — это 4 бита, потому что 2 в 4 степени = 16. Сравните, как выглядит та же фотография с глубиной цвета 16 и 8 бит:
Чем больше глубина цвета, тем плавнее цветовые переходы на фото
Главное применение растровой графики — фотографии и изображения с большой глубиной цвета и множеством деталей. Фотографии — это растр. Рисунки от руки — чаще всего растр. Если на изображении природа, люди, водичка или что угодно со множеством деталей, скорее всего, такое изображение будет растровым.
Компьютеры классно справляются с растровыми изображениями, потому что растр довольно прост в обработке. Компьютер ставит подряд нужное количество пикселей и красит их в нужные цвета. Операция простая, математика минимальная, просто нужно повторить её много раз. Компьютеры в этом сильны.
Векторная графика
В отличие от растровой графики, векторная состоит не из пикселей, а из математических формул. В такой графике каждое изображение нарисовано с помощью отдельных элементов:
Чтобы это нарисовать, у каждого элемента есть свои параметры, например:
Если компьютеру нужно нарисовать звёздное небо, мы можем дать ему такие команды:
В итоге получим такой рисунок:
Избражение: wallpapersafari.com
Так как мы не привязаны к размеру изображения, то по этим формулам компьютер может нам отрисовать звёздное небо любого размера — от обоев на телефон до рекламного билборда 4 на 6 метров. При этом при увеличении потери качества не происходит — компьютер просто получает от нас финальный размер изображения и рисует всё в нужных пропорциях.
👉 Сила векторной графики — в возможности бесконечно увеличивать и уменьшать размер изображения без потери качества. При изменении размера компьютер сразу пересчитывает все формулы и отрисовывает картинку заново. Поэтому при увеличении векторной графики не появляются пиксели и размытие, даже если нам нужно увеличить одну звезду в 100 раз:
Минус векторной графики в том, что в ней очень сложно создать фотореалистичное изображение. Дело в том, что каждая деталь, каждый новый цвет и каждый цветовой переход — это новая формула. Чтобы построить фотореалистичную картинку, нужно очень много формул, которые будут сложно обсчитываться, и всё равно по деталям можно понять, что перед нами не фотография:
Каждый элемент на этой картинке задаётся своей формулой. Здесь много деталей, но всё равно видно, что это не фотография, а векторная иллюстрация
То же самое изображение в кривых
Векторная графика чаще всего применяется там, где не нужна фотореалистичность — иконки, пиктограммы, рекламные материалы. Главная задача такого изображения — чтобы его можно было увеличить или уменьшить как угодно без потери качества.
‘ src=’https://thecode.media/wp-content/uploads/2021/01/image9.png’ alt=’Векторная графика’> Иконки — Сергей Чикин
Что дальше
Будем осваивать векторную графику в CSS. Заодно потренируемся наводить красоту на страницах и попрактикуемся в коде.
Сервисы для увеличения разрешения изображений с помощью нейросетей
Содержание
Содержание
Помните, в разных фильмах полицейские часто делали из размытой фотографии преступника или номерного знака сверхчеткое изображение? Сейчас это вполне обыденное явление — компьютерные системы научились увеличивать разрешение любой картинки. Эти системы уже применяются в мониторах и телевизорах, когда необходимо поднять разрешение с FullHD до 4К. Здесь же описывается несколько сервисов, с помощью которых можно бесплатно увеличить разрешение любой картинки.
Нейросети в апскейлинге
Прежде всего, следует рассказать про upscaling. Так называют процесс повышения разрешения и качества цифрового фото и видео. Процесс подразумевает дорисовку недостающих пикселей, но как именно — зависит от каждого конкретного алгоритма.
Классические методы апскейлинга позволяют только увеличить разрешение, заполняя недостающие пиксели. Нейросети в свою очередь имеют одно важное достоинство — они способны дополнить изображение новой информацией, поэтому помимо увеличения разрешения можно добиться и лучшего качества. ИИ обучается на базе из миллионов снимков, поэтому способен самостоятельно дорисовывать необходимые элементы в зависимости от контекста.
Эффективность работы нейросети зависит от того объема данных, с которыми ей удалось поработать. Чем больше база фотографий, тем выше шанс, что алгоритмы выберут подходящие пиксели, повысив четкость картинки.
В сети доступны несколько сервисов, с помощью которых вы можете повысить разрешение какой-либо картинки. Мы проведем тестирование наиболее популярных. В качестве образца будут взяты два изображения разрешением 300х400 пикселей — фотография городского пейзажа и картинка с минимальным количеством цветовых переходов.
AI Image Enlarger
Сервис работает на базе фирменного AI и позволяет сделать увеличение вплоть до 8х, при этом, не устанавливая никакого стороннего ПО. Базовый бесплатный тариф предлагает возможность загружать изображения объемом до 5 МБ и разрешением до 1200х1200 пикселей. Также имеется ограничение на количество обработок в день. На бесплатном тарифе доступно максимум четырехкратное увеличение.
Платные пакеты «Премиум» и «Предприятие» стоят 9 и 19 долларов за месяц и позволяют увеличить коэффициент масштабирования до 8Х, а также объем загружаемых файлов до 10 МБ.
В первом преобразовании нейросеть показывает отличный результат.
Здания не только получили четкие очертания — дорисовка была выполнена максимально корректно, поэтому даже при увеличении заметить какие-то дефекты сложно. AI Image Enlarger прекрасно справился с апскейлингом не только растительности на переднем плане, но и корректно воспроизвел задний план.
Отличный результат был получен и с картинкой — четкие контуры и минимальный объем помех.
AI Image Enlarger можно назвать одним из лучших сервисов для увеличения разрешения картинок. Если вам необходимо делать апскейлинг большого числа фото, то стоит подумать о платной подписке.
BigJPG
Этот сервис использует глубокие сверточные нейронные сети. В базовой версии пользователям доступны до 500 преобразований, а максимальное разрешение фото составляет 3000×3000 px. Как и в предыдущем сервисе, вам бесплатно доступны коэффициенты только 2х и 4х, а при платном усовершенствовании аккаунта вы получаете 8х и 16х. Также доступны приложения для Windows, MacOS, iOS и Android.
После обработки первой фотографии с коэффициентом 4х получаем изображение 1600х1200 пикселей:
Общая четкость картинки была повышена, здания получили видимые контуры. Однако при увеличении можно заметить, что отрисовка некоторых многоэтажных домов имеет низкое качество и «помехи» на фоне. В дополнение появилось легкое «замыление».
Апскейлинг картинки выполнен более удачно, однако алгоритм превратил небольшие группы пикселей у контуров разных цветовых участков в сильные шумы, которые можно разглядеть при достаточном увеличении. С использованием коэффициента 2х эти недостатки будут практически незаметны.
Учитывая количество бесплатных попыток, а также функцию фильтрации шума — BigJPG можно назвать одним из лучших сайтов для апскейлинга фото.
Deep-image
Воспользоваться сервисом бесплатно можно только после регистрации аккаунта — размер фото ограничивается 25 мегапикселями. Доступны коэффициенты 2х, 3х и 4х. Авторы утверждают, что апскейлинг работает на базе генеративных состязательных сетей. Главный минус — бесплатный аккаунт имеет ограничение в пять преобразований. Если вам нужно увеличить разрешение большего числа фотографий, то придется покупать подписку.
Апскейлинг фотографии через Deep Image показывает отличную детализацию. Все объекты имеют четкие контуры и насыщенные цвета. Однако главная проблема — ИИ неправильно дорисовал некоторые здания, из-за чего они приобрели неестественную форму. Фото хоть и имеет высокую четкость, но визуально выглядит как картина масляными красками.
С картинкой сервис справился более чем отлично. Алгоритм полностью сохранил контуры, увеличив разрешение картинки без искажений и посторонних шумов. Однако алгоритм затронул одноцветный фон, что в итоге привело к небольшим перпендикулярным линиям.
Deep-image предлагает мощный алгоритм, который способен проявить себя при апскейлинге фотографий разрешением от 1000х1000 пикселей. В этом случае нейросеть с большей вероятностью правильно дополнит объекты. Сервис также отлично справляется с изображениями, которые имеют небольшие монотонные цветовые участки.
Imageupscaler
За процесс апскейлинга отвечает AI с глубоким обучением и генеративные состязательные сети. Несмотря на максимальный коэффициент в 4х и лимит на 5 МБ, сайт предлагает бесплатно преобразовать до 10 изображений в месяц. Всего за три доллара этот порог увеличится до 100 фото, а за 12 долларов вы получите возможность ежемесячно обрабатывать по 500 фотографий.
Тест на городском пейзаже показывает, что нейросеть не лучшим образом выполняет преобразование.
Уже на ближнем фоне можно заметить сильные размытости, а большая часть построек потеряла свои очертания. Дефекты работы нейросети можно заметить даже без увеличения масштаба.
Обработка второй картинки выполнена хоть и лучше, но количество шумов слишком большое. При незначительном увеличении также можно увидеть размытые контуры.
Нейросеть сервиса Imageupscaler явно уступает своим конкурентам, поэтому этот сайт не подойдет для очень маленьких изображений, поскольку при их апскейлинге искажения будут слишком заметны. С другой стороны пользователям доступны лимит в 10 картинок и очень демократичные цены.
Upscalepics
Этот бесплатный веб-сервис позволяет не только увеличить разрешение изображения, но и убрать посторонние шумы с картинки. Регистрация не требуется — а бесплатно можно выбрать коэффициент увеличения до 7х. Сайт может похвастаться максимально простым интерфейсом и достаточно быстрой обработкой изображения.
Апскейлинг городского пейзажа с коэффициентом 4х дает следующий результат:
Несмотря на четкость контуров и неплохую детализацию, очертания зданий получились слишком «масляными», из-за чего изображение перестает восприниматься как фотография. Несмотря на это, Upscalepics достаточно хорошо проработал задний план.
Для апскейлинг рисунков и баннеров сервис Upscalepics подходит практически идеально. С функцией удаления шума итоговое изображение получается практически без каких-либо дефектов.
Upscalepics не лучшим образом справляется с реальными фото, но с учетом бесплатных возможностей его можно определенно занести в пятерку лучших.
Сравнительная таблица
Мы рассмотрели пять наиболее популярных сайтов, где вы можете бесплатно увеличить разрешение картинки буквально за пару минут. Каждый сервис работает на основе собственного AI, поэтому результаты могут отличаться в зависимости от изображения.
Для вашего удобства, мы свели параметры каждого сайта в единую таблицу:
Название | Необходимость регистрации | Максимальный коэффициент увеличения (бесплатно/платно) | Ограничения по картинке | Бесплатных преобразований | Устранение шума |
AI Image Enlarger | Да | 4х/8х | 5 МБ, 1200х1200 px | 8 | Нет |
BigJPG | Нет | 4х/16х | 10 МБ, 3000x3000px | 500 в месяц | Да |
Deep-image | Да | 4x/4x | 5000×5000 px | 5 | Да |
Imageupscaler | Нет | 4x/4x | 5 МБ, 1000х1000 px | 10 в месяц | Нет |
Upscalepics | Нет | 7х/8х | не более 100 мегапикселей | — | Да |
Лучше всего в тестах себя проявили AI Image Enlarger и Deep-image — им удалось справиться не только с картинкой, но и фотографией. Среднее качество апскейлинга для выбранных тестов показали Imageupscaler и BigJPG. У сервиса Upscalepics на фотографии получился наихудший результат, но он способен справиться с компьютерной графикой не хуже остальных.