Перевод статьи, впервые опубликованной в блоке компании Firewheel. Оригинал Вы можете увидеть тут
Мы часто рисуем пиктограммы, и один из наиболее частых вопросов, который нам задают об их дизайне, следующий: «Почему вы делаете свои пиктограммы формата PNG или GIF в файлах разного размера, и когда, имея один векторный файл формата SVG или EPS, можно будет сделать пиктограмму такого размера, какого мы хотим? »
Несмотря на то, что ответ на этот вопрос чисто технический, его не так уж трудно понять. Но прежде чем начать объяснения, мы должны напомнить вам про общие различия между растровым и векторным форматами файлов.
Файл растрового изображения (например, GIF, PNG, TIFF и т.д.) состоит из пикселей изображения. Пикселы, для непосвященных, это маленькие световые квадраты, из которых состоит экран компьютера. Само слово пиксел, это сокращенная форма слов «элемент изображения» (picture element по английски). Маленькие квадратные пикселы света очень легко увидеть невооруженным глазом на ЖК-мониторе, если он у вас есть. Иконка, размером 24×24 пикселов и представляющий из себя красный квадрат, будет состоять из 576 отдельных красных пикселов, каждый из которых является маленьким кусочком числовых данных в файле изображения. Его увеличение требует большего числа пикселов, что приводит к большему количеству числовой информации, и, таким образом, к большему размеру файла.
Файл векторного изображения (например, EPS, SVG и т.д.) построен на основе геометрической и математической информации, хранит информацию в формате геометрических примитивов. Векторный файл изображения, содержащий красный квадрат и масштабируемый до 24×24 пикселов, содержит числовую информацию о математическом местоположении четырех углов квадрата, информацию о заполнении квадрата цветом и информацию, которая определяет размер квадрата в 24×24 пикселов на экране. В основном, нашему красному квадрату векторного файла необходимо лишь около шести маленьких кусочков информации (координаты угла x,y, размер цвет заполнения, типа фигуры, в данном случае квадрат), в отличие от информации в 576 бит, необходимой для нашего растрового красного квадрата.
На самом деле объяснение несколько сложнее, но вы поняли суть: для изменения размера файла векторного изображения с 24×24 до 48×48 пикселов необходимо редактирование данных одного бита. Математика сделает все остальное. Однако, изменение размера изображения графического файла с 24×24 до 48×48 пикселов потребует добавления более 1728 пикселов, что приведет к увеличению размера файла.
Таким образом, один векторный файл может представлять изображение для множества размеров, в то время как растровый — только одно точное изображение, с заранее определенным размером пикселов.
Итак, если векторный формат файла можно масштабировать и уменьшать для получения любого размера, как это того пожелает, то почему дизайнеры настаивают на чертеже нового оформления для каждой иконки, размер которой мы показываем клиенту? На самом деле, все просто: относительность.
Давайте рассмотрим иконки расположенные выше на принтере. Верхний ряд состоит из четырех вручную отрисованных растровых иконок, каждая из той же темы, каждая показана в разных размерах. В нижнем ряду представлена одна векторная иконка, исходного размера 24×24 пикселов, а затем математически перемасштабированная в другие размеры, как показано на рисунке.
Обратили внимание, есть разница? Я думаю, вы заметили. В верхнем ряду каждая иконка четкая и резко выделена 1-пиксельной линией. В нижнем ряду только векторный мастер-файл исходного размера 24×24 пиксела является четким. Три других размера размыты.
«Почему это происходит?», спросите вы. «Я думал, что векторные файлы могут быть любого масштаба, большие и маленькие, и повсеместно, и они всегда сохраняют качество изображения». Ну, технически это возможно сделать. Но есть и слабые стороны в работе с векторными файлами, и эта слабость становится все более очевидной при небольших размерах. Особенно при размере 48×48 пикселов. Дело в том, что компьютерные мониторы по-прежнему, по сути своей, построены на основе пиксельных дисплеев, то есть, на растровой основе.
Когда вы берете векторное изображение исходного размера 24×24 пиксела, и уменьшаете масштаб до 16×16, то его относительные пропорции не совпадают. Нет никакого способа, которым вы можете равномерно распределить 24 пиксела информации в 16 пикселов пространства — помните, нет такого понятия, как половина пиксела. Система сама принимает решение об округлении до 1 или двух пикселей. Особенно ужасный эффект получается на мелких изображениях, где каждый пиксель на вес золота. Такое изображение размывается.
Нет также никакого способа, которым вы можете равномерно измерить 24 пиксела информации вверх в 32 пиксела пространства. Изображение снова размывается.
Кроме того, если вы берете то же самое векторное изображение исходного размера 24×24 и масштабируете его до 48×48 пикселов, то вы получите удвоение размеров. У вас больше не получится четкой однопиксельной линий, а будет жирная двупиксельная. Увеличьте его больше, скажем, до 96×96 пикселов, и линии будут еще толще.
Если вы делаете seo сателлит, то может это и подойдет, но если Вы заботите и о репутации своего сайта, то это не подойдет. И именно поэтому мы проектируем каждый размер иконки в зависимости от масштаба, а не полагаемся на один векторный файл. Это занимает больше времени, и стоит больше денег, но мы считаем, что результат того стоит.
Есть несколько пояснений: во-первых, если вы будете работать с большими размерами иконок (скажем, более 48×48), вы можете не заметить существенной разницы, и счесть результаты приемлемыми. Во-вторых, ваш мильяж будет меняться по мере создания работ различных художественных стилей. Чем менее детализированными будут линии работ, тем меньше вам нужно будет беспокоиться об этом.
Теперь вы имеете представление о нашем рабочем процессе, о нашей одержимости совершенством пиксела, и о том, почему требуется немного больше работы, когда необходим более чем один размер иконки. Векторная графика — это замечательно, но не следует полагаться на нее, как на «серебряную пулю» при охоте на вампиров. Для малых иконок единственный путь — пиксельный рисунок.
