Какое максимальное разрешение экрана в вк
Видео в соцсетях плотно входит в нашу жизнь бла бла бла является маркетинговым инструментом бла бла бла, вы и без меня это знаете.
На всех социальных платформах есть свои требования к разрешению, длительности и форматам видео.
Facebook.
Самый глючный видеохостинг из бесплатных.
Видео для ленты новостей:
Рекомендуемое разрешение: 1280х720
Мин.ширина: 600
Соотношения сторон: 16:9, 9:16, 2:3, 4:5, 1:1 (квадрат)
ФБ советует загружать видео в форматах .mp4 и .mov с кодеком h.264, фиксированным кол-вом кадров в секунду (до 30 fps), прогрессивной развёрткой, и стерео звуке в AAC с компрессией 128kbps и более.
Длина видео до 240 минут
Размер файла до 4GB,
Частота кадров в секунду до 30.
Видео в формате 360:
Разрешение до: 4096х2048
Мин.ширина: 600
Соотношения сторон: 2:1
Формат .mp4
Максимальная длительность 40 минут
Частота кадров до 60.
Если ваша 360 камера поддерживает метаданные 360 для выгрузки в сеть, то ФБ сам поймет что это видео 360. Если нет, то через вкладку Advanced можно указать ФБ что видео 360 и он сделает его 360.
Инстаграм
Разрешение: 600х600, 600х315, 600х750
Соотношения сторон: 1:1, 4:5, 1.9:1
Формат .mp4 или .mov
Максимальная длительность 60 секунд
Частота кадров в секунду до 30.
IGTV (Инстаграм ТВ)
Рекомендуемое разрешение 1080х1920 (вертикальное видео)
Минимальное разрешение: 600х1067
Соотношения сторон: 16:9, 4:5, 9:16
Формат .mp4 или .mov
Размер файла до 4GB
Частота кадров в секунду до 30.
YouTube
Разрешение: 426x240 (240p), 640x360 (360p), 854x480 (480p), 1280x720 (720p), 1920x 1080 (1080p), 2560x1440 (1440p), 3840x2160 (2160p)
Соотношения сторон: 16:9, 4:3
Формат .mp4, .mov, .mpeg4, .avi, .wmv, .mpegts, flv, .3gpp, .webm, .dnxhr, .prores, .cineform, .hevc
Максимальная длительность 12 часов
Размер файла до 128GB
VK
Разрешение: 426x240 (240p), 640x360 (360p), 854x480 (480p), 1280x720 (720p), 1920x 1080 (1080p)
Соотношения сторон: 16:9, 4:3
Формат .mp4, .mov, .avi, .flv, .wmv, .3gp, .mkv, .m4v, .ts, .m2ts, .mts
Максимальная длительность: неясно
Размер файла до 5GB
1. Максимальный размер изображения во "вконтакте" периодически меняется. Дальнейшая речь пойдёт о загрузке в альбомы с ПК, а не мобильного устройства.
2. "Предпоследняя" известная мне версия загрузчика допускала два варианта: на основе flash ("обычная" загрузка - ограничение 2048 пикселей по длинной стороне) и html5 ("перетаскиванием" файлов - drag-and-drop - 2560 пикселей). "Предпредпоследняя" имела ограничение в 1280 пикселей, ещё более ранняя - 1024.
3. Последняя на сегодня версия всегда ограничивает размер фотографий 2160 пикселей по длинной стороне. Ранее загруженные фотографии в 2560 пикселей такими и остались (т. е. не "обрезались" и не уменьшились). Учтите, что фотографии с суммой длины и ширины больше 14000 пикселей не загрузятся вообще.
4. "ВКонтакт" _всегда_ "пережимает" фотографии: сейчас, если они больше 2160 пикселей, то они, дополнительно, уменьшаются до этого размера; если нет - то только "жмутся".
5. Параметры этого JPEG сжатия достаточно жёсткие: выборка 4:2:0 (т. е. цветовое разрешение уменьшено в два раза и по вертикали и по горизонтали), качество - 87%. Поэтому изменения могут быть заметны - степень этой заметности сильно зависит от типа изображения (многоцветные изображения с большим числом мелких деталей "страдают" больше).
В итоге _на сегодня_:
- лучшим способом, с точки сохранения качества, будет загрузка фотографий размером в 2160 пикселей по длинной стороне, оптимизированных к этому разрешению; сам "вконтакт" рекомендует "загружать снимки поменьше (до 1000 пикселей по любой из сторон) и перед загрузкой чуть увеличивать их резкость" - цель этой рекомендации - улучшить просмотр уменьшенных картинок;
- никаких "оригиналов" в альбомах не сохраняется, соответствующая кнопка просто показывает ту же картинку, только без экранного оформления и масштабирования;
Загрузка 2160×2160: https://vk.com/photo16352337_456239019 - на "выходе" те же 2160×2160, но картинка _чуть_ детальнее, так как её резкость была оптимизирована под это разрешение.
Короче, фото при загрузке по HTML 5 ( методом drag-and-drop ) должно влезать
в ЭТОТ ПРЯМОУГОЛЬНИК
2560х2160 Px нажми ЕЩЁ=>Открыть оригинал
Короче не нужно парится! все просто если хотите кидать фотки в оригинале как делаю я ( кидаю фотки 48мп камеры) просто загружайте как ФАЙЛ а не как фотографию качество при этом остается как есть и разрешение
ВКонтакте анонсировала новую функцию для обмена контентом во время групповых видеозвонков: пользователи смогут демонстрировать экран в разрешении 4К. Так участники звонка смогут увидеть материалы, которые им представляют, в максимально высоком качестве. Это особенно актуально во время пандемии, когда люди по возможности сокращают число социальных контактов, но при этом хотят с комфортом проводить рабочие или личные встречи.
Групповые звонки ВКонтакте объединяют до 128 человек. Демонстрация экрана в сверхвысоком разрешении поможет их участникам обсуждать рабочие проекты, презентовать отчёты руководству, партнёрам и клиентам. Функция полезна и для образовательных онлайн-мероприятий: материал легче объяснять наглядно. Кроме того, с совместным просмотром экрана участники звонка могут показывать фото и видео друзьям прямо во время разговора.
«Демонстрировать экран в групповых звонках ВКонтакте можно с 2020 года: с этой функцией общение становится более предметным и живым. С тех пор мы работали над тем, чтобы предоставить участникам звонков изображение сверхвысокой чёткости во время демонстрации. Об этом нас просили и пользователи, и коллеги: мы сами используем звонки ВКонтакте для работы и знаем, насколько важно, чтобы все иллюстрации, графики и числа можно было различить. Добиться цели команде помогли собственные разработки. В их основе — нестандартная технология адаптации видео по частоте кадров без снижения качества изображения».
В сентябре 2020 года ВКонтакте запустила групповые видеозвонки на 128 человек для совместной учёбы, работы и досуга, а в мае этого года анонсировала запуск на 2 048 участников одновременно. Ежемесячно пользователи ВКонтакте совершают свыше 150 млн видеозвонков.
В звонках ВКонтакте бесплатно представлены все привычные функции платных корпоративных сервисов для видеоконференций и даже больше: нет ограничений по длительности разговора, присоединиться к звонку можно по ссылке с приглашением — даже без профиля в соцсети. Также доступны демонстрация экрана, запись и трансляция звонка. Пользоваться сервисом можно на любом устройстве — смартфоне или ноутбуке.
Кроме того, в звонках ВКонтакте работает интеллектуальное шумоподавление. Участники онлайн-встречи будут слышать друг друга, даже когда соседи внезапно затеяли ремонт или вокруг гудит улица и носятся машины. Для тишины «в зале» администратор может выключить микрофоны у всех участников и выбрать, смогут ли они включить их обратно. Если участник захочет высказаться или задать вопрос, он сможет написать в чате или «поднять руку».
В прошлогоднем конкурсе на редизайн ВК, авторы конкурса упомянули о проблемах веб-версии. Проблемой номер один они назвали узкую ширину сайта. Я согласен с командой Вконтакте и решил построить свое решение в борьбе с этой проблемой.
Практика — мое решение
Свое решение я построил на 4-м подходе: экран с двумя активными окнами. Второе окно — месенджер. Это позволяет переписываться во время чтения новостей. При этом не используя 2 вкладки браузера.
При желании оно открывается поверх основного контента. Сценарий ведения переписки во время чтения новостей работает также.
Сама панель пользователей с последними переписками остается на экране во всех разделах сайта:
5. Две колонки
Режим отображения информации схожий с таймлайном на Фейсбуке. Концепт, основанный на этом варианте, победил в конкурсе редизайна ВК.
Плюсы:
+ Легко компоновать информацию
+ Равномерная плотность данных на экране
Минусы:
− Раздваивается внимание при чтении новостей
− Фейсбук
Проблема №1 — Узкий экран
Помимо ширины экрана я выделил еще 2 проблемы.
Теория — способы стать шире
Давайте сначала решим, что такое узкий экран. Текущая ширина ВК — 791пк. В конкурсном задании было сказано адаптировать сайт под разрешение от 1024пк. Как я вижу, решением проблемы узкого экрана будет интерфейс рабочий на разрешении 1024—1600пк. То есть интерфейс способный работать как на узком (1024пк) разрешении, так и на широком (1440+пк).
Изучив варианты, я выделил 6 направлений. Привожу их на примере страницы новостей.
3. Смещаемые панели
Подход ставший популярным в веб-сервисах: срм-системах, таск-менеджерах. Экран состоит из зависимых панелей. Панели появляются справа друг от друга, если экран не вмещает все, то левые панели скрываются по мере появления правых.
Плюсы:
+ На маленьких разрешениях можно переключать панели, на большом показывать все сразу
+ Схожесть интерфейса с версией под планшеты
Вместо постскриптума
Разве может быть редизайн социальной сети без прототипа страницы пользователя.
Текущая версия перегружена информацией: музыка, видео, группы, паблики, фотографии, фотографии на карте, фотоальбомы, друзья, общие друзья, друзья онлайн, подписчики… Я решил отрезать все лишнее:
Я учусь веб-дизайну и не могу разобраться, какая должна быть ширина макета и ширина рабочей области? Обычно берут ширину макета 1920px, но контентную область по сетке то на 1280, то на 1170 или 960. Ну или вообще на нее забивают. От чего это зависит? Надеюсь на развернутый ответ
- Вопрос задан более трёх лет назад
- 13243 просмотра
Простой 2 комментария
Да что же с вами не так? Уже 3 такой вопрос на этой неделе. Дам вам совет: есть такая штука - поиск, очень полезная, но это не точно.
Ширина макета 1920.
Ширина содержимого 1170 (1200 - 15 * 2 - отступы по краям)
Это дефолтная сетка бутстрапа. Рисуйте под нее, и не заморачивайтесь. По крайней мере первое время.
Скачайте какой-нибудь шаблон с уже нарисованным слоем с сеткой и рисуйте.
Есть еще скрипты для фотошопа, которые автоматически расставят направляющие по бутстраповской сетке.
Суперлузер? Серьезно?
Ок, размер рабочей области зависит от предпочтений и фолбеков.
Например, мое разрешение монитора сейчас как раз 1920, то есть картинка шириной 1920 будет как раз 100% ширины экрана. не учитывая полосу прокрутки и рамки окна. То есть нужны поля. Допустим по 15 пикселей(у меня не ретина, так что мой монитор имеет 72 точки на дюйм). Итого 1920 превращается в 1890, если надо контент делать на всю ширину (section-fluid в бутстраповых классах).
1920 это сейчас считаем как дефолтный монитор(смотрим по статистике), а на момент создания бутстрапа они зафиксировали 1170 как минимально допстимое разрешение десктопа, потому контент вписывают на такой размер(учитывая поля по 15 пикселей это разрещение 1200*800) как наиболее используемым разрешением.
Дальше 1280 это популярная ширина в разных разрешениях, как брекпойнт. Но уже без полей.
960 это из за одноименного фреймворка, где это число используется для фолбека на 1024*968 разрешение плюс поля, округление до нормального делительного числа.
Число 960(как и остальные перечисленные Вами) выбрано потому что удобно делить на колонки с полями. На 2/4/6/8/10/12/16/24
Берите ширину в зависимости о того, как будете верстать. А, ну и погодите, если Вы получаете готовый дизайн, то Вам не сильно получится "брать" какую то ширину контента, а придется работать с тем, что дали.
Опять же, будете ли пользовать фреймворки - тоже ограничит/упростит выбор ширины.
Забивать не надо. Если забили на ширину контента, то либо просто накалякали какую-то свою ширину, но все равно единую, либо вообще разброс по секциям/блокам. Вы вполне сможете потом свести всё до единой ширины, которую сами выбрали, если заказчик согласен и не требуется пиксель перфект по контентной области(обычно нет, и вполне обьясняется заказчику требованиями "соответствия для старых мониторов" или что то такое, после чего они соглашаются)
Зависит в основном от этого:
Вам наверное надо разобраться с сеткой, например для Bootstrap, и на её примере пилить свой велосипед, или просто ей воспользоваться
Мониторы бывают разные, одни узкие, другие широкие. Так вот пользуйся этим, используй пространство по максимуму. На широких можно показать всего больше, на узких прячь или перегруппировывай блоки, чтоб все было удобно и не было сжатых до непристойного блоков. Максимальную ширину сайта смело можешь фиксировать на том значении, при котором сайт продолжает смотреться годно и пользоваться им удобно. Для примера, вот тостер зафиксирован на 1440, для средних монитором норм, а на более широких можно было бы отобразить что-то еще на большом пустом пространстве по бокам.
Проблема №3 — Месенджер
Мессенджер в ВК появился сравнительно недавно. Первая его версия заметно выбивалась по стилю и со временем это решили. Основная проблема месенджера на мой взгляд это то, что он живет параллельно с сайтом. Окно переписки маленькое. И хоть оно и масштабируется, но оно привязано к абсолютным координатам — пользоваться сервисом не удобно. На Фейсбуке месенджер также живет отдельно от сайта, плодя при этом множество маленьких окон-переписок.
1. Физическое растяжение
Решение в лоб — делаем сайт резиновым.
Плюсы:
+ Легко реализовать
Минусы:
− Контент становится не читаемым
− Нужно полностью пересматривать некоторые разделы сайта (например, друзья)
4. Два окна
Интерфейс с двумя активными рабочими разделами на экране.
Плюсы:
+ Требует мало изменений в текущем интерфейсе
Минусы:
− Не ясно как работать с 2 режимами одновременно и зачем
Проблема №2 — Разный стиль веб-версии и приложений
6. Карточки
Переход от вертикального повествования в сторону сетки. Пример — Пинтерест.
Плюсы:
+ Легко масштабируется под любое разрешение
Минусы:
− Трудно воспринимать контент (трудно переучиваться)
− Нужно полностью пересматривать все разделы сайта
Детали за кадром
Если всмотреться в скриншоты, то видны и другие изменения в интерфейсе:
1. Фон. Появился фон для повышения контраста блоков.
2. Разделение на блоки. Посты расклеились на независимые блоки.
3. Лайки переехали вверх. Пожалуй самое спорное изменение и, вероятно, заслуживает отдельного обсуждения.
4. Пропало прежнее верхнее меню. Все его функции уже были задублированы в разделах сайта. На его место встал уровень вкладок. Таким образом удалось сократить один этаж навигации. Фильтры (редко используемая вещь) переехали в выпадающий список. Пропал еще один этаж навигации.
5. Два режима просмотра друзей. Один заимствован из веб-версии, другой из планшетной. Трудно оценить какой популярнее и удобнее.
6. Личные заметки. Появился блок личных заметок о каждом друге. Кому понравилось, берите тут — VK Memos.
7. Веб-звонки. Они уже были раньше в ВК, но были сделаны как отдельный режим работы. Сейчас это незаметная функция, не мешающая основному серфингу и общению.
Боль
2. Параллельное изложение
Прием был замечен в концепции редизайна Фейсбука 2006 года от iA — комментарии расположены справа от постов. 5 лет назад я опробовал его на одном из своих проектов.
Плюсы:
+ Посты располагаются линейно, не разрываясь комментариями
+ Комментарии к постам видны сразу без дополнительных переходов
Минусы:
− Неравномерная плотность информации на экране
− Версия под 1024пк с большим трудом может быть создана или вынуждена отличаться от широкой
− Нужно полностью пересматривать некоторые разделы сайта
Читайте также: