Обложка размер изображения

Размеры изображений — разрешение, DPI, PPI, Px, формат, пропорции, вектор, растр

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

Быстрый ответ

Для тех, кто торопится, постараюсь ответить максимально кратко.

Чем больше у изображения точек (1920х1080px, 2560х1440px и т.д.), тем лучше. Чем больше оно весит (900Кб, 4Мб), тем лучше.
Исключение: личные интернет-ресурсы, где важно, чтобы страницы открывались быстро, а для этого картинки не должны много весить и долго загружаться на ваше устройство.

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

Если изображение для печати: любой, даже начинающий дизайнер, знает, как готовить изображение к печати. Также для популярных размеров (А1…А4, А5…) в графических редакторах и ПО принтеров уже есть нужные шаблоны и настройки. Нужно только выбрать картинку в максимально хорошем качестве, и если вы печатаете самостоятельно, то принтер сделает всё за вас.

Размеры изображения в windows

"Свойства" изображения

Сведения изображения смартфона

Растровые и векторные изображения

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

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

Растровая графика

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

Векторная графика

Векторная графика состоит из геометрических примитивов (круг, прямоугольник, прямая, кривая, точка и т.д.). Эти примитивы задаются не цветными точками, а математическими функциями, которые мы изучали на уроках геометрии (y=x^2 Помним?). Таким образом, векторные изображения описываются математически и представляют собой график или чертёж. Как известно из геометрии, любая линия (отрезок, луч, прямая) состоит из бесконечного количества точек, и для создания векторного изображения нужно рассчитать координаты каждой точки по соответствующей математической функции. В результате у таких объектов (примитивов) есть формула, цвет и параметры пропорций, которые определяют корректные размеры и расстояния между объектами.

Разница векторного изображения (слева) и растрового (справа)

Разница векторного изображения (слева) и растрового (справа) при масштабировании.

Различия на практике

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

Условимся, что монитор, через который мы смотрим на эти изображения, состоит из точек (пикселей), как и растровые изображения. Например, разрешение монитора составляет 1920×1080 точек.

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

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

Что выбрать? Где применяется?

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

Растровая графика

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

Векторная графика

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

Векторные и растровые элементы обложки

Расширение и разрешение: разбираемся в терминах

Расширение — не путаем

Разберемся с частым заблуждением о значении этих терминов. Расширение — это тип файла, формат (.pdf, .png, .docx, .exel и т.д.), который указывается для файла, чтобы пользователь и программы понимали как работать с этим файлом. Нам пока это не важно, разобрались — забываем про расширение, переходим к разрешению.

Разрешение

Разрешение — количество точек изображения на единицу площади. Обычно единицей площади выступает монитор, а количество точек экрана монитора указывают произведением количества точек по ширине на количество точек по высоте: 1920х1080, 1280х720 и т.д.. Перемножив такие числа — получаем количество точек, которые способен отрисовать монитор. Помним, что точки=пиксели. А из школьной программы мы помним, что приставка «мега»(М) — заменяет 6 нулей числа. Если мы возьмём 1 000 000 (миллион) пикселей и заменим нули на приставку мега, то получим: 1 Mpx — один мегапиксель. Камера 48 мегапикселей вспоминаете? Камера, которая может сохранить изображение состоящее из 48 миллионов точек.

Возвращаясь к привычным экранам, их разрешение записывают произведением количества точек по ширине на количество точек по высоте (2560х1440). Когда монитор имеет разрешение (количество точек) 1280х720 — такое разрешение называют HD (ашди), 1920х1080 — Full HD (фулл ашди) и т.д..

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

Ниже 2 изображения в высоком разрешении (хорошем качестве) и в низком разрешении (плохом). У изображения в плохом качестве — отчетливо видны пиксели (квадратные точки). Чем сильнее мы будем увеличивать любое растровое изображение, тем больше и заметнее будут видны пиксели.

потяни

Пропорции и формат изображения

Формат — это расширение файла

Термин «формат» в контексте изображения имеет два разных значения.

Формат, относящийся к любому файлу (включая изображения), подразумевает расширение файла, например, .txt, .exe, .pdf, .docx, .jpeg. Говоря об изображениях в контексте расширения, речь обычно идёт о форматах изображений: .jpeg, .png, .gif, .heic, .webp и т.д.

Однако, когда мы говорим о «формате фотографии», мы сначала имеем в виду пропорции сторон изображения: вертикальное, горизонтальное, квадратное, 3×4, 16:9 и т.д., а не формат файла фотографии (.jpeg, .png, .RAW).

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

Формат — это пропорции сторон изображения

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

Когда мы говорим о «формате изображения» в значении соотношения сторон, всё просто. У нас есть изображение, которое состоит из X точек по горизонтали и Y точек по вертикали. Соотношение X/Y — это и есть формат (пропорции изображения). Зачастую формат изображения записывают со знаком деления: X:Y, 4:3, 16:9, а иногда в виде произведения X×Y, 16×9, 3×4 и т.д. Оба варианта имеют право на существование. Принято первой цифрой указывать ширину, а второй — высоту. Так, 3×4 — это вертикальное изображение, а 4×3 — горизонтальное.

Для чего это нужно? Есть разрешение 1000×1000 пикселей — всё понятно. Но на практике разрешение часто даёт меньше информации, чем формат (пропорции). Большинство соцсетей автоматически сжимают крупные изображения до размеров 1000-1500 пикселей по большей стороне для быстрой загрузки страниц сайта, так как фотографии в высоком разрешении имеют большой вес и долго загружаются в браузер на устройство, что снижает производительность сайта.

У многих интернет-площадок есть ограничение по весу файла в байтах, килобайтах, мегабайтах, либо они сами автоматически уменьшают ваше изображение до нужных размеров. Здесь требуется знать пропорции изображения (формат). Загрузив квадратное изображение, оно почти всегда останется квадратным, а вот изображение в разрешении 2000×3000 пикселей с большой вероятностью сожмут до размера 853×1280 точек. Так делают, например, Telegram и ВКонтакте. Wildberries сжимает до размера 1200×900, Ozon до 1200×1200 и т.д. В таких случаях разрешение изображения не играет роли, если оно больше 1500 пикселей по большей стороне. Зная это, нам нужно только знать формат изображения, чтобы понимать, как оно будет отображаться на странице, а разрешение уже не влияет.

DPI, PPI — с экрана на бумагу

DPI, PPI

DPI (Dots Per Inch — точек на дюйм) — относятся к разрешению (количеству капель чернил на дюйм) на цифровом печатном станке или принтере.

PPI (pixels per inch, пикселей на дюйм) — единица измерения разрешающей способности монитора.

Итак, у нас есть растровое изображение состоящие из точек (или векторное, но как только ему назначаем размер — оно становится растровым), но как его перенести на бумагу? Нужно эти точки нарисовать на бумаге и готово. Но какого размера будут эти точки? Физический размер пикселя телевизора и смартфона могут отличаться в 10 раз, тогда в каком размере эти точки переносить на бумагу? Вот здесь и нужен DPI.

DPI — это параметр, который задаёт физический размер пикселя для печати. Этот параметр говорит о том, сколько точек (пикселей) нужно поместить в 1 дюйме (в 2,54 сантиметра).

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

PPI — это количество точек (именно пикселей) на дюйм монитора (он же экран, она же матрица, она же сетка экрана). Так мы понимаем сколько точек в 1 дюйме может показывать монитор. И с помощью PPI можно посчитать физический размер пикселя, а с помощью DPI физический размер точки краски.

Пиксель, RGB, CMYK

Что такое пиксель мы знаем, но что такое пиксель монитора физически? Это по сути 3 светодиода Красного (Red), Зеленого (Gren) и Синего (Blue) цвета, которые формируют из себя единицу матрицы/сетки монитора (пиксель). Из первых букв названий цветов этих «лампочек» и появляется RGB. И в зависимости от яркости каждой из этих точек — мы видим нужный цвет. Если они все горят в полную силу — белый, если не горят — черный. Если красный и зеленый элемент — желтый.

CMYK — это также первые буквы цветов, но уже точки (капли) краски из которых она состоит. Здесь используется голубой, пурпурный и жёлтый цвета в роли основных, а также чёрный цвет.

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

Значения цветов для таких палитр задаются в процентах (%).

В CMYK 100% цвета — это объем краски для печати любого основного цвета палитры (CMYK). Смешивая по чуть-чуть таких красок — мы получаем все остальные цвета.

В RGB 100% цвета — это яркость одной цветной «лампочки» пикселя. Указывая значения яркости для трех лампочек (RGB) в % от максимальной — мы получаем нужные цвета. А сама яркость цвета пикселя измеряется в значениях от 0 до 255 (256 значений). В фоторедакторах задавая цвет мы указываем яркость от 0 до 255 для каждого из трех цветов. Но обычно используются % яркости и об этом следующий абзац.

Так выглядят RGB пиксели монитора при увеличении

Цвета вида: #0a2bff

RGB цвета часто задаются кодом вида #037b2a. Этот код ни что иное, как те же самые проценты (%) яркости цветов пикселя, только записаны в шестнадцатеричной системе исчисления.  Здесь 6 символов по 2 на каждый из трёх цветов. Если мы возьмем код цвета и переведем каждую пару значений из шестнадцатеричной в десятичную (привычную), то получим значения от 0 до 100, которые и будут показывать % от максимальной яркости цвета пикселя.

Коды цветов RGB и CMYK

Итоги

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

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

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

Формат изображения (фотографии) — это соотношение сторон изображения, например, 3×4, 3×4, 3:4.

Формат файла — это расширение файла, тип (.exe, .pdf, .excel и т.д.). Его легко спутать с форматом фотографии. А расширение легко спутать с разрешением, но расширение — это про файлы, а не картинки

(хотя картинка тоже файл).

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *