Текст
Родион Данилов
Подбор фотографий для социальных сетей - дело важное, хотя многие его недооценивают. Именно они представляют вас в сети, и именно глядя на них, большинство составляет самое первое впечатление о вас. Мы рассмотрели то, как можно оптимизировать фотографии в Facebook, Twitter и «ВКонтакте».
1 Facebook
При загрузке фотографий профайла в «Фейсбуке» они обрезаются в квадрат, поэтому лучше всего использовать изображение, которое уже имеет правильное соотношение сторон. Фото отображается на странице с размерами 160х160 пикселей, но загрузить вы должны картинку не менее 180х180 пикселей. Поэтому откройте фото в доступном для вас редакторе и задайте размеры 180х180 пикселей.
Размеры фотографии на обложке страницы «Фейсбука» - 851х315 пикселей, в то время как минимальный требуемый размер для неё составляет 399х150 пикселей. Стоит учитывать, что такая маленькая картинка растянется и будет выглядеть ужасно, поэтому подбирайте соответствующее фото и обрежьте его правильно.
Если вы задумали сделать так, чтобы обе картинки - фото профайла и обложка - представляли единое целое, учитывайте, что фото профайла встаёт на 23 пикселя правее от левого края обложки и на 210 пикселей ниже от верхнего края обложки.
Существует множество веб-сервисов, позволяющих сделать оригинальные обложки для вашей страницы в «Фейсбуке».
Pic Scatter даёт возможность создать коллаж из фотографий для использования его в качестве обложки. Вы можете сгенерировать его случайным образом или выбрать конкретный альбом.
Profile Picture Maker"s Timeline Cover Banner - довольно удобный инструмент для создания кастомной обложки со множеством функций для редактирования.
ace It Pages - бесплатный сервис позволяет загрузить свои картинки, «поиграть со шрифтами» и даже добавить в обложку ссылки на другие социальные сети.
Facebook поддерживает загрузку форматов JPG, GIF и PNG. JPEG, как правило, используется при загрузке картинок со смешанными тонами (фото и рисунки) , а PNG лучше подходит для графичных изображений, текстовых композиций и логотипов. Однако Facebook конвертирует все загружаемые изображения в JPG.
Чтобы фотографии загружались на странице быстрее, разработчики соцсети советуют использовать JPG-файлы в цветовом пространстве sRGB. Рекомендуемые размеры для загружаемых в альбом фотографий - 600х400 пикселей. При изменении размера в фоторедакторе выставьте разрешение (DPI) в значении 72.
2 Twitter
Twitter отображает профайл-фото совсем небольшим, поэтому очень важно подобрать то изображение, которое хорошо выглядит в миниатюре. Twitter кадрирует фотографию квадратом, так что лучше масштабировать её перед загрузкой надлежащим образом. В то время как максимальный размер файла для аватара в Twitter составляет 2 МБ, в профайле отобразится картинка размером 73х73 пикселя, и а в твитах и того меньше - 48х48 пикселей.
Изображение, которое используется в Twitter в качестве обложки, имеет рекомендованный масштаб 1200х600 пикселей, а размер файла ограничен 5 мегабайтами. Имейте в виду, что ваше имя в Twitter, никнейм, биография, месторасположение и URL будет отображаться поверх обложки, поэтому выбирайте картинку, на которой будет хорошо виден текст.
Для того чтобы сделать идеальную обложку, сочетающуюся с профайл-фото, вы можете использовать специальный веб-инструмент, например,
Вконтакте довольно сильно портит качество загружаемых фотографий. В некоторых случаях это особенно заметно (например, при загрузке очень большого изображения). Я даже размещал примеры того, как были испорчены некоторые фотографии. Возможно, некоторым пользователям это не заметно, но наметанный глаз свадебного фотографа , или просто внимательного человека видит две разные фотографии. Итак, как с этим бороться? До недавнего времени я просто менял размер фотографии, однако, периодически все равно замечал, пусть не такое значительное, но все же ухудшение качества фото. Почитав о данной проблеме в интернете, почерпнул интересную методику, которой (слегка улучшенной) поделюсь с вами.
Итак, у нас есть большое и красивое фото. Сразу оговорюсь, пишу только для тех, у кого есть фотошоп - как делать подобные операции в других редакторах, я не интересовался, но принцип должен быть тот же. Как же нам выложить это фото вконтакт так, чтобы прямые линии не стали зубчатыми, а цвета остались такими, какими мы их видим? Если вкратце, то тут есть три момента:
1) Сильно увеличиваем резкость фотографии. В полноразмерном виде фотография должна стать даже слишком резкой, перешарпленной, но после уменьшения резкость придет в норму.
2) Хитрым образом уменьшаем размер фото до того, который любит контактик (1024 по высоте для вертикальных фото, и 1280 по ширине для горизонтальных).
3) Сохраняем не менее хитрым образом, так, чтобы фото не содержало лишней информации, было в цветовом пространстве sRGB и было оптимального качества.
Теперь подробнее. Для примера я взял свою фотографию с красивой lovestory-фотосессии в заброшенной усадьбе.
1. Открываем фото в фотошопе.
2. Создаем дубликат слоя, применяем к нему фильтр - другое - цветовой контраст с радиусом примерно 3 пикселя. Затем выставляем слой в режим "Перекрытие" и делаем сведение. Таким образом, мы увеличили резкость фотографии.
3. Выбираем пункт Изображение -> размер изображения.
4. Выставляем: Для горизонтального изображения - ширину 1920, для вертикального - высоту 1536 (размеры в полтора раза больше конечных), ресамплинг - Бикубическая, с уменьшением (в других версиях фотошопа - Бикубическая, четче), применяем.
5. Выбираем пункт Изображение -> размер изображения.
6. Выставляем: Для горизонтального изображения - ширину 1280, для вертикального - высоту 1024, ресамплинг - Бикубическая, плавные градиенты (в других версиях фотошопа - Бикубическая, наилучшая для плавных градиентов), применяем.
Полученный файл и загружаем в контакт. В результате, потери качества будут минимальны, а цвета будут соответствовать тому, что вы видели на своем мониторе. Я думаю, что данная методика подходит не только для вконтакте, но и для других социальных сетей, и просто передачи файлов через интернет, потому что в результате вы получаете изображение оптимального веса, размера и четкости, которое будет одинаково отображаться в любом цветовом пространстве (т.е. на любом компьютере).
P.S. Вот что пишет поддержка вконтакте по этому поводу:
Качество фотографий при загрузке портится, что делать?
Чтобы минимизировать визуальные потери качества, лучше загружать снимки поменьше (до 1000 пикселей по любой из сторон) и перед загрузкой чуть увеличивать их резкость. Кроме того, лучше не нажимать на строчку «Добавить новые фотографии», а перетаскивать на неё снимок прямо из папки компьютера.
Есть и ещё одна важная деталь: наш загрузчик недолюбливает цветовой профиль Adobe RGB, поэтому перед загрузкой лучше преобразовать картинку для Web. Алгоритм действий такой: в Photoshop"е нужно выбрать «Сохранить для WEB» (Alt+Shift+Ctrl+S), затем редактировать настройки качества и непременно отметить «Конвертировать в sRGB».
Самые ценные снимки стоит загружать в раздел документов -
Известно, что пользователи загружают огромное количество фотографий в социальные сети. Загруженные в соц. сети изображения "сжимаются" определённым образом. Процесс сжатия изображений требуется для того, чтобы уменьшить занимаемое ими место на серверах. Большое сжатие несёт за собой искажения, которые мы можем наблюдать в соц. сетях при просмотре загруженных изображений.
Сегодня социальная сеть Вконтакте предоставляет возможность загружать неограниченное количество изображений. И больше всего недостатки таких загруженных изображений заметны со стороны изменения резкости этих изображений. Однако, у соц. сети Вконтакте существует одна особенность - изображения сжимаются в зависимости от способа их загрузки.
Соц. сеть Вконтакте имеет два типа загрузчиков: Flash загрузчик и HTML5 загрузчик.
Наличие двух способов загрузки изображений предоставляет возможность пользователям выбирать качество загружаемых изображений Вконтакте.
В этой статье мы поговорим об отличиях Flash и HTML5 загрузчиков. Также будет рассказано, как и когда использовать определённый загрузчик.
Flash загрузчик
Flash загрузчик представляет собой "быструю загрузку фотографий". К примеру, если у вас имеется огромное количество фотографий с вашего отдыха, большая часть из которых претендует на загрузку. Логично было бы сделать, чтобы загрузка таких фотографий в социальную сеть происходила наиболее быстрым способом. Такой способ заключается в сжатие фотографий -
уменьшение качества и разрешения изображений (следовательно уменьшается объём изображений).
Вконтакте, при использовании Flash загрузчика, сжатие происходит, если фотография имеет разрешение больше чем 1280x1024 пикселей (по длине или по ширине). Сжатая в соц. сети фотография будет меньшего объёма и разрешения, чем её оригинал, а также худшего качества, чем у оригинальной фотографии.
У фотографий, загруженных Вконтакте может возникать такой эффект, как повышение или понижение резкости
. Изменение резкости связано с некорректным изменением разрешения исходной фотографии и оптимизации её качества.
К примеру, после загрузки больших изображений (около 5000x3000 пикселей) резкости бывает недостаточно и вам кажется, что изображение имеет плохое качество. А у более малых изображений (1920x1080 пикселей) резкости становится больше, чем хотелось бы видеть. Понятно, что такие изменения вызваны сжатием загруженных фотографий.
Сжатие при использовании Flash загрузчика происходит не всегда.
Если разрешение вашей фотографии не превышает 1280х1024 пикселей (одновременно и по длине и по ширине), то сжатия происходить не будет, следовательно, вместе с этим и резкость останется прежней.
С помощью Flash загрузчика фотографии можно загрузить следующим образом:
В этом случае будет задействован Flash загрузчик. Загруженные изображения с разрешением по одной из сторон выше чем 1280х1024 пикселей будут уменьшены до разрешения
1280х1024 (по большей стороне). Также немного ухудшится качество изображений и изменится их резкость.
На самом деле, для вас всё это не сыграет большой роли, если вы загружаете фотографии без творческих намерений или для того, чтобы просто показать друзьям. Иными словами, если вы используете социальную сеть Вконтакте по её изначальному "назначению".
Важно помнить, что из-за плохого качества уменьшенной копии фотографии, она может восприниматься зрителем не так, как хотел того автор. Такие случаи в социальных сетях происходят достаточно часто, так как большинство фотографий просматриваются пользователями быстрым "пролистыванием". Многие пользователи вообще могут не догадываться о том, что фотография, на самом деле, существует в более высоком разрешении, чем они видят её, в уменьшенном варианте при просмотре Вконтакте.
Когда мы "загрузим оригинал" подобной фотографии из соц. сети, себе на диск, то увидим, что фотография, загруженная помощью Flash загрузчика в соц. сеть имеет такое же небольшое разрешение, какое она имеет при увеличенном просмотре в окне соц.сети Вконтакте (не больше, чем 1280x1024 пикселей).
HTML5 загрузчик
Если вы хотите осуществить загрузку фотографий в соц. сеть Вконтакте без изменения исходного разрешения и качества, то для вас есть HTML5 загрузчик.
Если загружать фотографии с помощью HTML5 загрузчика, то разрешение таких фотографий после загрузки не измениться. Иными словами, вы сможете загрузить ваши фотографии обратно себе на компьютер в формате JPEG (или на другое устройство) из соц. сети в том же разрешении, в каком они были до загрузки в соц. сеть.
К сожалению, у HTML5 загрузчика тоже существуют свои ограничения.
Самая крупная при использовании HTML5 загрузчика фотография не должна превышать разрешение 2560x2048 пикселей.
Если фотография будет больше, чем 2560x2048 пикселей, она будет уменьшена в разрешении до 2560x2048 пикселей (по большей стороне). Сжатие таких изображений влечёт за собой небольшие изменения резкости. Такие изменения резкости будут меньше, чем в случае c Flash загрузчиком.
На сегодняшний день сервис Вконтакте позволяет осуществить загрузку фотографий в соц. сеть с помощью HTML5 загрузчика следующим способом.
Вам нужно зайти в раздел "Мои фотографии" (Рис 1),
в открывшейся категории вы увидите надпись "Добавить новые фотографии" как на (Рис. 2)
. Вам нужно перетащить вручную курсором мыши из проводника выделенные вами фотографии прямо на панель "Добавить новые фотографии" как на Анимации 1
(если загрузка не происходит, попробуйте создать альбом и загрузить изображения в него таким же способом)
.
Теперь все выделенные фотографии появятся в списке загрузки фотографий. Фотографии будут загружаться на порядок медленнее, чем при использовании Flash загрузчика.
Если вы не очень хорошо владеете операционной системой, установленной на вашем компьютере, то можете осуществить данный метод, к примеру, открыв стандартный проводник Windows поверх окна браузера. Располагайте окна так, чтобы вам было удобно перетаскивать выделенные фотографии (Анимация 1) .
| Анимация 1 |
Также HTML5 загрузчик работает, когда вы используется функцию прикрепления фотографий Вконтакте. Например, при загрузке фотографий в диалог или прикреплении изображений в службу поддержки.
|
| Рис. 4 |
Теперь, если вы откроете изображение на вашем устройстве, вы сможете оценить его качество и разрешение, с которым изображение находиться в соц. сети Вконтакте.
Подведём итог
HTML5 загрузчик:
- изображения, имеющие разрешение больше чем 2560x2048 пикселей, уменьшаются до разрешения 2560x2048 пикселей (по большей стороне), при этом произойдёт незначительное (при просмотре Вконтакте) изменение резкости и небольшая потеря качества;
- изображения загружаются обратно из соц. сети на диск в "новом" уменьшенном разрешении, если изначально их разрешение было больше чем 2560x2048 пикселей.
Теперь мы можем дать точный ответ на вопрос:
- Нужно использовать HTML5 загрузчик.
- Разрешение фотографий не должно превосходить 2560x2048 пикселей (по любой из сторон).
В современном мире уже мало кто обходится без соцсетей. Миллионы и миллиарды фотографий ежедневно заливаются в бездонную пучину Интернета со множества устройств. Новости о себе и друзьях, интересных поездках, вкусных обедах и романтических ужинах... Для большинства пользователей этого достаточно. Для фотографа же крайне важным является качество загружаемого контента (в определенной мере это подтверждение его профессионализма). В каждую фотографию вложены душа, силы, деньги и время - поэтому потери в качестве при загрузке изображения особенно обидны.
Эта статья посвящена нюансам подготовки фотографий для публикации в самых популярных социальных сетях. Поговорим про оптимальные размеры файлов, особенности просмотра на различных устройствах и алгоритмы поднятия резкости для наилучшего качества после загрузки.
Изменение размеров изображения
Перед тем, как приступить к описанию «размеров для соцсетей», следует сразу прояснить один момент. Он очень простой, но для многих неочевидный, поэтому часто возникает путаница.
В диалоговом окне Image (Изображение) → Image Size (Размер изображения) представлены два способа задания размера изображения:
1) через изменение размера отпечатка и задание желаемого разрешения DPI (а точнее PPI) - точек или пикселей на дюйм или сантиметр отпечатка;
2) через изменение размера в пикселях (стандартный для большинства пользователей) - именно им нужно пользоваться в данном случае .
Первый вариант, по большому счету, необходим только дизайнерам при подготовке макетов печатной продукции. Если знать точный технический размер отпечатка и разрешение печатной машины, фотошоп автоматически рассчитает пиксельный размер изображения таким образом, что машина напечатает его в оптимальном разрешении. Это помогает избежать аппаратного изменения размера, которое может привести к потере четкости текста и графических объектов.
Второй вариант подходит для тех, кто изначально работает с фотографией (т.е. растровой графикой), когда первоначальный размер изображения изначально равен максимально возможному (зависит от разрешения матрицы фотоаппарата или настроек и модели сканера). Про подготовку фотографий к печати сейчас говорить не будем, важно понять, что при подготовке изображения для публикации в интернет или просмотре на мониторах разрешение DPI (PPI) вообще ни на что не влияет . Поэтому размер картинки в этих случаях задается исключительно в пикселях.
Не стоит выбирать размер, меньший максимально допустимого соцсетью , опираясь на отображение на мониторе конкретной модели. Например, фотография с размером в 1000px по высоте, загруженная в Вконтакте, будет без искажений отображаться на мониторах с разрешением 1920 х 1200 (то есть без изменения размера браузером). На мониторах же со стандартным разрешением Full HD 1920 x 1080 она уже будет сжиматься браузером, что приведет к потере четкости. С учетом того, что коэффициент изменения размера будет небольшим, потеря качества и детализации окажутся весьма ощутимыми.
Стоит отметить также, что потеря качества при повторном пережатии JPG сервером соцсети для изображений маленького размера будет визуально более очевидной, нежели для крупных изображений.
Впрочем, в вопросе выбора размера важно не перестараться. Если размер изображения больше максимально допустимого соцсетью , при загрузке сервер соцсети сам уменьшит фотографию и сделает это по самому быстрому алгоритму. Разумеется, в этом случае не последует необходимого при любом изменении размера поднятия резкости, которое сделал бы фотограф вручную. Исключением является, разве что, Instagram, в котором обработка изображения перед загрузкой производится не сервером, а смартфоном пользователя, и уменьшение снимка учитывает связанную с этим потерю детализации.
Оптимальные размеры для загрузки фотографий в соцсети
ВКонтакте
После перехода на новый дизайн ВКонтакте больше не требует дополнительных ухищрений (метод «перетаскивания») со стороны пользователя для загрузки фотографий в максимально допустимом размере.
Он составляет 2560 пикселей по горизонтали и 2160 - по вертикали.
Максимально допустимый размер составляет 2048 пикселей по большей стороне.
С того момента, как Instagram отошел от принудительной «квадратизации», произошла небольшая путаница. В ней мы сейчас и разберемся.
Размер по горизонтали всегда равен 1080 px. При этом:
Стандартные «квадраты» загружаются в размере 1080 x 1080 px.
Горизонтальные фотографии могут иметь соотношение сторон 1:1,9 (Вертикаль:Горизонталь), то есть, нечто близкое к 1080 x 568 px, или быть более близкими к квадрату (2:3, 3:4, 4:5, 5:7 и т.п.). Так что все, кто не собирается выкладывать в Instagram панорамы, тут могут вздохнуть спокойно.
Вертикальные изображения ограничены соотношением сторон 4:5, что в пикселях будет означать 1080 х 1350. Таким образом, при загрузке фотографий с камер с соотношением сторон 2:3 будет происходить обрезка. Чтобы этого избежать, необходимо заранее добавить поля.
Для вашего удобства предлагаю скачать операцию, автоматизирующую работы по созданию полей и необходимому поднятию резкости при подготовке вертикальных фотографий для загрузки в Instagram. Для корректного скачивания необходимо кликнуть на ссылку правой кнопкой мыши и выбрать «Сохранить как...».
Fashionbank
Этот горячо любимый фотографами сайт нельзя в полной мере назвать соцсетью, но и обижать исключать из списка его, пожалуй, тоже не стоит.
Для загрузки на Fashionbank разрешены фотографии размером до 800 px по горизонтали. Вертикальный размер при этом может быть любым, но «вес» файла при этом не должен превышать 1 Мб.
Поднятие резкости
После изменения размера изображения необходимо поднять резкость. Насколько сильно и каким способом - зависит исключительно от вкуса фотографа и размера исходной фотографии. Поэтому уместными считаю лишь общие рекомендации.
Fashionbank
Размеры фотографий, используемые при публикации на Fashionbank, наиболее близки к размерам, применяемым при стандартной подготовке фото «для web». Поэтому в качестве примера первыми рассмотрим параметры поднятия резкости, рекомендуемые для подготовки изображений на этот сайт, а затем адаптируем их для других соцсетей.
В общем случае для поднятия резкости можно воспользоваться стандартным фильтром Filter → Unsharp Mask (Контурная резкость) со следующими параметрами:
- Amount (Сила воздействия) = 65-150%,
- Radius (Радиус) = 0.3 (это минимальный параметр радиуса, воздействующий на всю фотографию),
- Threshold (Изогелия) = 0.
Если же хочется добиться «звенящей» резкости , алгоритм можно дополнить повторным применением фильтра Unsharp Mask (Контурная резкость), но уже с другими параметрами:
Таким образом, для ВКонтакте и Facebook наилучшим способом поднятия резкости будет точно такой же алгоритм, который был описан выше в варианте для Fashionbank, с теми же значениями, но примененный два раза подряд .
Повышение резкости для Инстаграм может осуществляться как непосредственно в приложении, так и при предварительной подготовке в Photoshop.
Во втором случае резкость повышается по тому же принципу, что и при подготовке фото «для Web»/Fashionbank. Также повышение резкости для Инстаграм включено в операцию изменения размеров изображения для этой соцсети .
Цветовой профиль
Если ретушь производится в цветовом пространстве, отличном от sRGB, перед сохранением фотографии необходимо преобразовать цвета в стандартный цветовой профиль - sRGB IEC61966-2.1.
Сделать это можно, воспользовавшись командой Edit (Редактирование) → Convert to Profile (Преобразовать в профиль).
При этом выбираются следующие параметры: Engine (Движок) – Adobe, Intent (Алгоритм пересчета цветов) – Perceptual (Перцептуальный) или Relative Colorimetric (Относительная колориметрия), все галочки, которые возможно проставить - проставлены.
Сохранение
Сохранение происходит в стандартном режиме через меню File → Save As (Сохранить как).
Формат файла JPEG, Quality (Качество) = 12 (максимальное), Алгоритм – Baseline Optimized (Оптимизированный).
Вот, пожалуй, и все. Надеюсь, советы оказались полезными. Забирайте, используйте, делитесь в соцсетях и пусть фраза «контакт портит фотографии» забудется, как страшный сон:)
© Стив Ласмин, июль 2017.
© Фотошкола Михаила Панина, 2017.
Если Вам понравился этот материал, то мы будем рады, если Вы поделитесь им со своими друзьями в социальной сети: