Научная статья на тему 'Методы анализа изображений для поддержки создания веб-сайтов с динамически меняющимся оформлением'

Методы анализа изображений для поддержки создания веб-сайтов с динамически меняющимся оформлением Текст научной статьи по специальности «Компьютерные и информационные науки»

CC BY
446
125
i Надоели баннеры? Вы всегда можете отключить рекламу.
Ключевые слова
КВАНТИЗАЦИЯ ЦВЕТОВ / COLOR QUANTIZATION / ПАЛИТРА ИЗОБРАЖЕНИЯ / COLOR PALETTE OF IMAGE / ПОИСК ИЗОБРАЖЕНИЯ ПО ПАЛИТРЕ / КАРТА САЛИЕНТНОСТИ / ВЕБ-ДИЗАЙН / WEB DESIGN / SEARCHING FOR IMAGES ON COLOR PALETTES / SALIENCY MAP

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Ахмадеева Ирина Равильевна, Загорулько Юрий Алексеевич, Серый Алексей Сергеевич, Шестаков Владимир Константинович

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

i Надоели баннеры? Вы всегда можете отключить рекламу.

Похожие темы научных работ по компьютерным и информационным наукам , автор научной работы — Ахмадеева Ирина Равильевна, Загорулько Юрий Алексеевич, Серый Алексей Сергеевич, Шестаков Владимир Константинович

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.

METHODS OF AUTOMATIC ANALYSIS OF IMAGE FOR SUPPORTING DEVELOPMENT OF WEB SITES WITH DYNAMIC DESIGN

This paper proposes methods for automatic constructing color palettes of images, searching for images on color palettes as well as detecting region of image which does not contain important information and can be used for placing other design elements. Various approaches to implementation of these methods are considered. The results of an experimental investigation of possibility of application the suggested methods for Web design are presented.

Текст научной работы на тему «Методы анализа изображений для поддержки создания веб-сайтов с динамически меняющимся оформлением»

УДК 004.932.2

И. Р. Ахмадеева, Ю. А. Загорулько, А. С. Серый, В. К. Шестаков

Новосибирский государственный университет ул. Пирогова, 2, Новосибирск, 630090, Россия

Институт систем информатики им. А. П. Ершова СО РАН пр. Акад. Лаврентьева, 6, Новосибирск, 630090, Россия

ah.irishka@gmail.com, zagor@iis.nsk.su Alexey.Seryj@iis.nsk.su, shestakov@iis.nsk.su

МЕТОДЫ АНАЛИЗА ИЗОБРАЖЕНИЙ ДЛЯ ПОДДЕРЖКИ СОЗДАНИЯ ВЕБ-САЙТОВ С ДИНАМИЧЕСКИ МЕНЯЮЩИМСЯ ОФОРМЛЕНИЕМ *

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

Ключевые слова: квантизация цветов, палитра изображения, поиск изображения по палитре, карта салиентно-сти, веб-дизайн.

Введение

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

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

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

* Работа выполнена в Новосибирском государственном университете при финансовой поддержке Министерства образования и науки Российской Федерации (договор № 02.G25.31.0054).

Ахмадеева И. Р., Загорулько Ю. А., Серый А. С., Шестаков В. К. Методы анализа изображений для поддержки создания веб-сайтов с динамически меняющимся оформлением // Вестн. Новосиб. гос. ун-та. Серия: Информационные технологии. 2014. Т. 12, вып. 3. С. 5-15.

ISSN 1818-7900. Вестник НГУ. Серия: Информационные технологии. 2014. Том 12, выпуск 3 © И. Р. Ахмадеева, Ю. А. Загорулько, А. С. Серый, В. К. Шестаков, 2014

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

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

Для подбора гармоничных цветовых сочетаний веб-дизайнеры широко используют цветовые круги, впервые описанные художником Иоганнесом Иттеном [1], считающимся основоположником современной теории цвета. Также существуют различные инструментальные средства, такие как Adobe Kuler 1, ColoRotate 2, Copaso 3 и др., помогающие дизайнеру подобрать нужную ему палитру или автоматически формирующие палитру по заданному изображению. В последнем случае предполагается, что цвета на изображении, будь то рисунок или фотография, гармонируют друг с другом, соответственно, составленная из них палитра также будет гармоничной.

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

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

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

Построение ассоциированной палитры изображения

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

