Все типы разрешений экрана: самая полная таблица

Основы изображений в Инстаграм: размер и соотношение сторон

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

Размер

Размер, также обозначаемый как разрешение, означает, сколько пикселей содержится по ширине и высоте изображения. Он выражается двумя числами; например: 320 px на 1080 px. Ширина обозначена первым числом, а вторым – высота.

Разрешение важно при съемке и загрузке фото и изображений высокого качества. Если разрешение высокое, значит, в нем содержится больше пикселей – другими словами, больше данных. Таким образом, чем выше разрешение, тем выше качество изображения. Экран или платформа с ограничением по количеству пикселей изменяет исходный материал, чтобы подогнать его под установленные правилами размеры.

Соотношение сторон

Соотношение сторон – это соотношение между шириной и высотой изображения. Это измерение обозначается как x:y. Например, оно может быть 9:16, где 9 показывает, насколько широка картинка, а 16 показывает, насколько она высока.

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

Контент важен

Рмея монитор СЃ экраном 16:9, необходимо иметь еще Рё сам цифровой контент. Создается РѕРЅ как РЅР° устройствах видео- Рё фотозаписи, так Рё РЅР° самих компьютерных устройствах. Р’ современном РјРёСЂРµ медиамир подгоняется РІ стандарты FullHD Рё 4Рљ, имеющие разрешение 16:9, так как, унифицируя контент, производители оборудования Рё контента отказываются РѕС‚ нестандартных решений РІ пользу общепринятых РЅРѕСЂРј. Такие действия позволили сократить расходы РЅР° разработку новых форматов Рё РёС… внедрение, Р° также высвободить производственные ресурсы для улучшения Рё совершенствования продукции РІ РґСЂСѓРіРёС… направлениях.

Какие бывают разрешения монитора

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

Требуемые исходники, пример Chrome

 	Как вы видите, нужно каждый раз генерировать два

Как вы видите, нужно каждый раз генерировать два изображения для каждого исходника. Для изображений под разрешение retina мы добавляем суффикс @2x, так что названия файлов получаются в формате name@2x.png. Это стандартное правило в iOS, которому необходимо следовать.

Если вы создаете изображение, которое будет использоваться только на iPad, мы используем ~ipad после .@2x. Это правило относится только к Chrome. Повторите этот процесс для каждого нужного вам исходника. Никогда не предоставляйте всего одну версию исходника, всегда покрывайте ими каждый DPI.

Набор правил iOS:

  • Исходник @2x должен быть двойным исходником 1x, всегда.
  • Добавляйте @2x для исходников retina и @3x для исходников 300% (iPhone 6 Plus).
  • Всегда создавайте изображения в масштабе 100% и 200%.
  • Всегда задавайте одни и те же имена файлов для исходников в 1x и 2x.
  • Изначально создавайте дизайн в 100%, затем масштабируйте в соответствии с нужными множителями.
  • Генерируйте исходники в формате .png.
  • Создавайте спецификации в pt, а не в px.

FAQ по изображениям в Инстаграм

Понижает ли Инстаграм качество изображения?

Возможно, вы уже заметили, что иногда после загрузки ваши изображения выглядят размыто. Скорее всего, причина кроется в том, что размер фото был более 1080 px. Если вы превышаете максимально допустимые параметры изображения, оно будет сжато.

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

Какое разрешение использует Инстаграм?

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

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

  • 1080 х 1080 px для квадратного формата;
  • 1080 х 1350 px для вертикального формата;
  • 1080 х 566 px для горизонтального формата.

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

Как менять размер фото для Инстаграм?

Мы сделали подборку самых популярных способов изменения размера фото:

  1. Обрежьте фото без использования посторонних приложений. Перейдите в альбом, выберите фото и нажмите «Редактировать». Нажмите кнопку «Обрезать» и выберите желаемый размер для фото (1:1, 9:16 и т. д.). Как только вы получите необходимый размер, нажмите «Готово», и ваше изображение будет сохранено в галерее.
  2. Позвольте Инстаграм автоматически изменить размер фото. Нажмите кнопку коррекции в углу и коснитесь двумя пальцами по экрану для изменения размера. Двигайте изображение пальцами, пока вы не добьетесь желаемого результата.
  3. Воспользуйтесь сеткой, чтобы скорректировать композицию. Воспользуйтесь мобильными приложениями. Скачайте приложение для редактирования, которое вам понравится. Загрузите фото в приложение и следуйте указаниям. Выберите подходящее вам соотношение сторон, используя подсказки, приведенные выше.
  4. Используйте Photoshop. Перетяните файл с изображением в окно Photoshop и разблокируйте фоновый слой. Выберите размер изображения в соответствующем окне и введите необходимые вам параметры. Не забудьте включить шкалу стилей, обозначить пропорции и изменить масштаб изображения. Сохраните файл и готово!

Какое соотношение сторон использует Инстаграм?

В официальном руководстве указано, что соотношение сторон фото должно соответствовать параметрам между 1.91:1 и 4:5. Если соотношение сторон, выбранное вами, превышает эти параметры, то Инстаграм автоматически равномерно обрежет изображение с обеих сторон.

Инстаграм дает возможность выбирать для ваших постов одно из нескольких поддерживаемых значений соотношений сторон: 1:1 (квадрат), 1.91:1 (горизонтальное), и 4:5 (вертикальное). Существуют различные хитрости и уловки для того, чтобы правильно обрезать фото и расставить акценты на нужные объекты.

Должны ли фото для Инстаграм иметь квадратное соотношение?

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

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

Как предотвратить обрезание моих фото Инстаграм?

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

Например, если выбранный вами формат соответствует соотношению 4:5 и разрешению 1080 х 1350, то вам нужно изменить изображение заранее. Вы можете изменить форму фото прямо во встроенном редакторе приложения “Камера”. Тогда Инстаграм загрузит ваше фото безо всяких изменений.

Как поместить фото в пост Инстаграм полностью?

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

В App Store и Google Play есть множество приложений, которые помогут вам изменить размер изображения и сохранить его качество. Помните о том, что такие приложения добавляют белые пробелы по сторонам фото, чтобы соотношение сторон подходило под требования Инстаграм. К сожалению, других путей обойти требования платформы практически нет.

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

Как просматривать аватар в Инстаграм в полном размере?

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

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

Влияние на дизайн

Скажем, вы нарисовали синий квадрат размером 109 * 109 px на экране, о котором мы только что говорили.

Этот квадрат будет иметь физический размер 1 * 1 дюйм. Но если экран пользователя имеет PPI = 72, ваш синий квадрат будет крупнее по своим физическим размерам. Так как PPI = 72, понадобится примерно полтора дюйма экранного пространства, чтобы отобразить квадрат со стороной в 109 пикселей. Посмотрите симуляцию этого эффекта ниже:

 	Не обращая внимания на разницу в цвете и разреше

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

Вертикальное изображение

Чаще всего фото, загружаемые в Instagram, являются вертикальными. Однако в этом формате соотношение сторон отличается совсем несущественно.

Характеристики:

  • Размер вертикального изображения в Instagram — 600 х 750 пикселей (максимально 1936 х 1936 пикселей)
  • Идеальное соотношение сторон — 4:5

Вы знали, что четверть всей рекламы в Instagram — видео? Этот формат контента популярен на многих платформах. Обязательно включите видео в свою стратегию, но сначала подберите для него подходящий размер.

Квадратное видео

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

Характеристики:

  • Размер квадратного видео в Instagram — 600 х 600 пикселей (минимум)
  • Идеальное соотношение сторон — 1:1

Что такое экран Retina

Само название Retina display было представлено Apple в релизе iPhone 4. Экран называется Retina, потому что PPI устройства было таким высоким, что сетчатка человеческого глаза (на английском retina) не должна была различать пиксели на экранах.

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

Технически, такие экраны отображают вдвое больше пикселей в высоту и в ширину на таком же физическом размере. iPhone 3GS имел диагональ в 3,5 дюйма и разрешение 480 * 320 px, что соответствует 163PPI. Phone 4S также имел диагональ в 3,5 дюйма и разрешение 960 * 640 px, что соответствует 326PPI.

 	Точно в два раза. Простой множитель. Так что, вм

Точно в два раза. Простой множитель. Так что, вместо того, чтобы быть меньше, элементы на экране в два раза резче, так как в них вдвое больше пикселей, и такой же физический размер. 1 нормальный пиксель = 4 пикселя Retina, в четыре раза больше пикселей.

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

 	Примечание: довольно сложно симулировать разное

Примечание: довольно сложно симулировать разное качество изображения с двух устройств на третьем, то есть на которое вы сейчас смотрите. Музыкальный плеер на Retina, даже занимая такое же физическое пространство, будет смотреться вдвое четче и качественнее на iPhone 4.

Название «Retina» принадлежит Apple, так что другие компании используют вместо него «HI-DPI» или совсем никакого названия.

Продукты Apple — это отличный способ познакомиться с конвертацией DPI, чтобы понять различия между разрешением, PPI и соотношением с физическим размером, потому что вам придется использовать всего 1 множитель.

Как быть с PPI на iOS

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

Когда речь заходит о размере экрана и DPI, в iOS есть 2 типа мобильных устройств и 2 типа экранов под планшет и десктопы.

В мобильной ветке у них есть iPhone и, конечно же, iPad. В категории телефонов есть старый 3GS (до сих пор поддерживается iOS6) и выше. Только iPhone 3GS является не-Retina. iPhone 5 и выше используют более длинный экран с тем же DPI, как iPhone 4 и 4s. Вот вам шпаргалка:

 	В сентябре 2014 был анонсирован 2014 Apple Keyno

В сентябре 2014 был анонсирован 2014 Apple Keynote, теперь у вас есть 2 новые категории iPhone: iPhone 6 и iPhone 6 Plus.

iPhone 6 немного больше, чем 5 (на 0,7″), но PPI тот же. iPhone 6 Plus, с другой стороны, представляет совсем новый множитель для iOS — @3x, из-за своего размера в 5,5″.

 	Есть что-то особенное в том, как iPhone 6 Plus р

Есть что-то особенное в том, как iPhone 6 Plus работает со своим экраном по сравнению с другими моделями iPhone: Он уменьшает графику.

Когда вы, к примеру, создаете дизайн для iPhone 6, вы будете рисовать на канвасе размером 1334 * 750px, и телефон будет рендерить 1334 * 750 физических пикселей. В случае с iPhone 6 Plus, телефон имеет меньшее разрешение, чем изображение, так что нужно будет делать дизайн в разрешении 2208 * 1242 px, а телефон уже уменьшит его до идеального размера. Посмотрите иллюстрацию ниже:

 	Физическое разрешение на 15% меньше, чем разреше

Физическое разрешение на 15% меньше, чем разрешение рендеринга, будет немного глюков вроде полупикселей, из-за чего самые мелкие детали могут быть немного размытыми. Разрешение настолько высоко, что эти недостатки будут практически незаметны, разве что если слишком придирчиво вглядываться. Так что рисуйте на канвасе 2208 * 1242 px и помните возможные глюки для супер-крошечных деталей вроде разделителей. Посмотрите на симуляцию:

 	Далее идет категория iPod touch. В рамках дизайн

Далее идет категория iPod touch. В рамках дизайна рассматривайте их как iPhone. Поколение iPod 4 и выше используют iOS 6 и не-Retina. В поколении iPod 5 уже используется экран retina(@2x), который совместим с iOS7. Поколение iPod 5 использует экран, который по размеру как в iPhone 5.

И, наконец, есть еще iPad-ы. За исключением первого поколения айпадов (сейчас уже не поддерживаются), все они работают на iOS7, и только iPad 2 и iPad mini первого поколения используют экран не-retina. Если вам интересно, что собой представляет iPad mini с точки зрения дизайна, то это обычный iPad (экран с тем же PPI), но физически меньше. Я имею в виду, что они взяли то же разрешение экрана, но сократили его размер с 9,7 дюймов до 7,9. При том же соотношении увеличилась плотность пикселей. Графические исходники будут немного меньше физически.

 	Что касается категории десктопов и ноутбуков, мы

Что касается категории десктопов и ноутбуков, мы не будем описывать каждый размер экрана, который предлагает Apple. Большинство используемых сегодня экранов имеет множитель 1x (Macbook, Macbook Air, old Macbook Pro, экраны десктопов). Retina представлена в 13 и 15″ только на Macbook Pro. Множитель 2x, точно как на iPad-ах и iPhone-ах. Если дизайн для десктопа отличается от мобильной версии, вам понадобится подготовить исходники для обеих версий экрана.

Только с одним множителем создание исходников под iOS и OSX довольно простой процесс. Я предлагаю начать с дизайна для базового PPI (то есть 100%/1x) и умножать на 2 потом, чтобы убедиться в корректности дизайна на экране @2x и генерации исходников в @2x. Как только вам станет удобно переключаться между 1x и 2x, вы сможете создавать дизайн напрямую в @2x, уменьшая исходники для меньшего разрешения. Это будет особенно полезным при дизайне на экране Retina (Macbook Pro).

Вертикальное видео

Если вы предпочитаете вертикальное видео, обратите особое внимание на разрешение и соотношение сторон.

  • Размер вертикального видео в Instagram — 600 х 750 пикселей (минимум)
  • Идеальное соотношение сторон — 4:5

3. Истории

Более половины брендов в Instagram публикуют истории. С ростом их популярности время, которое пользователи проводят в этой соцсети, в среднем увеличилось на 28 минут.

Этот формат рекламы невероятно эффективен. Используйте его, а мы поможем определиться с размерами.

Растягиваемые исходники

Неважно, десктопное или мобильное приложение вы разрабатываете, почти всегда требуются растягиваемые исходники (stretchable assets). Этот исходник позволяет коду изменять размер до нужного без потери качества при рендеринге.

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

Посмотрите на пример внизу. Панель инструментов на iOS генерируется из одного супертонкого исходника, который повторяется по оси Х по всему экрану.

 	Теперь посмотрим, как разные платформы использую

Теперь посмотрим, как разные платформы используют растягиваемые исходники.

Как увеличить разрешение экрана на ноутбуке ;

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

Изображения для карусели

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

Характеристики:

  • Размер изображения для карусели в Instagram — 1080 х 1080 пикселей
  • Идеальное соотношение сторон — 1:1
  • Формат любого изображения — JPG или PNG
  • Максимальный размер каждого изображения — 30 Мб
  • В одну рекламную запись можно добавить 2–10 изображений