Каждый день, каждый из нас сталкивается с цифровыми изображениями. Кто-то в качестве материалов для досуга, а у кого-то работа напрямую связана с изображениями. Однако далеко не каждый из нас знает о изображениях достаточно.
Я, как дизайнер, часто сталкиваюсь с проблемой, когда клиенты катастрофически плохо понимают базовые параметры изображений. Прислать логотип компании документом «логотип.doc» - легко. Многие, даже не знают о том как правильно отправлять фотографии в телеграм, васапе, вконтакте.
Базовые представления о изображениях нужны всем, даже тем, кто просто отправляет фотографии в мессенджерах и соц. сетях. Попробуем простым языком разобраться в основных параметрах и терминах изображений.
Если кратко
Основные параметры, которые нужно знать каждому: разрешение, вес (размер), формат (расширение).
Разрешение - это аналог физического размера изображения, чем больше размер, тем больше на изображении видно деталей. Разрешение измеряется в количестве точек (пикселей - px) по ширине, на количество точек по высоте. Например, 1920x1080px. Чем больше точек, тем больше размер, тем больше деталей на изображении может поместиться и выше его качество. Изображения разрешением меньше 1000px - сейчас почти не используются и непригодны для большинства задач, также как и изображения больше 2560px редко имеют смысл.
Размер изображения (вес) - это тот объем памяти, который нужен, чтобы сохранить изображение в устройстве. Чем больше на изображении деталей - тем больше памяти нужно использовать, чтобы их описать, а это значит, что качественные изображения «весят» больше. Размер изображения, обычно, измеряется в килобайтах (КБ), либо в мегабайтах (МБ). Есть еще Килобиты (Кб), но обо этом дальше. 1МБ=1024КБ. Обычный размер изображений 200КБ - 5МБ.
Формат - самое важное. Из-за того, что изображение может содержать в себе очень много информации, которая не всегда нужна, существуют разные форматы изображение, они же разрешения (.jpg, .png, .heic, .tiff и т.д.). Каждый такой формат хранит разное количество информации о изображении, какие-то хранят всю информацию (форматы без потери качества, .png, .tiff, .RAW...), а какие-то только её часть (форматы со сжатием и потерей качества: .jpeg, .gif, .heic, .webp...). Для обмена фотографиями подойдёт любой формат. А вот для обмена рабочими материалами (логотипы без фона, фото для обработки и пр.) - желательно отправлять в форматах без сжатия. Оптимально - .png, .RAW. Подробно о каждом типе форматов я писал в своей статье.
Обязательно знать каждому
Не каждый знает, что при отправке изображений через популярные соц. сети или мессенджеры, качество фотографий ухудшается, а расширение фотографии меняется.
Это связано с тем, что для хранения большего количества качественных полноразмерных фото нужно очень много памяти, поэтому такие площадки «сжимают» изображения, чтобы они занимали меньше памяти в хранилищах. Также и меняется формат исходного изображения на формат со сжатием, часто это jpeg. То есть, если вы загружаете фото в формате .heic размером 2560х1440px, то получатель уже видит изображение в формате .jpeg и 1280х720px. Однако, для повседневного пользования это не является проблемой, т.к. даже сжатое изображение выглядит на устройствах почти не отличимо от оригинала, однако при попытке увеличить масштаб изображения - становится понятно, что деталей стало меньше. Обычно все площадки сжимают размер изображения до 1280px по большей стороне.
Чтобы этого избежать, нужно прикреплять фотографии "как файл" или "документ":
Тогда и формат и качество изображения останутся прежними. Это очень важно, если вы отправляете фото для последующей обработки, или не хотите потерять качество фото. Также и ваши изображения без фона превращаются в изображения формата .jpeg, который заполняет отсутствующий фон белым цветом, наверняка видели такие логотипы на сайтах в белом квадрате? А вот здесь человек переплюнул и это:
Теперь разберёмся детально в каждом параметре.
Начнём с того, что все изображения фундаментально делятся на два типа: растровая и векторная.
Векторная графика
Векторная графика по своей сути - чертёж. Каждый элемент графики задаётся функцией (как на уроках геометрии). Изображения состоят из графических примитивов (квадрат, круг, прямоугольник, линия, кривая, треугольник и пр...). Сочетание таких фигур, наложение их друг на друга и позволяет создавать изображения. Например логотип ниже создан в векторной графике. Он состоит из контуров в виде букв, которые закрашены своим цветом. Каждая буква состоит из кривых линий, которые залиты цветом и формируют надпись.
Такие "чертежи" можно бесконечно масштабировать/увеличивать/зумить и они не теряют четкости, т.к. их край - линия, которая задана функцией/уравнением и каждое увеличение масштаба просто пересчитывает все точки под новый размер экрана. И здесь начинается самое интересное, т.к. любой монитор состоит из точек (пикселей) и чтобы отобразить векторное изображение, его нужно сначала перевести в растровое.
Растровая графика
Растровая графика состоит из точек (пикселей px). Все растровые изображения - это набор точек определенного цвета, которые расположены в определенной последовательности. Мониторы, также состоят из точек (пикселей), которые могут отображать множество цветов и когда все пиксели экрана загораются нужным цветом, мы видим изображение.
Хорошим примером для понимания такой графики, является конструктор мозабрик. Он также состоит из точек, которые имеют свой цвет. Чем больше точек - тем качественнее изображение. Если отойти на достаточное расстояние, когда точки будут размером с пиксель монитора и добавить побольше элементов в конструктор, то картинка будет похожа на обычную черно-белую фотографию.
И вот тут начинается интересное, чтобы увидеть векторное изображение - его нужно отобразить точками экрана, а для этого его сначала нужно перевести в растровое - в цветные точки. Как и с конструктором, чем больше у нас точек - тем более четкое получится изображение, вот пример перевода векторного круга в высокое и низкое разрешение.
Различия на практике
На приведенных выше изображениях наглядно видна разница между векторным и растровым изображением. Если растровое изображение имеет высокое качество (разрешение), то на первый взгляд разница может быть несущественной. Однако при увеличении изображения разница становится колоссальной.
Условимся, что монитор, через который мы смотрим на эти изображения, состоит из точек (пикселей), как и растровые изображения. Например, разрешение монитора составляет 1920×1080 точек.
При увеличении векторный круг рассчитывается заново для всех точек экрана, заполняя необходимые пиксели. Таким образом, если ранее на экране размером 1920×1080 точек отображался целый круг, то теперь мы видим только его часть, но на том же количестве точек и теперь мы можем рассмотреть его детальнее, так как математически рассчитались новые точки круга, ранее недоступные для глаз из-за ограниченного количества точек монитора.
Растровая графика состоит из фиксированных точек, и в идеальном случае одна точка изображения соответствует одной точке экрана. При увеличении изображения одна его точка начинает занимать больше одной точки экрана, возникает эффект прозрачных ступенек (лестницы) по краям. Новые точки не появляются, а увеличиваются старые, частично заполняя соседние пиксели, что приводит к ухудшению качества изображения.
Расширение и разрешение: разбираемся в терминах
Расширение — не путаем
Разберемся с частым заблуждением о значении этих терминов. Расширение — это тип файла, формат (.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, про цвета вида: #0a2bff и другие статьи на тему графики, дизайна и веб-разработки.
Также переходите на мой сайт: sdesigner.ru
И подписывайтесь на телегарам-канал: https://t.me/designernasele