Сокращение числа цветов на изображении. Изображение может содержать десятки и сотни тысяч различных цветов, в то же время на практике редко требуется палитра, включающая более 10 цветов. Для построения ассоциированной палитры изображения предлагается осуществлять квантизацию его цветов. Квантизация цветов изображения - это сокращение цветового пространства изображения таким образом, чтобы новое изображение визуально как можно меньше отличалось от оригинала [2].

Большинство стандартных алгоритмов трактуют квантизацию цветов как задачу кластеризации точек в трехмерном пространстве, где точки представляют цвета оригинального изображения, а три оси - три цветовых канала. После выделения кластеров точки в каждом из них усредняются для получения представительного цвета, к которому будут приведены все цвета кластера [3].

1 URL: http://kuler.adobe.com/ (дата обращения 18.07.2014).

2 URL: http://web.colorotate.org/ (дата обращения 18.07.2014).

3 URL: http://www.colourlovers.com/copaso/ColorPaletteSoftware (дата обращения 18.07.2014).

Одним из наиболее простых является алгоритм однородной квантизации (uniform quantization) [4]. В нем всё цветовое пространство делится на области одинакового размера. Цвета изображения, попавшие в одну область, усредняются. Данный алгоритм обладает низкой временной сложностью и прост в реализации, однако результаты его применения часто оказываются неудовлетворительными. Особенно явно недостатки алгоритма проявляются при малых размерах палитры (4-10 цветов).

Наиболее популярными считаются изобретенный в 1980 г. Полом Хекбертом алгоритм медианного рассечения (median cut algorithm) [5] и его многочисленные вариации. Суть медианного рассечения сводится к тому, чтобы разделить цветовой куб на требуемое количество частей-параллелепипедов, каждый из которых содержит примерно одинаковое число точек.

Более современный алгоритм, впервые описанный Михаэлем Герваутцем и Вернером Пургатхофером в 1988 г. [6], а затем улучшенный исследователем компании Xerox PARC Дэном Блумбергом [7], основан на кластеризации с использованием октодеревьев (octree). Он включает три основных этапа: построение октодерева, содержащего информацию о распределении цветов на изображении; свертка дерева путем объединения нижележащих узлов в вышележащие до тех пор, пока число листьев не станет равным требуемому числу цветов; построение итоговой цветовой палитры на основе свернутого дерева.

Кроме названных выше, существуют такие менее распространенные алгоритмы, как алгоритм локальных K-средних, предложенный Олегом Веревка в 1995 г. [8], или алгоритм NeuQuant [9]. Первый использует схему посткластеризации, согласно которой вначале делается предположение о палитре, а затем проводится ее итеративное улучшение. Второй редуцирует количество цветов до 256 путем обучения нейронной сети Кохонена (Kohonen neural network) [10].

При выборе алгоритма квантизации цветов были рассмотрены два самых распространенных из них - алгоритм медианного рассечения и алгоритм октодерева. В [6] утверждается, что временная сложность алгоритма октодерева составляет O(N), где N - общее число пикселей на изображении. Сложность алгоритма медианного рассечения зависит не только от входных данных, но и от того, как сортируются кластеры (чтобы найти медиану кластера, его необходимо отсортировать по одной из координат). В общем случае, если выбран быстрый алгоритм сортировки, медианное рассечение имеет немного меньшую временную сложность, чем алгоритм октодерева. Последний при этом показывает лучшие результаты при обработке изображений [11]. Авторы выбрали алгоритм октодерева, который при незначительной разнице во временной сложности дает более качественный результат.

После получения сокращенной палитры осуществляется приведение к ней исходного изображения путем замены цветов оригинального изображения на цвета полученной палитры. Этот процесс называется наложением (mapping) палитры на изображение [2].

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

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

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

На рис. 1 приведены примеры изображений, где имеются предпосылки для построения дополнительной палитры.

*

А

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

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

1. Строится базовая палитра исходного изображения I.

2. Удалив с изображения I базовые цвета, получим изображение I'.

3. На изображение I' накладывается медианный фильтр с заданной апертурой для очистки от несущественных деталей. В итоге остаются только однородные области заметного размера (оптимальный размер апертуры фильтра определен экспериментально). Обозначим полученное на данном шаге промежуточное изображение I' .

4. Выполняется приведение изображения I' к его базовой палитре. Получаем изображение I''.

5. Строится гистограмма изображения I' и подсчитывается площадь, занимаемая каждым из оставшихся на нем цветов. Цвета, превысившие заданный порог по площади, попадают в дополнительную палитру.

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

Г АЬ' Л 2 ГАс ' ^ 2 Г АН' Л 2 АН'

V у ч кс$с у V кН$Н у

(1)

между всеми цветами комбинации, был максимальным. Формально записать это можно следующим образом: если Рв и РА - соответственно базовая и дополнительная палитры, то искомая комбинация цветов р ' = (с|,..., с'п) такова, что

( \

, Р = (cl,., сп К

Ш1п АЕ00 (с ' , с,) = тах

',} реР

' * 3

т1п АЕоо(с, с,)

О'

V

где Р = | (с1,..., сп) е (РА и Рв)п | ci * с, V/,' = 1,...,п }, п - количество цветов в итоговой палитре.

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

Формула (1), называемая формулой цветового расстояния CIEDE2000 [12], была предложена Международной комиссией по освещению (CIE - Commission Internationale de l'Eclairage) в 2000 г. в качестве замены предыдущей формуле CIE94. Для вычисления расстояний все цвета конвертировались в цветовое пространство CIELab, обеспечивающее линейность изменения цвета в различных областях спектра.

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

На рис. 2 и 3 показаны в сравнении соответственно базовая и контрастная палитры размера 4, построенные для изображений с рис. 1.

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

Рис. 2. Примеры палитр для многоцветного изображения

1

Рис. 3. Примеры палитр для изображения, содержащего контрастные объекты

Поиск изображений по цветовой палитре

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

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

Многие из существующих алгоритмов поиска изображений по цвету (по крайней мере открытых) основаны на оценке площади, занимаемой на изображении тем или иным цветом, т. е. на анализе гистограммы изображения. Глобальные поисковые системы, такие как Яндекс и Google, предоставляют возможность поиска изображения по цвету. База поиска таких систем очень велика, а индекс изображений универсален, так как поиск по цвету лишь одна из большого числа задач, которые решаются глобальной поисковой системой. За такой подход к решению задачи приходится расплачиваться тем, что поиск ведется только по одному из небольшого набора цветов. Цветовая схема веб-сайта, по которой требуется отфильтровать коллекцию изображений, в свою очередь, обычно включает не менее 2-3 цветов (начинающим не рекомендуется использовать в оформлении сайта более 4-5 цветов). Кроме того, как показали проведенные эксперименты, цветовая схема, на 75 % состоящая из цветов, достаточно близких к цветам изображения, не всегда хорошо с ним сочетается.

В связи с поиском изображений по цветовой палитре следует упомянуть веб-сервис Multicolor engine от TinEye 4. Данный сервис предоставляет услуги индексирования коллекции изображений и последующего поиска, как по изображениям, так и по цветовым палитрам, включающим до 5 цветов. Все алгоритмы индексирования и поиска, которые используются в этом сервисе, составляют коммерческую тайну. Рассматриваемый сервис обеспечивает высокую релевантность поиска похожих изображений и поиска по цветовым палитрам. При этом следует заметить, что Multicolor engine является именно поисковым сервисом. С его помощью нельзя построить палитру изображения или его гистограмму.

Для фильтрации коллекции необходимо ее предварительное индексирование. В качестве индекса изображения использовалась гистограмма его редуцированной копии. Такой подход означает, что сначала количество цветов изображения сокращается до N (15 < N < 256), затем полученная палитра накладывается на изображение, и далее все цвета вместе с занимаемой ими площадью на изображении фиксируются в гистограмме. Задача фильтрации коллекции изображений сводится к задаче сравнения цветовой палитры с такой гистограммой. Все арифметические операции над цветами проводились в цветовом пространстве CIELab, цветовое расстояние вычислялось по формуле (1). Далее перечислены этапы принятия решения о том, является ли изображение подходящим для заданной палитры.

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

2. Для всех CP элементов палитры и для всех CH элементов гистограммы по формуле (1) вычисляется цветовое расстояние AE0O (CP, CH). Если выполняется условие AE0o < TCD, где TCD - параметрическое пороговое значение, то цвет CH называется парным цвету CP и тогда констатируем, что цвет CH покрывается палитрой.

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

4 URL: http://services.tineye.com/MulticolorEngine (дата обращения 18.07.2014).

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

5. Отдельно рассматривается случай, когда ровно один элемент С0 палитры не имеет пары в гистограмме изображения. Если все заметные цвета изображения покрываются палитрой, то возвращаем ответ «Да». В противном случае вычисляется минимум цветовых расстояний между С0 и всеми заметными цветами изображения, не покрываемыми палитрой. Если данный минимум не превосходит порогового значения, обозначаемого Тж, то возвращаем ответ «Да». В противном случае возвращаем ответ «Нет».

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

Размещение элементов оформления поверх изображений

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

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

Существует два основных подхода к построению карт салиентности: восходящий [13; 14] и нисходящий [15]. Нисходящий подход подразумевает использование дополнительной информации высокого уровня о том, какого типа объекты нужно искать на изображении и где они могут располагаться. Часто для этого используются методы машинного обучения. Методы, использующие восходящий подход, строят карты салиентности, основываясь на низкоуровневой информации: цвете и расположении пикселей. В таких методах заметными считаются пиксели, чем-то отличающиеся от других.

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

Для построения карты салиентности необходимо вычислить уникальность каждого пикселя. Уникальность пикселя - это величина, показывающая, насколько он выделяется на фоне других пикселей изображения [14].

Уникальность Ui пикселя i вычисляется по формуле

j=1

/тч

Рмс. 4. Пример определения области расположения элемента дизайна

где ci - цвет пикселя в пространстве CIELab; N - число пикселей на изображении; Wj - веса взаимного расположения пикселей i, j.

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

видно из формулы (2), чтобы посчитать уникальность всех пикселей изображения, требуется O (N2) операций.

Формула (2) может быть преобразована к следующему виду:

N N N

U. = с2 V w.. - 2c. Vc.w.. + Vc2w..,

j=1 j=1 j=1

N

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

где V wj = v>

j=1

NN

Vc.w. и Vcjwy - фильтр Гаусса, примененный к ci и с2, если выбирать w. в соответст-

j=i j=i

вии с нормальным распределением.

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

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

Эксперименты и результаты

Апробация предлагаемых методов и алгоритмов проводилась на коллекции из 512 изображений. Средний размер изображения в коллекции 2 036 х 1 364 пикселя, среднее количество уникальных цветов на изображении - 142 531. Среднее время построения базовой и контрастной палитр составило соответственно 0,5 и 1,6 секунды. Тестовые реализации выполнены на языке PHP с применением библиотеки ImageMagick 6.7.7-4 для работы с изображениями. Все эксперименты по апробации алгоритмов и оптимизация их параметров проводились на процессоре Intel Core i5 2310 2,9 GHz с 8 GB оперативной памяти.

Эксперименты показали, что лучшие результаты поиска изображений достигаются, когда количество цветов N, определяющих размер индекса коллекции, находится в промежутке от 20 до 30. Это связано с тем, что при малых N цвета изображения сильно усредняются, что искажает результат сравнения изображения с цветовой палитрой; при больших N в индексе остаются цвета, незаметные на изображении, влиянием которых на результат поиска можно пренебречь. С учетом сказанного при апробации алгоритмов использовалось значение N = 25. При этом время индексирования коллекции изображений составило чуть более 16 минут.

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

Заключение

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

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

Список литературы

1. Itten J. The Art of Color: The Subjective Experience and Objective Rationale of Color. Wiley, 1974. 160 p.

2. Orchard M. T., Bouman C. A. Color quantization of images // Signal Processing, IEEE Transactions on. 1991. Vol. 39, № 12. P. 2677-2690.

3. Segenchuk S. An Overview of Color Quantization Techniques. URL: http://web.cs.wpi.edu/ ~matt/courses/cs563/talks/color_quant/CQindex.html (дата обращения 23.06.2014).

4. HillF. S., jr. Computer Graphics. Macmillna Publishing Co., 1990.

5. HeckbertP. Color image quantization for frame buffer display // ACM. 1982. Vol. 16, № 3. P. 297-307.

6. Gervautz M., Purgathofer W. A simple method for color quantization: Octree quantization // New trends in computer graphics. Springer Berlin Heidelberg. 1988. P. 219-231.

7. Bloomberg D. S. Color quantization using octrees. 2008. URL: http://leptonica.net/papers/ colorquant.pdf (дата обращения 23.06.2014).

8. Verevka O. Color Image Quantization in Windows Systems with Local K-means Algorithm // Proc. of the Western Computer Graphics Symposium. 1995. Vol. 95. P. 20-22.

9. Dekker A. H. Kohonen Neural Networks for Optimal Colour Quantization // Network: Computation in Neural Systems 5. 1994. Vol. 5, № 3. P. 351-367.

10. Kohonen T. The self-organizing map // Proc. of the IEEE. 1990. Vol. 78, № 9. P. 14641480.

11. Bloomberg D. Color quantization using modified median cut. 2008. URL: http://leptonica. com/papers/mediancut.pdf (дата обращения 18.07.2014).

12. Sharma G., Wu W., Dalal E. N. The CIEDE2000 color-difference formula: Implementation notes, supplementary test data, and mathematical observations // Color Research & Application. 2005. Vol. 30, № 1. P. 21-30.

13. Itti L., Koch C., Niebur E. A model of saliency based visual attention for rapid scene analysis // IEEE Transactions on Pattern Analysis and Machine Intelligence archive. 1998. Vol. 20, № 11. P.1254-1259.

14. Perazzi F., Krähenbühl P., Pritch Y., Hornung A. Saliency filters: Contrast based filtering for salient region detection // Proc. of CVPR. 2012. P. 733-740.

15. Liu T., Yuan Z., Sun J., Wang J., Zheng N. Learning to detect a salient object // IEEE Transactions on Pattern Analysis and Machine Intelligence archive. 2011. Vol. 33, № 2. P. 353-367

Материал поступил в редколлегию 28.10.2014

I. R. Akhmadeeva, Yu. A. Zagorulko, A. S. Sery, V. K. Shestakov

Novosibirsk State University 2 Pirogov Str., Novosibirsk, 630090, Russian Federation

Institute of Informatics Systems SB RAS 6Lavrentiev Ave., Novosibirsk, 630090, Russian Federation

ah.irishka@gmail.com, zagor@iis.nsk.su Alexey.Seryj@iis.nsk.su, shestakov@iis.nsk.su

METHODS OF AUTOMATIC ANALYSIS OF IMAGE FOR SUPPORTING DEVELOPMENT OF WEB SITES WITH DYNAMIC DESIGN

This paper proposes methods for automatic constructing color palettes of images, searching for images on color palettes as well as detecting region of image which does not contain important information and can be used for placing other design elements. Various approaches to implementation of these methods are considered. The results of an experimental investigation of possibility of application the suggested methods for Web design are presented.

Keywords: color quantization, color palette of image, searching for images on color palettes, saliency map, Web design.

References

1. Itten J. The Art of Color: The Subjective Experience and Objective Rationale of Color. Wiley, 1974, 160 p.

2. Orchard M. T., Bouman C. A. Color quantization of images. Signal Processing, IEEE Transactions on, 1991, vol. 39, № 12, p. 2677-2690.

3. Segenchuk S. An Overview of Color Quantization Techniques. URL: http://web.cs.wpi.edu/ ~matt/courses/cs563/talks/color_quant/CQindex.html (last visited 23.06.2014).

4. Hill F. S., jr. Computer Graphics. Macmillna Publishing Co., 1990.

5. Heckbert P. Color image quantization for frame buffer display. ACM, 1982, vol. 16, № 3, p. 297-307.

6. Gervautz M., Purgathofer W. A simple method for color quantization: Octree quantization. New trends in computer graphics. Springer Berlin Heidelberg, 1988, p. 219-231.

7. Bloomberg D. S. Color quantization using octrees. 2008. URL: http://leptonica.net/pa-pers/colorquant.pdf (last visited 23.06.2014).

8. Verevka O. Color Image Quantization in Windows Systems with Local K-means Algorithm. Proceedings of the Western Computer Graphics Symposium, 1995, vol. 95, p. 20-22.

9. Dekker A. H. Kohonen Neural Networks for Optimal Colour Quantization. Network: Computation in Neural Systems 5, 1994, vol. 5, № 3, p. 351-367.

10. Kohonen T. The self-organizing map. Proceedings of the IEEE, 1990, vol. 78, № 9, p.1464-1480.

11. Bloomberg D. Color quantization using modified median cut. 2008. URL: http://leptonica. com/papers/mediancut.pdf (last visited 18.07.2014).

12. Sharma G., Wu W., Dalal E. N. The CIEDE2000 color-difference formula: Implementation notes, supplementary test data, and mathematical observations. Color Research & Application, 2005, vol. 30, № 1, p. 21-30.

13. Itti L., Koch C., Niebur E. A model of saliency based visual attention for rapid scene analysis. IEEE TPAMI, 1998, vol. 20 (11), p. 1254-1259.

14. Perazzi F., Krahenbuhl P., Pritch Y., Hornung A., Saliency filters: Contrast based filtering for salient region detection. Proc. of CVPR, 2012, p. 733-740.

15. Liu T., Yuan Z., Sun J., Wang J., Zheng N. Learning to detect a salient object. IEEE TPAMI, 2011, vol. 33 (2), p. 353-367.

i Надоели баннеры? Вы всегда можете отключить рекламу.