Панорама, выложенная в Instagram как единое изображение, превращается в ленте в тонкую полоску Та же панорама, разрезанную на три или четыре слайда и выложенную как карусель, заполняет экран, и свайп перемещается по картинке, как если бы вы панорамировали камеру Эффект прост в описании и легко получить немного неправильный: слайд на один пиксель или последний слайд уже остальных, и свайп скачет.
В этом руководстве объясняется, как работает бесшовная карусель, сколько слайдов нужно данной панораме, как выглядит арифметика резки при реальном количестве пикселей и как ее использовать Генератор прокрутки карусели в Toolz для выполнения нарезки в браузере.
TL;DR: Бесшовная карусель - это одно широкое изображение, разрезанное на равные слайды, которые точно разделяют их края, размещенные по порядку, поэтому свайп прокручивает изображение. Количество слайдов - это панорама и соотношение сторон #39;s, разделенное на слайд и соотношение сторон #39;s: панорама 3:1 - это 3 квадратных слайда или 4 портретных (4:5) слайда. Соотношение сторон: панорама 3:1 - это 3 квадратных слайда или 4 портретных (4:5) слайда. генератор карусельных свитков предполагает, что посчитайте, обрезает изображение до такого количества слайдов и №39; стоимость ширины, разрезает границы целых пикселей и экспортирует слайды шириной 1080 пикселей в виде JPEG, PNG или WebP в пронумерованном zip. Он работает на стороне клиента, ничего не загружается, бесплатно, без регистрации.
Что такое бесшовная карусель в Instagram?
Бесшовная карусель - это карусельный пост, слайды которого представляют собой последовательные фрагменты одного изображения. Вместо того, чтобы переходить от одной фотографии к другой, зритель проводит пальцем, и картина продолжается через разрыв. Пейзажные фотографы используют его для панорам, дизайнеры используют для длинных иллюстраций, а бренды используют его для временных линий или линеек продуктов, которые проходят через несколько кадров.
Он работает, потому что карусель показывает слайды рядом в полоске, и каждый слайд в столбе имеет одинаковый размер. если слайд 1 заканчивается в столбце пикселей 1,200 оригинала и слайд 2 начинается в столбце 1,200, соединение невидимо. если слайд 2 начинается в столбце 1,198 или 1,203, то слайд изображения повторяется или исчезает, и на прямом горизонте или крае здания, который отображается как видимый шаг.
Два правила платформы формируют все остальное На момент написания этой статьи Instagram принимает до 20 слайдов в одной карусели, и все слайды в посте разделяют соотношение сторон первого; слайд в другой форме обрезается, чтобы соответствовать Платформы время от времени меняют эти детали, поэтому относитесь к ним как к текущему поведению, а не к фиксированной спецификации.
Какую форму слайда выбрать?
Портрет 4:5 - обычный выбор, потому что это самая высокая форма, которую отображает лента Instagram, и она занимает больше всего экрана на телефоне. Квадрат и пейзаж есть, когда им подходит композиция.
Генератор предлагает три формы каруселей, каждая из которых экспортируется шириной 1080 пикселей:
| Форма скольжения | Размер вывода | Соотношение (ширина/высота) | Слайды для панорамы 3:1 | Слайды для панорамы 4:1 |
|---|---|---|---|---|
| Портрет (по умолчанию) | 1080 х 1350 | 0,8 | 4 | 5 |
| Площадь | 1080 х 1080 | 1,0 | 3 | 4 |
| Пейзаж | 1080 х 566 | 1,91 | 2 | 2 |
Количество слайдов в таблице происходит из одного деления, покрытый в следующем разделе. шаблон, чтобы заметить, что более узкие слайды нужно больше их, чтобы покрыть ту же ширину. слайды портрета показывают наибольшую высоту панорамы на слайд, что обычно делает пейзажное фото большим, но им нужно больше свайпов. Ландшафтные слайды показывают панораму в меньшем количестве, более короткие рамки и подходят очень широкие, неглубокие изображения, такие как горизонты.
Сколько слайдов нужно панораме?
Разделите соотношение сторон панорамы и #39;s на соотношение сторон слайда и #39;s, затем округление до ближайшего целого слайда.
slides = round( (image width / image height) / (slide width / slide height) )
Для панорамы 3:1 на портретных слайдах: 3 /0,8 = 3,75, что округляется до 4. На квадратных слайдах: 3 / 1 = 3. На пейзажных слайдах: 3 / 1,908 = 1,57, что округляется до 2.
Для панорамы 4:1, такой как изображение 6000 x 1500: 4 /0,8 = 5 портретных слайдов, 4 /1 = 4 квадратных слайда и 4 / 1,908 = 2,1, то есть 2 пейзажных слайда.
выше панорама карусельного инструмента запускает этот расчет, как только вы добавляете изображение, зажимает ответ на от 1 до 10 и устанавливает ползунок слайдов на него с помощью такой строки, как & quot;4 соответствует вашему изображению и пропорциям #39;s наиболее близко. & quot; Сам ползунок работает от 2 до 10. Как только вы его переместите, предложение перестанет преобладать над вашим выбором; добавление нового изображения или выбор другой формы слайда возвращает предложение.
Счет редко делится идеально, поэтому что-то должно дать Округление до большего количества слайдов немного обрезает сверху и снизу панорамы Округление вниз до меньшего количества слайдов обрезает слева и справа Генератор делает эту обрезку один раз, по центру, перед резкой, поэтому каждый слайд выходит одинакового размера.
Как инструмент без шва режет слайды?
Он работает в три этапа, и каждый из них существует для остановки определенного типа шва.
Шаг 1: обрезать полосу. Слайды вместе образуют одну длинную полосу, отношение которой равно соотношению слайдов, умноженному на количество слайдов Для 4 слайдов портретов, которое равно 1080 x 4 /1350 = 3,2. инструмент принимает самую большую центрированную область изображения с точно таким соотношением. если изображение шире полосы, боковые стороны обрезаются; если оно выше, то верх и низ обрезаются.
Шаг 2: разделите полосу на цельнопиксельные столбцы. Ширина полосы округляется до целого числа пикселей, делится на количество слайдов, и любые оставшиеся пиксели раздаются по одному ведущим слайдам. полоса 3199 px на 3 слайдах становится 1067 + 1066 + 1066. столбцы последовательны, поэтому каждый слайд начинается ровно с пикселя после окончания предыдущего. Ни один столбец не считается дважды и ни один не пропускается.
Шаг 3: масштабируйте каждый слайд до выходного размера. Каждая колонка нарисована на холсте в полном заданном размере, 1080 х 1350 для портрета, с помощью браузера и холста #39;s drawImage операция, определенная в Стандарт WHATWG HTML, с качественным сглаживанием изображения.
Почему бы не округлять каждый слайд's положение независимо? потому что дробные границы дрейфуют. если полоса имеет ширину 3,201 px и 4 слайда вычисляются как 800,25 px каждый, округление каждого начала и ширины самостоятельно может поставить один слайд's правый край пиксель мимо следующего слайда's левый край. Распространение остатка по передним слайдам сохраняет каждую границу целым числом и каждый слайд в пределах одного исходного пикселя от остальных. В случае 1,067 против 1,066, что один дополнительный исходный пиксель изменяет горизонтальный масштаб вывода менее чем на 0,1%, что не видно.
Работающий пример с реальным количеством пикселей
Возьмите панораму 4000 x 1333, соотношение сторон 3,0008, и выберите портретные слайды.
Предлагаемый подсчет. 3,0008/0,8 = 3,751, что округляет до 4 слайдов.
Полоса для 4 слайдов. Соотношение полос составляет 3,2, а отношение изображений 3,0008 меньше этого, поэтому изображение относительно выше, чем полоска. инструмент сохраняет полную ширину 4000 px и высоту обрезков: 4000/3,2 = 1250 px. Это удаляет 83 px, около 41,5 px сверху и 41,5 px снизу.
Слайды. 4000/4 = 1000 пикселей каждый без остатка, то есть четыре ломтика по 1000 x 1250, каждый из которых увеличен на 1,08-1080 x 1350.
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
Вместо этого выбираем 3 слайда. Перетащите ползунок в 3 и соотношение полосок упадет до 2,4.Теперь изображение шире, чем полоска, поэтому инструмент сохраняет полную высоту 1333 px и ширину обрезки: 1333 x 2,4 = 3199,2 px, округленную до 3199. с каждой стороны сходит около 400 px. Разделите на 3, то есть 1067 + 1066 + 1066 px, так что первый слайд получит один оставшийся пиксель.
Передвигая его слишком далеко. На 6 слайдах соотношение полос будет 0,8 x 6 = 4,8, намного шире изображения. генератор показывает предупреждение, когда соотношение изображения и #39;s падает ниже 75% от соотношения полос. Для этого изображения 0,8 x 6 x 0,75 = 3,6, а 3,0 меньше 3,6, поэтому на странице написано: "Это изображение недостаточно широкое для 6 слайдов такой формы, поэтому каждый слайд будет обрезаться жестко сверху и снизу." На 5 слайдах порог равен 3,0, и изображение просто очищает его.
Второй пример показывает панораму, которая точно подходит. изображение 6000 x 1500 равно 4:1. на слайдах портрета предложение равно 4 /0,8 = 5, соотношение полос равно 5 x 0,8 = 4,0, и ничего не обрезано вообще: пять срезов по 1200 x 1500, каждый уменьшен на 0,9 до 1080 x 1350. Переключитесь на квадратные слайды и предложение 4, опять же без обрезки: четыре среза по 1500 x 1500, масштабированные до 1080 x 1080.
Как вы делаете карусель шаг за шагом?
- Добавить панораму. откройте Карусельный разветвитель Instagram и уронить изображение, щелкнуть, чтобы просмотреть, или вставить его из буфера обмена Любое изображение, которое браузер может декодировать, работает, что на практике означает PNG, JPEG, WebP, GIF и AVIF.
- Выберите форму слайда. Портрет 4:5 - по умолчанию. примечание под сборщиком повторяет, для чего предназначена форма.
- Проверьте количество слайдов. Примите предложение или переместите ползунок. полоса предварительного просмотра немедленно перерисовывается, и заголовок показывает выходные данные, например "4 x 1080x1350".
- Выберите формат и скачайте. Нажмите & quot;Загрузите все 4 как zip & quot; для всего набора или используйте & quot;Slide 1 & quot;, & quot;Slide 2 & quot; кнопки для сохранения одиночных слайдов.
Файлы называются по исходному имени файла с нулевым номером: harbor.jpg становиться harbor-01.jpeg, harbor-02.jpeg и так внутри harbor-carousel.zip. Заполнение сохраняет слайды в порядке свайпа в любом файловом менеджере, что имеет значение, когда вы выбираете их все на телефоне. библиотека zip загружается только тогда, когда вы нажимаете кнопку zip, поэтому сама страница остается легкой.
Загрузите слайды в Instagram в порядке номеров как одиночный пост карусели. размещение их вне порядка - наиболее распространенный способ, которым правильный набор слайдов в конечном итоге выглядит сломанным.
Стоит ли экспортировать JPEG, PNG или WebP?
JPEG - это выбор фотографий по умолчанию и правильный выбор. Instagram в любом случае повторно кодирует загрузку как JPEG, поэтому файл без потерь покупает большую загрузку и ничего видимого в конце. Сжатие JPEG определено в Рекомендация МСЭ-Т Т.81, и генератор кодирует с качеством 0,92.
PNG не имеет потерь, указанных в Рекомендация W3C PNG, и подходит панорамы, которые являются иллюстрациями, диаграммами или содержат текст, где артефакты JPEG вокруг жестких краев будут показываться до Instagram's собственное сжатие добавляет больше.
WebP предоставляет самые маленькие файлы аналогичного качества, а также использует 0,92 для своей кодировки с потерями. Это разумный выбор для слайдов, направляющихся куда-то, кроме Instagram, например, в галерею веб-сайтов.
Если вам нужны слайды в другом формате после этого или их папка, преобразованная оптом, руководство по преобразование формата изображения охватывает, какие изменения происходят между JPG, PNG и WebP и когда каждый из них того стоит.
Снизит ли разделение качество изображения?
Резка не; масштабирование может. каждый слайд берется из источника с полным разрешением, а затем масштабируется до ширины 1080 px.
Когда срез шире 1080 px, как в примере 6000 x 1500, где каждый срез составляет 1200 px, слайд масштабируется вниз, что не теряет видимых деталей, Когда срез уже 1080 px, слайд масштабируется и будет выглядеть мягче Изображение 4000 x 1333 в 4 портретных слайдах дает срезы 1000 px, мягкое увеличение 1,08x. Изображение шириной 2000 px, разделенное на 5 слайдов, дает срезы 400 px, увеличенные 2,7x, и будет выглядеть мягко на телефоне.
Из арифметики следует эмпирическое правило: для четких слайдов источник должен быть шириной не менее 1080 px на слайд, поэтому 4320 px для 4 слайдов и 5400 px для 5. Если панорама меньше этой, меньше слайдов будет выглядеть более резким. подробнее о том, почему увеличение не может добавить детали, см. руководство на изменение размера изображений без потери качества, который проходит через масштабирование, масштабирование и повторную выборку.
Что вызывает видимый шов, и как вы его фиксируете?
Большинство швов происходит от одной из пяти причин, и генератор удаляет первые две.
| Симптом | Вероятная причина | Исправить |
|---|---|---|
| Тонкая повторяющаяся или отсутствующая полоска на стыке | Границы дробных срезов округляются независимо | Используйте полнопиксельное нарезку, как это делает генератор |
| Последняя горка выглядит растянутой или коротко обрезаемой | Пиксели остатка, сброшенные на один слайд | Распределите остаток по ведущим слайдам |
| Слайды вне последовательности | Загружено в неправильном порядке | Запишите в порядке номеров файлов, 01 сначала |
| Одна горка обрезана не так, как остальные | Смешанные соотношения сторон в одном посте | Экспортируйте каждое скольжение одинаковой формы |
| Субъект прорезал середину лица или знака | Граница скольжения приземляется на предмет | Измените количество слайдов так, чтобы граница перемещалась |
Последний ряд является композиционной проблемой, а не технической. с 4 слайдами границы сидят на 25%, 50% и 75% полосы; с 3 слайдами, на 33% и 67%. если лицо человека 's приземляется точно на соединение, один слайд больше или меньше обычно перемещает разрез куда-то безвредно. лица и текст на соединении переживают свайп, но выглядят неуклюже всякий раз, когда зритель останавливается на одном слайде.
Каковы пределы инструмента?
Ползунок проходит от 2 до 10 слайдов. Instagram позволяет больше, но после десяти типичная панорама уже не имеет достаточной ширины, чтобы придать каждому слайду реальную деталь, и каждый слайд становится узкой полосой, которая перестает читать как изображение.
Культура всегда центрирована Если важная часть панорамы находится вблизи верхнего или нижнего края и выбранный счетчик обрезает высоту, измените счет или обрезайте источник сначала с помощью обрезчик изображений в социальных сетях, что позволяет выбрать точку фокусировки.
Вводом должен быть файл, который браузер идентифицирует как изображение и может декодировать. Файл, который не является изображением, получает отказ с сообщением, называющим его, а поврежденное изображение или изображение в формате, который браузер не может прочитать, получает & quot;Это изображение не удалось прочитать. & quot; фотографии HEIC с iPhone не декодируются большинством браузеров, поэтому сначала преобразуйте их.
Как и каждый инструмент на сайте, загрузки засчитываются в ежедневный лимит использования. нет водяного знака и учетной записи не требуется.
Панорама загружается куда-нибудь?
Нет. изображение декодируется, обрезается, нарезается и кодируется на холсте HTML в вашем браузере, и zip собирается локально. ничего не отправляется на сервер, хранится или регистрируется, и страница продолжает работать с сетью отключен после того, как она загрузилась. Это имеет значение для неизданных кадров продукта или работы клиента, которые вы еще не опубликовали.
Похожие инструменты для карусельных постов
Генератор прокрутки расположен рядом с несколькими другими инструментами изображения, созданными для социальных сообщений, все они находятся на стороне клиента.
выше обрезчик изображений в социальных сетях посевает одно изображение до пятнадцати размеров платформы с фокальной сеткой из девяти точек. The матовый генератор помещает неквадратное изображение на квадратный или портретный матовый, чтобы вся картина выжила в ленте, которая подходит для обложки, на которой показана полная панорама, маленькая перед каруселью. The генератор фотокарт строит карточки с цитатами и графику в стиле новостей из шаблонов и т. д водяной знак добавляет логотип или фирменный водяной знак, в углу или плитка, перед публикацией. Каждый инструмент в наборе указан на центр инструментов социального имиджа, йо-
