Оптимальный размер изображений для Facebook

Кто загружал аватар, обложку страницы или баннер в Facebook, уже наверняка не однажды грязно выругался, подбирая оптимальные размеры и наблюдая результат. Делюсь опытом, как и в какие размеры чего делать.

Несоответствие реальных размеров картинок на экране ихсодным макетам — не единственная беда Facebook. Ему этого мало, он еще и «пересжимает» изображения, показывая вместо отточенной картинки мутную муть. Поэтому не будет лишним загружать исходник размером в 1,5–2 раза больше, чем необходимый результат (тогда хоть прочитать мелкий текст еще реально, и размытие не настолько отталкивает, как могло бы).

Баннеры в ленте

Facebook имеет несколько форматов отображения потока информации — в зависимости от того, в какой ленте зритель находится: новостная лента своего аккаунта, страница бренда или лента чего-нибудь в незалогиненном состоянии. Во всех трех случаях пропорции блока с изображением разные, и как минимум в двух случаях зритель увидит картинку обрезанной по вертикали или горизонтали, что не есть хорошо, если вам нужно показать рекламный баннер так, чтобы все было видимым без клика на картинку. Опытным путем обнаружился оптимальный размер картинки для отображения в Facebook — квадратная картинка 403 пк. Но помня о пороках FB, рекомендую делать исходник в два раза больше. Таким образом, оптимальный размер исходника баннера — 806×806 пк.

Отображение баннера 806 пк на странице бренда в Facebook

Отображение того же баннера в ленте пользователя

Обложка страницы и аватар (фотография профиля) в Facebook

Подобная история творится с фотографией профиля и обложкой страницы. Особенный трэш — аватар: размер отображаемого квадратика — 160 пк, при этом при загрузке картинки Facebook требует исходник размером минимум 180 пк.

Отображаемая обложка страницы — 851×314 пк. В итоге, чтобы обложка и аватар выглядели прилично, лучше сделать исходники размерами 1702×628 пк (обложка) и 320×320 пк (фотография профиля).

Самый цимес — это готовить фотографию профиля и обложку страницы так, чтобы они смотрелись как единое целое. Например: