Обновленное руководство по размерам баннеров, заголовков и фотографий Twitter.

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

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

Изображение заголовка

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

Твиттер рекомендует загружать очень широкое изображение в качестве шапки. Их предполагаемые размеры 1500 х 500 ; 1500 пикселей в ширину и 500 пикселей в высоту. Просто, легко, конец истории, верно?

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

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

Во-первых, размер верхнего баннера не 1500 на 500. На самом деле он больше похож на 1263 на 421, если вы используете типичный широкоэкранный монитор. Это объясняет вертикальный и горизонтальный отступы, которые можно использовать в некоторых разрешениях. Если вы должны были проверить фоновый элемент и просмотреть изображение данного баннера, вы, как правило, увидите, по крайней мере, еще несколько вертикальных элементов сверху и снизу изображения.

Вы можете увидеть, как Twitter динамически настраивает изображение, если вы щелкнете и перетащите браузер, чтобы изменить его размер. Вы можете видеть, как при разных разрешениях изображение будет немного увеличиваться или уменьшаться; это настраивается с использованием доступного для него пространства. Как только вы сократитесь до достаточного размера, вместо этого вы получите полосу прокрутки.

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

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

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

Совет: используйте изображение гораздо большего размера! Twitter рекомендует минимум 1500×500. Вы не ограничены этим! Я часто загружаю изображения 1920 × 1080 и играю с масштабированием, горизонтальным и вертикальным позиционированием и кадрированием, чтобы расположить его именно там, где я хочу.

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

Фото профиля

Ваше фото профиля в эти дни представляет собой круг . Здесь Twitter рекомендует квадратное изображение размером 400×400 пикселей. Ваш дисплей будет представлять собой круг диаметром примерно 400 пикселей, но опять же, вы можете настроить изображение при его загрузке. Изображение размером 400 × 400 пикселей или изображение размером 2000 × 2000 пикселей получают одинаковые параметры масштабирования.

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

Масштабирование не безгранично. Вы можете увеличить изображение наружу, только если оно НЕ квадратное. Вы можете немного уменьшить масштаб, пока вертикальное или горизонтальное пространство не станет минимально доступным. В нескольких изображениях, которые я нашел, это примерно 80% масштабирование. Между тем, вы можете увеличить примерно на 150% или около того, возможно, до 200% идеально квадратного изображения, чтобы получить точное положение, которое вы хотите.

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

В данном случае мой совет сверху не очень применим. Вместо него у меня другой.

Совет: сделайте изображение немного больше, чем необходимо. Сделайте изображение логотипа от края до края размером 400 пикселей, затем добавьте отступ примерно по 50 пикселей с каждой стороны, сохраняя его квадратным. Таким образом, когда вы загружаете изображение, вы можете увеличить его достаточно, чтобы оставить достаточно места по краям, чтобы оно хорошо смотрелось с рамкой, но на самом деле не касаясь его. Небольшая тонкая настройка может быть полезной.

Размеры публикации изображения

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

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

Когда вы просто загружаете четыре изображения, они отображаются в том порядке, в котором вы их загружаете. Первое изображение является основным изображением, а оставшиеся одно, два или три являются заданными участками оставшегося пространства. Если вы загрузите только два изображения, они разделят одно и то же пространство 440 × 220 на два квадрата 220 × 220.

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

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

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

Советы по использованию изображений в Twitter

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

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

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

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

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

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

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

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

Когда вы публикуете изображение как часть твита, помните, что одно изображение лучше всего работает в формате почтового ящика. Вы можете создать изображение и использовать его для расширения текстового пространства. Используйте мягкий призыв к действию и описание из 280 символов, а изображение используйте как место для небольшого количества текста. Помните, Twitter — это не Facebook, и вы не получите отказ от публикации из-за того, что в ней слишком много текста.

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

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

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

Я обязательно обновлю этот пост, если замечу, что Twitter снова меняет свое поведение или размеры. Вернитесь, если вы думаете, что что-то не так, и оставьте комментарий, если я еще не заметил!