Размеры растровых изображений: пиксели, DPI, PPI, сантиметры — вы ничего не путаете? / Хабр

Уменьшение, чтобы просмотреть изображение

Чтобы уменьшить пиксели и просмотреть все изображение, перейдите в меню « Вид» и выберите «По размеру экрана» :

Идем в View> Fit на экране.

И теперь, когда мы уменьшены, отдельные пиксели снова слишком малы, чтобы их заметить, и мы снова видим иллюзию детальной фотографии:

На нормальных расстояниях просмотра пиксели смешиваются для создания изображения.

Смотрите наше полное руководство по навигации изображений в Photoshop

Что такое пиксели?

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

В Photoshop при просмотре изображения с нормальным уровнем масштабирования (100% или менее) пиксели обычно слишком малы, чтобы их заметить. Вместо этого мы видим то, что выглядит как непрерывное изображение, в котором свет, тени, цвета и текстуры смешиваются вместе, чтобы создать сцену, которая выглядит так же, как в реальном мире ( изображение из Adobe Stock):

Цифровое изображение открыть в фотошопе. Изображение предоставлено: Adobe Stock.

Что такое пиксель?

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

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

Caesium

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

Чтобы сжать jpg-изображение в Caesium выполните следующие действия:

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

Caesium также может обрабатывать сразу несколько изображений, перемещенных по отдельности или сразу из папки.

Compressor.io

Интерфейс сайта Сompressor.io не содержит ничего лишнего. Поэтому, даже при условии, что сервис англоязычный, работать с ним просто и без знания языка. Чтобы изменить размер файла jpg, перетащите его в поле, выделенное штрихпунктирной линией, или нажмите кнопку «Select files».

Paint

Эта программа вынесена отдельно, поскольку она есть у каждого пользователя Windows. С ее помощью можно только уменьшить разрешение. То есть геометрический размер фотографии. Еще одно преимущество Paint в том, что он открывает практически любые графические изображения. Чтобы с его помощью уменьшить размер файла jpg или другого, сделайте следующее:

  1. Кликните правой клавишей мыши по картинке, а затем в появившемся меню выделите пункт «Открыть с помощью». И далее выберите «Paint» в списке.открыть с помощью Paint
  2. На панели сверху кликните на инструмент «Изменить размер».инструмент изменить размер
  3. В меню впишите любое число меньше 100, например, 70 или 50 (в зависимости от размера исходного jpg-файла). Если хотите укажать конкретное значение разрешения, то отметьте флажком вариант «Пиксели» и задайте желаемое).изменить размер изображеия в процентах или пикселях
  4. Подтвердите изменение нажатием кнопки «Ок».

Если размер картинки уменьшился недостаточно или наоборот она стала слишком мелкая, то используйте команду «Отменить» на панели задач сверху. Или воспользуйтесь комбинацией клавиш «Ctrl Z». При попытке вернуть изображению исходный размер, поставив 100%, пострадает качество снимка.

При уменьшении размера изображения на определенный процент, объем занимаемой памяти снижается сильнее. Например, если вы уменьшите габариты фото на 50%, то размер файла уменьшится в 4-6 раз в зависимости от формата.

Retina и hidpi экраны


Такие дисплеи широко распространены в мобильных устройствах и дорогих ноутбуках. По сути это количественное увеличение пикселей при сохранении физических размеров экрана (например, 5 дюймов по диагонали и 330 PPI).

Для нас, как веб-разработчиков это значит появление разных пикселей в браузере: CSS-пикселей (которые мы обычно указываем в размерах элементов) и физических пикселей (реальных пикселей на экране). Формула такая: Физические пиксели = CSS-пиксели * DPR.DPR это device pixel ratio — коэффициент перевода CSS-пикселей в физические.

При размещении картинки мы можем написать тег img с размерами 20px, а картинка будет 40 пикселей. При этом на экране с DPR=2,0 мы увидим все пиксели картинки. Но в этой ситуации нас абсолютно не волнуют реальные значения PPI экрана.

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

Вот и вся история, хотя я конечно ничего не говорил об адаптивных картинках, способах оптимизации их отдачи и client hints. Но это другая история.

Xnresize

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

Чтобы уменьшить размер фото в формате jpg с помощью XnResize следуйте инструкции:

  1. Перетащите один файл jpg или папку с изображениями в рабочее поле интерфейса программы.добавление папки с фото в XnResize
  2. Перейдите на вкладку «Действие» и установите необходимые параметры сжатия.параметры сжатия jpg файла
  3. Нажмите кнопку «Следующий», укажите имя новой папки. При желании выберите новый формат, а затем нажмите кнопку «Преобразовать».конечный путь и формат для преобразования изображения

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

Где можно изменить размеры онлайн фотографий

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

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

Диалоговое окно «размер изображения»

Лучшее место для поиска информации о размере изображения — в диалоговом окне «Размер изображения» в Photoshop. Чтобы открыть его, зайдите в меню Изображение и выберите Размер изображения :

Идем в Изображение> Размер изображения.

В Photoshop CC диалоговое окно «Размер изображения» показывает область предварительного просмотра слева, а подробную информацию о размере изображения — справа. Я расскажу о диалоговом окне «Размер изображения» более подробно в следующем уроке . Сейчас мы просто посмотрим на информацию, которая нам нужна:

Диалоговое окно «Размер изображения» в Photoshop CC.

Зачем нужна такая функция

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

И это обычно бывает так. Допустим, кому-то необходимо загрузить редактируемое изображение на сайт. К примеру, как аватарку «ВКонтакте». Как правило, на большинстве ресурсах в глобальной сети для изображений, которые заливают на сервис, предусмотрено ограничение по его габаритам. А это в конкретном случае означает, что необходимо изменить размер фото онлайн.

Без этого никак не обойтись. Однако ограничение предусмотрено не только для габаритов. Ограничение распространяется также и на вес изображения. То есть проблема требует такого решения, когда нужно уменьшить фото. А это очень просто сделать, используя фоторедактор онлайн.

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

Изменение размера печати меняет разрешение

И поскольку все, что мы меняем, это размер печати, то изменение ширины или высоты изменит разрешение. Фактически, когда опция Resample, которую мы рассматривали ранее, отключена, все три значения (Width, Height и Resolution) связаны друг с другом. Изменение одного автоматически изменяет другие.

Если я уменьшу значение ширины до 10 дюймов, то для того, чтобы сохранить соотношение сторон изображения, Photoshop автоматически изменит значение высоты до 6,653 дюйма. А чтобы вписать все изображение в новый, меньший размер печати, пиксели должны быть упакованы более плотно, поэтому значение разрешения увеличилось до 450,9 пикселей / дюйм:

Изменение ширины и высоты изменяет разрешение.

Изменить размер изображения в пикселях онлайн – img online

Обработка JPEG фотографий онлайн.

Главное нужно указать файл на вашем компьютере или телефоне, ввести размеры в пикселях и нажать кнопку ОК. Остальные настройки выставлены по умолчанию. Ещё можно изменить размер фото в: Сантиметрах для печати | Мегапикселях | Процентах | Мегабайтах (сжать), а также качественно Увеличить маленькую картинку.

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

Для сужения или растягивания картинки в высоту или ширину необходимо выбрать такой тип изменения размера: «Резиновое, точно до указанных размеров».

Чтобы сделать квадратную картинку, нужно указать одинаковую ширину и высоту в пикселях, например, 1080×1080 (такой размер используется на сайте Instagram.com) и выбрать в настройках «Обрезка лишних краев, точно до указанных размеров», при необходимости можно указать ту часть картинки, которую обрезать не нужно.

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

Исходное изображение никак не изменяется. Вам будет предоставлена другая обработанная картинка, а также её размеры в пикселях и мегабайтах до и после обработки.

Какие еще возможности предоставляет приложение

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

Тот, кто работает с изображением, может еще потратить дополнительно (но буквально считанные) секунды, чтобы при необходимости повернуть фото или отразить его зеркально. Но и этим все вовсе не ограничивается. Можно также добавить красивые эффекты или рамку. И всего-то требуется сделать несколько кликов.

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

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

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

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

Какой размер изображения?

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

Количество пикселей

Первый вид разрешения относится к количеству пикселей, которые формируют вашу фотографию. Чтобы рассчитать это разрешение, вы просто используете ту же формулу, которую вы бы использовали для площади любого прямоугольника; умножьте длину на высоту. Например, если у вас есть фотография с 4500 пикселями на горизонтальной стороне и 3000 по вертикальной стороне, она дает вам 13 500 000.

Немного теории

Есть 4 способа уменьшить картинку в формате jpg без потери качества до нужного размера:

  1. Снизить разрешение, т.е. сделать картинку меньше в геометрических размерах.
  2. Интерполяция или размытие. В данном случае объединяются несколько пикселей в одну точку, что уменьшает количество информации в файле, но сохраняет исходный размер (похожий механизм используется в камерах смартфона с высоким разрешением матрицы при плохом освещении, когда снимок получается с разрешением 16 Мп, при номинале в 64 или 128). Картинка при этом становится немного размытой, но ее «вес» заметно снижается.
  3. Комбинированный, когда используется первый и второй способ.
  4. Изменение формата и удаление метаданных.

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

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

Пиксельная сетка

Обратите внимание, что как только вы приблизитесь достаточно близко (обычно за 500%), вы начнете видеть светло-серый контур вокруг каждого пикселя. Это Pixel Grid в Фотошопе , и это просто для того, чтобы было легче видеть отдельные пиксели.

Идем в Вид> Показать> Пиксельная сетка.

Плотность пикселей

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

Теперь разрешение выражается в dpi (или ppi), которое является аббревиатурой для точек (или пикселей) на дюйм, да именно на дюйм, так уж сложилось, что в метрическую систему это не перевели. Итак, если вы видите 72 dpi, это означает, что изображение будет иметь плотность 72 пикселя на дюйм; если вы видите 300 dpi – это 300 пикселей на дюйм и т. д.

Конечный размер вашего изображения зависит от выбранного вами разрешения. Если изображение имеет 4500 x 3000 пикселей, это означает, что он будет напечатан в размере 15 x 10 дюймов, если вы установите разрешение 300 dpi, но при 72 dpi оно будет 62,5 x 41,6 дюйма.

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

Таким образом, разрешение и размер – это не одно и то же, но они связаны между собой.

Присмотритесь к пикселям

Но, как и любой хороший фокус, то, что мы видим, на самом деле иллюзия. И чтобы разбить иллюзию, нам просто нужно присмотреться. Чтобы просмотреть отдельные пиксели на изображении, все, что нам нужно сделать, это увеличить масштаб. Я выберу инструмент «Масштаб» на панели инструментов:

Выбор инструмента Zoom.

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

Программное обеспечение для работы с изображениями

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

Размеры в пикселях

Ширина и высота изображения в пикселях известны как размеры в пикселях , и в Photoshop CC мы можем просмотреть их рядом со словом « Размеры» в верхней части диалогового окна. Здесь мы видим, что мое изображение имеет ширину 4509 пикселей (px) и высоту 3000 пикселей:

Photoshop CC включает новую опцию Dimensions вверху.

Если размеры отображаются в виде измерения, отличном от пикселей, например, в дюймах или процентах, нажмите маленькую стрелку рядом со словом «Размеры» и выберите « Пиксели» из списка:

Размеры могут отображаться в разных типах измерений.

Это говорит нам о том, что мое изображение содержит 4509 пикселей слева направо и 3000 пикселей сверху вниз:

Размеры изображения в пикселях.

Разрешение и размер – это одно и то же?

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

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

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

Так количество означает качество?

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

Однако, помимо количества, вы также должны учитывать глубину пикселей, это то, что определяет количество тональных значений, которое содержит ваше изображение. Другими словами, это количество цветов на пиксель. Например, 2-битная глубина может хранить только черный, белый и два оттенка серого, но более распространенное значение – 8 бит.

Это уже больше того, что глаз может отличить, что означает, что 16-бит или 32-бит будут выглядеть для нас относительно одинаково. Конечно, это означает, что ваше изображение будет тяжелее, даже если размер одинаков, потому что в каждом пикселе содержится больше информации. Именно поэтому качество и количество не обязательно идентичны.

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

Как выбрать и контролировать размер изображения и размер файла?

Прежде всего, вам нужно определиться, какая максимальная плотность вам нужна. Если вы разместите свое изображение онлайн, вы сможете отлично справиться с разрешением всего 72 dpi, но это слишком мало для печати фотографии. Если вы собираетесь печатать, вам нужно от 300 до 350 dpi.

Конечно, мы говорим обобщенно, потому что каждый монитор и каждый принтер будут иметь немного другие разрешения. Например, если вы хотите распечатать фотографию до 8 × 10 дюймов, вам нужно, чтобы изображение имело 300 точек на дюйм x 8 “= 2400 пикселей и 300 точек на дюйм x 10” = 3000 пикселей (поэтому 2400 × 3000 для печати 8 × 10 при 300 dpi). Все, что больше, будет лишь занимать место на жестком диске.

Ширина, высота и разрешение соединения

В диалоговом окне «Размер изображения», если вы посмотрите под словом «Размеры», вы найдете поля « Ширина» , « Высота» и « Разрешение» . Здесь мы можем не только просмотреть текущие настройки, но и изменить их:

Параметры ширины, высоты и разрешения.

Отзывы

нормально
Fretyyj
Класс!
легко и просто, c меня лайк))
просто супер !!! спасибо!
Спасибо большое!!!
Сайт топ! Спас меня от тупых программ)
Супер!
Спасибо,очень удобно и просто.
спасибо большое за сайт все удобно советую

Заключение

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