Загрузите пейзажную фотографию в пост в Instagram, высокую фотографию телефона в качестве изображения ссылки LinkedIn или снимок экрана в X, и платформа тихо решает, какую ее часть видят люди. Она подходит к изображению одной из немногих фиксированных форм и обрезает все, что не подходит, и обрезает его посередине наружу. Если объект находится посередине, это работает. Если объект представляет собой лицо в верхней части кадра, продукт слева или заголовок внизу, платформа обрезает его.
Исправление заключается в том, чтобы обрезать изображение самостоятельно, до точной формы, которую хочет корма, и выбрать, какая часть выживает. Это руководство охватывает размеры и соотношения сторон, которые отображают основные платформы, геометрию урожая, как выбрать фокусную точку, что обрезка делает с качеством и размером файла, и как избежать мягкого, масштабированного результата, который ловит людей. обработанные примеры используют бесплатное Обманщик изображений в социальных сетях на Toolz, который выполняет всю работу на стороне клиента.
TL;DR: Чтобы обрезать изображение для социальных сетей, выберите целевое соотношение сторон платформы и размещения (например, 1080 x 1350 для портретного поста в Instagram, 1200 x 630 для предварительного просмотра ссылки, 1600 x 900 для изображения сообщения X), возьмите самую большую область этой формы, которая помещается внутри вашей фотографии, закрепите ее на той части, которая имеет значение, затем масштабируйте ее до точного размера пикселя. Фотография телефона 4032 x 3024, обрезанная до 4:5, сохраняет 60% ее площади; обрезанная до 16:9, она сохраняет 75%. обрезчик изображений в социальных сетях делает это на холсте в браузере с фокальной сеткой из девяти точек, бесплатно, без регистрации, без загрузки.
Что делает обрезчик изображений в социальных сетях?
Обрезчик изображений в социальных сетях разрезает фотографию до соотношения сторон, которое отображает платформа, и масштабирует ее до размера пикселя платформы & #39;s, поэтому платформе больше нечего обрезать. Происходят две отдельные операции, и это помогает держать их отдельно:
- Культура. Выберите прямоугольник внутри оригинала, который имеет целевую форму Пиксели снаружи отбрасываются Пиксели внутри него нетронуты.
- Масштаб. Измените размер этого прямоугольника до целевых размеров, например 1080 x 1350. Здесь качество может измениться, поскольку изображение подвергается повторной выборке.
Общий редактор изображений может сделать и то, и другое, но он заставляет вас найти соотношение, нарисовать коробку вручную и запомнить размер вывода. выделенный обрезчик знает размеры, автоматически рисует самый большой допустимый ящик и позволяет перемещать его одним щелчком мыши. Версия Toolz также сообщает вам, сколько стоит урожай перед загрузкой: сколько изначальной площади сохранилось и был ли результат уменьшен или увеличен.
Какие размеры изображений используют основные платформы?
Каждая сеть отображает изображения фидов с небольшим набором соотношений сторон, и все остальное подогнано к ближайшему. в таблице перечислены 15 целевых размеров, встроенных в обрезчик, которые отражают то, что каждая платформа в настоящее время отображает без повторного обрезки. Платформы время от времени пересматривают их, поэтому рассматривайте их как текущее руководство, а не как постоянную спецификацию.
| площадка | Размещение | Размер пикселя | Соотношение сторон | где он используется |
|---|---|---|---|---|
| Инстаграм | Квадратный пост | 1080 х 1080 | 1:1 | Классический пост подачи |
| Инстаграм | Портретный пост | 1080 х 1350 | 4:5 | Самый высокий уровень, который позволяет лента, большая часть места на экране |
| Инстаграм | Пейзажный пост | 1080 х 566 | 1.91:1 | Шире всего корм принимает |
| Инстаграм | История или Катушка | 1080 х 1920 | 9:16 | Полноэкранный; держите текст свободным от верхнего и нижнего 250 шт |
| Нити | Квадратный пост | 1080 х 1080 | 1:1 | Показано необрезанным на временной шкале |
| Нити | Портретный пост | 1080 х 1350 | 4:5 | Самые высокие нити отображаются без обрезки |
| Блюский | Образ ленты | 1200 х 630 | 1,90:1 | Широкие изображения тянутся к 1,91:1 |
| Блюский | Квадратное изображение | 1080 х 1080 | 1:1 | Показан необрезанным |
| Х | Пост-изображение | 1600 х 900 | 16:9 | Показан полностью без крана |
| Х | Сводная карточка | 1200 х 628 | 1.91:1 | Карта предварительного просмотра большой ссылки |
| фейсбук | Кормовой пост | 1200 х 630 | 1,90:1 | Также размер Open Graph |
| Кормовой пост | 1200 х 627 | 1.91:1 | Стандарт каналов LinkedIn | |
| Ютуб | миниатюра | 1280 х 720 | 16:9 | Минимум 1280 в ширину для HD-плеера |
| Пинтерест | Стандартный штифт | 1000 х 1500 | 2:3 | Более высокие штифты понижены в рейтинге |
| Open Graph | Предварительный просмотр ссылки | 1200 х 630 | 1,90:1 | Карта по умолчанию, которую рендерингуют большинство сайтов и приложений чата |
Выделяются две вещи. & quot;1.91:1 & quot; семейство (1200 x 630, 1200 x 628, 1200 x 627, 1080 x 566) - это одна форма с немного другим округлением, и это форма почти каждого предварительного просмотра ссылки в сети. Это восходит к Open Graph протокол, который определяет og:image сайты тегов используют для предоставления изображения предварительного просмотра. И высокие форматы различаются: Instagram и Threads останавливаются на 4:5, Pinterest - на 2:3, а Stories - на 9:16. Одна культура не обслуживает их всех.
Если вы также устанавливаете изображение предварительного просмотра веб-страницы, Open Graph инструмент предварительного просмотра показывает, как это изображение 1200 x 630 будет выглядеть после того, как оно будет опубликовано.
Как рассчитывается прямоугольник урожая?
Культура является самым большим прямоугольником целевой формы, который помещается внутри исходного изображения, Если изображение шире, чем целевая форма, культура сохраняет полный рост и обрезает стороны Если он выше, урожай сохраняет всю ширину и обрезает верх и низ.
В цифрах для источника ширины W и высоты H и целевого отношения R (ширина, деленная на высоту):
if W / H > R: crop width = H x R, crop height = H (trim the sides)
else: crop width = W, crop height = W / R (trim top and bottom)
Обработанный пример 1: фотография телефона 4032 x 3024 на портретный пост в Instagram.
- Соотношение источников: 4032 /3024 = 1,333. Целевое соотношение: 1080 /1350 = 0,8.
- Источник шире, поэтому урожай сохраняет полную высоту 3024 пкс.
- Ширина урожая: 3024 х 0,8 = 2419,2 шт.
- Сохраненная площадь: 2419,2/4032 = 0,60, поэтому 60% фотографии сохранилось, а 40% обрезано по бокам.
- Затем урожай масштабируют примерно с 2419 x 3024 до 1080 x 1350.
Обработанный пример 2: та же фотография на изображении X-поста.
- Целевое соотношение: 1600 / 900 = 1,778. соотношение источников 1,333 меньше, поэтому урожай сохраняет полную ширину 4032 px.
- Высота урожая: 4032 /1,778 = 2268 шт.
- Сохраненная площадь: 2268/3024 = 0,75, поэтому 75% выживают, при этом 756 пикселей обрезаются с высоты.
Обработанный пример 3: та же фотография на значок Pinterest.
- Целевое соотношение: 1000 /1500 = 0,667. Ширина урожая: 3024 x 0,667 = 2016 px.
- Сохраненная площадь: 2016 /4032 = 50%. идет половина фотографии.
Эти проценты - это то, что инструмент сообщает как & quot;Keeping 60% от оригинала & quot;, и они стоят того, чтобы прочитать, прежде чем вы зафиксируете. обрезка, которая сохраняет половину кадра, является решением композиции, а не шагом форматирования.
Как выбрать, какую часть изображения оставить себе?
Выберите фокус, который удерживает объект, и помните, что это имеет значение только вдоль обрезаемой оси. Девятиточечная сетка Cropper's устанавливает фокус 0, 0,5 или 1 поперек каждой оси, который закрепляет урожай на левом крае, центре или правом крае горизонтально, а также наверху, середине или внизу вертикально.
Положение определяется следующим образом, затем зажимается, чтобы урожай никогда не выбегал из изображения:
crop x = focusX x W - cropWidth / 2 (clamped between 0 and W - cropWidth)
crop y = focusY x H - cropHeight / 2 (clamped between 0 and H - cropHeight)
В обработанном примере 1 обрезаются только боковые стороны, поэтому только горизонтальный выбор что-либо меняет:
| Якорная колонна | Культура х | Сохранил столбцы фотографии |
|---|---|---|
| Левый | 0 | от 0 до 2419 |
| Центр | 806,4 | с 806 по 3226 |
| Правый | 1612,8 | 1613-4032 гг. |
Верхний, средний и нижний ряды дают одинаковые результаты для этой культуры, потому что полная высота уже сохранена. Это полезная проверка, когда щелчок кажется ничего не делающим: урожай может свободно двигаться только в одном направлении.
Рабочий пример 4: портретная фотография телефона в виде изображения в LinkedIn. Фотография 3024 x 4032 обрезана до 1200 x 627 (соотношение 1,914) сохраняет полную ширину и полосу 3024 /1,914 = 1580 px высотой. Это 1580 /4032 = 39% от фото. С центральным якорем по умолчанию полоса проходит от y = 1226 до y = 2806, что на типичном портрете головы и плеч - грудь, а не лицо. Нажатие верхнего центра перемещает полосу на y = 0 до 1580 и удерживает голову. в этом случае существует фокальная сетка: центрирование является разумным по умолчанию, а неправильный ответ для большинства портретов превращается в баннеры.
Несколько эмпирических правил выбора якоря:
- Люди: верхний ряд, так как лица обычно располагаются в верхней трети кадра.
- Заголовки или подписи, запеченные в графике: строка или столбец, в котором находится текст.
- Продукты и смещенные от центра предметы: соответствующий угол или сторона.
- Симметричные сцены и центрированные логотипы: оставьте его в центре.
Уменьшит ли обрезка качество изображения?
Обрезка сама по себе не снижает качество, но шаг масштабирования может. Отбрасывание пикселей за пределы кадра оставляет оставшиеся пиксели точно такими, какими они были. изменение размера до целевого размера - это то, где результат может улучшиться или ухудшиться.
Масштабирование вниз безопасно и часто делает фотографию более четкой, поскольку несколько исходных пикселей усредняются в каждый выходной пиксель. обрезчик рисует с помощью настройки высокого качества сглаживания холста и #39;s, используя drawImage метод, определенный в Спецификация холста WHATWG HTML. Масштабирование не может добавить детали, которые никогда не были зафиксированы. Выход становится больше, но не острее, а края выглядят мягкими.
Обработанный пример 5: увеличенный снимок экрана. Скриншот размером 800 x 600, обрезанный для изображения X post, сохраняет полную ширину 800 px и полосу высотой 450 px, 75% площади.That 800 x 450 область затем увеличивается до 1600 x 900, вдвое больше в каждом направлении. инструмент говорит так под предварительным просмотром: "Upscaled - источник меньше цели, поэтому он будет выглядеть мягко."
Быстрый тест, чтобы сравнить ширину обрезки с целевой шириной, Если обрезка шире, чем цель, изображение уменьшается масштабируется и будет выглядеть нормально, Если он уже, он увеличивается Для фотографий, телефонная камера почти всегда имеет пиксели, чтобы запасные Скриншоты, старые изображения и картинки, сохраненные с других постов, являются обычными масштабирования случаев, и единственным реальным исправлением является более крупный источник.
Стоит ли экспортировать PNG, JPEG или WebP?
Экспорт JPEG для фотографий, PNG для скриншотов, текста и графики с жесткими краями, и WebP, когда вы хотите самый маленький файл и знаете пункт назначения принимает его. обрезчик по умолчанию PNG, потому что он без потерь, и предлагает все три.
| формат | Сжатие | лучше для | остерегаться |
|---|---|---|---|
| png | Без потерь, как указано в Стандарт W3C PNG | Скриншоты, пользовательский интерфейс, текст, логотипы, прозрачность | Большие файлы для фотографий |
| неправильный | Потеря, метод в МСЭ-Т Т.81 | Фотографии | Ореолы вокруг резкого текста и строк; нет прозрачности |
| webp | Потери или без потерь, описанные в Документация Google's WebP | Наименьшие файлы аналогичного качества | Несколько старых инструментов не могут его открыть |
Экспортные JPEG и WebP используют настройку качества 0.92 на брезентовом кодере, которая достаточно высока, чтобы артефакты сжатия было трудно увидеть на фотографиях. загруженный файл назван в честь оригинала плюс предустановка, так что team.jpg обрезано для портретного поста в Instagram, поскольку JPEG сохраняет как team-ig-portrait.jpeg, йо-
Большинство платформ в любом случае повторно кодируют то, что вы загружаете, поэтому PNG фотографии без потерь не сохраняется, как PNG после публикации. В основном это добавляет размер загрузки. Для более глубокого выбора форматов Руководство по конвертеру формата изображения сравнивает их в большем количестве случаев использования.
Шаг за шагом: обрезка изображения инструментом
выше обрезчик изображений для социальных сетей имеет четыре шага, а холст предварительного просмотра - это тот же холст, который создает файл, поэтому вы одобряете то, что загружаете.
- Добавить изображение. Бросьте файл, нажмите, чтобы выбрать один, или вставить изображение из буфера обмена с помощью Cmd+V или Ctrl+V. Слушатель вставки находится на всей странице, поэтому скриншот, скопированный в буфер обмена, сразу входит, не сохраняясь первым. Зона высадки принимает PNG, JPEG, WebP, GIF или AVIF или все остальное, что ваш браузер может декодировать.
- Выберите целевой размер. Меню размера Target группирует 15 предустановок по платформам, каждый из которых помечен размером и соотношением пикселей, и показывает однострочную заметку о том, где используется размер. по умолчанию используется портретный пост в Instagram.
- Выбирайте, что оставить. Нажмите одну из девяти точек сетки Keep. предварительный просмотр немедленно перерисовывается.
- Проверьте номера и скачайте. Под предварительным просмотром прочтите строку, в которой указан процент сохранности, размеры урожая и уменьшен или увеличен результат. Выберите PNG, JPEG или WebP и нажмите "Загрузить".
Все работает на холсте HTML во вкладке браузера Изображение не загружается, не хранится и не регистрируется, и страница продолжает работать с сетью выключен Как и каждый инструмент на сайте, шаг загрузки проверяет ежедневный лимит использования.
На какие ошибки можно нарваться?
Большинство проблем исходит из формата файла или из размера источника. сообщения специфичны.
- "Этот файл не является image." Тип файла's не начинается с
image/, например PDF или видео. в сообщении указан файл. - "Это изображение не удалось прочитать. оно может быть повреждено или в формате этот браузер не декодирует." Файл утверждает, что является изображением, но браузер не может его декодировать. Распространенным случаем является фотография iPhone HEIC в браузере без поддержки HEIC. Сначала преобразуйте его в JPG с помощью преобразователь формата изображения, йо-
- "Upscaled - источник меньше целевого, поэтому он будет выглядеть soft." Не ошибка, предупреждение. используйте оригинал большего размера, если он у вас есть.
- Фокальная сетка, кажется, ничего не делает. Урожай подрезается только по одной оси, поэтому его перемещают только анкеры по этой оси.
- Дневной лимит достигнут. Была использована бесплатная суточная норма.
Стоит знать еще один эффект. поскольку выходные данные перекодируются из пикселей холста, загруженный файл не содержит метаданных EXIF: никаких настроек камеры, даты захвата или местоположения GPS. Для фотографий, опубликованных публично, это обычно выигрыш в конфиденциальности.The Руководство по удалению EXIF объясняет, что содержат эти метаданные и почему они важны при обмене фотографиями.
Посеять, изменить размер или поместить на фон?
Обрезка - один из трех способов придать изображению фиксированную форму, и правильный зависит от того, сможете ли вы позволить себе потерять какую-либо картинку.
| подход | Что происходит | Когда использовать его | стрелка |
|---|---|---|---|
| Культура к соотношению | Обрезает края, сохраняет форму точной | Объект является частью рамы, и края могут исчезнуть | Обманщик изображений в социальных сетях |
| Поместиться на матовый | Сжимает все изображение на цветном или размытом фоне | Ничего нельзя вырезать, например, иллюстрацию или групповую фотографию | Матовый Генератор |
| Изменить только | Изменяет размеры пикселей, сохраняет исходное соотношение | Соотношение уже правильное, или платформа принимает любую форму | Изменение размера изображения |
| Разделить на слайды | Разрезает широкое изображение на последовательных карусельных слайдах | Панорама слишком широкая для одного поста | Генератор прокрутки карусели |
Если проблема заключается в размере файла, а не в форме, руководство по изменению размера изображения охватывает изменение размеров без искажений. Когда обрезанное изображение выходит публично и должно носить ваше имя, водяной знак добавляет логотип или подпись в углу или выложены плиткой поперек рамки Полный набор инструментов изображения для публикации жизней в центр инструментов социальных сетей, йо-
Зачем вообще собирать урожай перед загрузкой?
Потому что обрезка платформы определяется программным обеспечением, которое не может видеть ваш предмет. Каждый корм отображается с фиксированными соотношениями, а загрузка в любой другой форме устанавливается автоматически, обычно путем равномерного обрезки с обеих сторон длинного измерения. Некоторые платформы, в том числе Bluesky, применяют этот обрезку только на отображении во временной шкале, поэтому полное изображение существует, но большинство людей никогда его не видят.
Обрезка сначала возвращает вам три решения: какая часть кадра видна, насколько резкий результат при точном размере дисплея и насколько велик файл. Это занимает несколько секунд на изображение, и это имеет наибольшее значение именно для изображений, которые волнуют людей: портреты, кадры продуктов и графика с текстом вблизи края. Для тех, обрезать изображение до размера платформы поскольку фокус на теме бесплатный, регистрация отсутствует и загрузка файла, у ленты нет причин для изменений.
