Это конец игры.
Приветствую всех, кто пережил первую часть. Для вас припасено самое вкусное. В этой части вы определенно умрете 💗
* * *
Оглавление:
* * *
Вопрос = Q;
Ответ = A.
Q: Что такое WEBP?
A: Формат от Google стремящийся заменить GIF/PNG/JPG/APNG форматы.
Q: В чем главная особенность WEBP?
A: Его картинки весят на 30% меньше, чем у любых других форматов (особенно gif). Особое сжатие позволяет сайтам работать быстрее и хранить больше.
Q: Какие главные недостатки WEBP?
A1: Это тот самый формат, который невозможно закинуть в пэинт.
A2: Это тот самый формат, который открывается через браузер, а не через утилиту для просмотра фоток.
A3: Это тот самый формат, который в дискорде кидается "файликом доступным для скачки", а не картинкой или гифкой. (Телега и вовсе переделывает анимацию в статичную картинку).
A4: Это тот самый формат, который интересен только проггерам (и то он требует на себя пару сотен кода, а потом еще и дыры имеет).
A5: Это тот самый формат, который не имеет встроенной поддержки для МАКов. То есть, пользователям макинтошей нужно качать плагин (за наводку спасибо Мэйнстриму).
A6: Это тот самый формат, из-за которого в турниры с картинками можно заливать гифки (а ведь вы просто хотели насладиться картинками!)
A7: Это тот самый формат, который в облачном хранилище отображается некорректно, с зернистостью и мылом.
A8: Это тот самый формат, который вообще не отображается на каком-нибудь старом корыте при заходе на сайты (у меня такое есть). Поддержку можно посмотреть здесь.
A9: Если скачать этот файл на мобильное устройство, то скорее всего файл не будет воспроизводиться или вовсе откиснет.
... В общем, формат имеет дурную славу. ¯\_(ツ)_/¯
Q: Где можно найти всю инфу по WEBP?
A: [Официальная документация WEBP].
Q: Что важно знать из всей документации?
A1: WEBP поддерживает прозрачность цветов, gif – нет.
A2: WEBP поддерживает 16 777 216 цветов, gif – 256 (число можно умножить на количество "блоков". (Оптимизацию помянем));
A3: WEBP поддерживает максимальное разрешение 16383 x 16383. Такое же разрешение поддерживает PNG.
A4: WEBP делит картинку на "мелкие сегменты", макроблоки.
⏯️ A5: WEBP – это отчасти "видео". Он имеет видеокодек VP8 использующийся в видео + юзает хранилище RIFF. В будущем посте мы к этому вернемся.
Q: Что такое "макроблоки"?
A: Это деление на "яркость" и "насыщенность".
Условный пример что такое "насыщенность";
Условный пример что такое "яркость".
Q: Как работают макроблоки и зачем это знать?
A: Начнем рассмотр со стороны картинок (PNG и бывших PNG, что переведены в Webp). Тема "макроблоков" вплетена в алгоритм сжатия сайта. Это важно знать в том случае, если вы не брезгуете использовать градиенты, режимы смешивания и прочие безумные штуки в создании пикч, получая пнг файл в 300 кб (разумеется такая вещь будет сжиматься. Непременно должна!).
Для демонстрации пришлось немного упростить цветовую палитру у итоговых вариантов. «Без сжатия» – это оригинальный файл до загрузки на сайт. Его детали насыщенны и светлы. «Сжатие» – файл полученный после загрузки на сайт. У некоторых деталей появилось заметное размытие. Некоторые цвета потеряли немного насыщенности и яркости.
• [ссылка чтобы разглядеть] • || ⏭ Контрится ли это легально? – Разберём в следующем посте. Будет интересно 😎
На этом примере ключевые детали становятся более серыми. Также есть размытие, из-за чего немного теряется акцент и зернистость.
• [ссылка чтобы разглядеть] •
Плохо ли это? На самом деле нет. Так сайт выживает, сжимая тяжелые PNG и WEBPки в более легкие формы. Всё что мы можем сделать – это принять это и сделать мелкие детали более заметными, плотными, насыщенными и менее размытыми по краям. Последнее особенно важно, так как "те самые размытые серые пиксели вокруг основного объекта" впоследствии могут размывать его собой... || ... Что насчет алгоритма: умные дяди говорят что блоки яркости имеют форму 16x16, а блоки цветности – 8x8, а потом они еще и на подблоки 4x4 разделяются...
Q: Хорошо, как макроблоки работают в анимациях?
A: В анимации они работают немного иначе! Вот отрывок из документации: «Внутри каждого макроблока кодер может прогнозировать избыточную информацию о движении и цвете на основе ранее обработанных блоков. Кадр изображения является «ключевым» в том смысле, что он использует только уже декодированные пиксели в непосредственной пространственной окрестности каждого из макроблоков и пытается заполнить неизвестную их часть. Это называется предиктивным кодированием».
Так это работает: слева-направо и сверху-вниз. || Представим, что белые квадраты залиты дизерингом определенного цвета. Все остальные элементы – это элементы "предсказания" алгоритма. Или, как сказали бы нёрды – «предиктивное кодирование».
• [по этой ссылке точно та же информация, но из документации. Инфа на более сложном языке. Не имеет примера с дизерингом] • Повторим: предсказания работают ЛИБО на основе уже закодированных пикселей слева и сверху, ЛИБО межкадрово (по движениям).
Q: Для чего это нужно знать в анимации?
A: Чтобы получить несколько дополнительных кадров анимации при помощи дизеринга. Об этом ниже.
Дизеринг выглядит *так* и накладывается *так*.
Загрузим другой пример ис... Нет, не загрузим. Анимация не заработала, не смотря на то, что я так на неё рассчитывал 🥳 || Вес файла: 69 кб (что в принципе норма для изображений. От этого я буду дальше отталкиваться). Сейчас изображение не имеет дизеринга, а на следующем предмете – вы можете наблюдать бирюзовую рамку.
Итак, я добавил дизеринг-рамку и... Анимация все еще мертва. В обычной ситуации я бы после этого сократил количество кадров (особенно те кадры, в которых цвета сменяются в большом количестве), но в этот раз я так делать не буду. || Как уже сказал, вес в 69 кб - это нормальный вес. Давайте попробуем добавить тупо ЕЩЕ БОЛЬШЕ дизеринга.
Вот теперь его достаточно 🤗|| Вес увеличился на 15 кб (это из-за того, что WEBP вообще не понял нашего прикола и напредсказывал того, чего быть не может. Вероятно). || Здесь, если обратить внимание не на "рамку", а на "внутреннее окно" - можно заметить как применяется второй вариант дизеринга, «использование на всём холсте». Такой вариант хорошо сокращает количество сменяемых пикселей от кадра к кадру. На сколько вы помните из первого поста: "если пиксель не сменяется – значит он тупо хранится, не повышает вес и не использует вычислительную память на замены". Также в первом посте к этому было приложено небольшое доказательство, тест «Ладдер по потерянному времени | Подожди 19 минут».
Другой работающий пример. На экране анимация пользователя Кофе. || Ранее я попробовал применить "дизер-рамку", но она не сработала. «Полное покрытие» же – заливает базы.
Еще одна анимация Кофейка. || Та же история. Полное покрытие снова играет в человека-паука и спасителя очередного поста от статичных картинок.
Из этих примеров и предыдущего поста у вас может сложиться впечатление, что жизнь анимации решается одним лишь дизерингом: "и на вес файла можно немного закрыть глаза¹", "и количество кадров можно оставить большое или сделать больше²", "и цветовую палитру я могу расширить³"... Но это не совсем так. Дизеринг - это не чит, не волшебная палочка и даже не то, за что можно получить бан (хотя, насчет последнего я не уверен). Дизеринг не всесилен.
Первое – вы мало когда сможете получить файл для теста, который мог бы перевесить 110 кб. Заниматься таким не стоит. Вам постоянно придется нащупывать какой-то "минимум". Каждая неудачная подгрузка возвращает вас в редактор, где вы будете сокращать те или иные параметры анимации, сохранять, пробовать, пробовать... Делать всё это до тех пор, пока вы не обнаружите, что на значениях 40-70 всё наконец работает, а часть дизера и вовсе оказывается не нужна! В результате всего процесса у вас будет до десяти или двадцати проваленных попыток загрузки и это была всего-лишь одна анимация. || Для создателей анимированных аватарок отметка веса еще более непредсказуема. В одном проекте у вас может быть рекорд в 14 кб, а в другом – вы едва-едва сможете подгрузить работу на 9 кб. Даже при всём "имбалансном" дизеринге, даже при всём мастерстве и знаниях.
Второе – количество дополнительных кадров даваемые от приёма дизером крайне ограничено. Вы получите не более +20-30% по количеству кадров от текущей анимации. То есть, в тяжелых анимациях (где много сменяемых пикселей в кадрах) может быть +1 кадр. В больших – +4; в средних – +8; в малых – +16... || *Подробнее о том, что значит "большой-малый цветовой файл" можно найти в предыдущем гайде. Ссылка ведет на нужный отрывок*.
Третье – та же тема с цветом. Дизер дает +10% к цветам.
* * *
Есть множество вопросов, на которые я пока не могу найти ответ, но опустим сомнения и лишнюю информацию.
* * *
✅: Представим что дизеринг – это карты таро разложенные в шахматном порядке. Эти карты искажают будущее, создают иные предсказания, ложные обещания. Прямо как вот этот паренек.
Вот так делать можно. Это паттерны дизеринга и они создают определенный уровень затемнения в зависимости от частоты возникновения!
Вот так делать можно. ГООООЛ! || Пример положительный!
Так делать тоже иногда нужно. Этот прием позволяет заменить большое количество цветов градиента и некоторые подвижные пиксели (если бы это была анимация). || Пример положительный!
❌: Если мы не будем это использовать и просто зальём всё сплошными прямыми, то это перестанет считаться дизерингом, перестанет считаться шахматишками и перестанет работать в анимации. Другими словами анимация умрет.
Шах и мат, аметисты. Это так не работает. || Пример отрицательный.
❌: Также не стоит путать дизеринг с скринтонингом и халфтонингом. Для наших задач подходит только первое.
Если вы перемасштабируете дизеринг неправильно, то вы рискуете получить "халфтон" или другой паттерн дизеринга. «Паттерн» означает "закономерное расположение" (показано немного выше). Смена паттерна – не так страшна, как раздробление пикселя на дополнительные цвета... "Дизеринг" всегда означает "включенный алиасинг", т.е. недробность, неразмытость пикселя. Он всегда имеет острые углы.
* * *
Отлично. Мы усвоили большинство инфы по дизеру. Сейчас мы погрузимся на самое дно этого пиксельного безумия.
❓: Документация намекает о том, что сила таро и шахматишек зависит от яркости, насыщенности и разницы с окружением... «Яркий, но ненасыщенный цвет» или «капец черный блэк маттерс цвет» убивают файл чаще других вариантов. || Рассчитывайте на высокую насыщенность цвета и САМ ЦВЕТ (сам цвет имеет "свою яркость в зависимости от насыщенности" по теория цвета... Наиболее быстрое и удобное объяснение моим словам можно найти ниже в видосе. Нужная информация на 4:24).
✅: Чаще всего гифку (вебпку) спасает насыщенный желтый или циановый цвет на пикселях дизера. Все остальные цветовые варианты работают реже, особенно те, что близки к черному: синий, фиолетовый, маджента... Зеленый и оранжевый имеют немного больше шансов, но также руинят подгрузку анимации.
На этом испытательном полигоне я испытывал свою теорию;
На этих испытательных полигонах тоже присутствует часть тестов.
* * *
Доп инфа по видео:
Мы пропустили этап рескейла так как аватарка подходит под условия 300х300. В следующем выпуске мы это исправим! (След. выпуск будет посвящен упрощению целой анимации: кадров, цветов, затронет перемасштабирование. Возможно, я возьму какую-нибудь простую работу чтобы всё показать должным образом, а возможно – сдержку обещание и достану самую больную и шумную гифку).
Эту запись немного сложно назвать гайдом, но всё же это в какой-то степени он. Я попытался немного раскрыть тему "как происходит упрощение цветов". Где-то в начале года эта тема меня убивала. О ней нигде не было рассказано нормально, потому – цвета сокращались поштучно, а иногда и не сокращались вовсе (исчезали только из первого кадра, но не исчезали из других... ууух, мы к этому еще вернемся)💀.
Перейдем к важным горячим клавишам для работы с цветом:
⭐ Здесь должен был быть более сложный гайд, но я посчитал нужным оставить его на следующий тематический выпуск 😉
* * *
⭐ Что будет в следующей части:
- Разбор конвертеров на типы: плохие, хорошие, недотягивающие и ультимативные;
- Выбор лучшего конвертера, выделение его особенностей: конвертация множества файлов, *спойлер-спойлер*;
- Покажу каким образом были сделаны гифки для этого и предыдущего поста. Затрону тему записи экрана.
- Выпущу видос, в котором буду сокращать анимацию по всем пунктам описанным в первом посте. По горячим клавишам буду акцентироваться на временную линию с кадрами.
* * *
⭐ Связанные с GIF (WEBP) работы:
- [Часть 1]: Вставка WEBP, начальное руководство, условия [мы были здесь];
- [Часть 2]: Режим хардкора, тонкости WEBP, создание авы [мы здесь];
- [Часть 3]: Конвертеры, дополнительное ПО, сокращение анимации для теста [мы скоро будем здесь];
- [Часть 4]: *Засекречено* [об этом мы ничего не знаем, но здесь круто!].
* * *
⭐ Тесты сквада за очередную июльскую неделю (если вдруг вы захотите нас поддержать или выразить "СПС"):
- [Doshi]: выпустил тест-идентификацию, в которой вы можете стать трагическим главным героем, что проиграл себе или окружению. В основном тест содержит альтернативные версии персонажей мультипликации.
- [Cien']: выпустил работу на ассоциации. Если ваши ответы совпадут – вы проиграли (￢‿￢ ).
- [Meiv]: выпустил турнир по доте, в котором вы сможете сразить между собой героев имеющих 7 способностей и множество уникальных приколюх. Герои ассоциируются с пользователями. Тест можно проходить без опыта игры в доту.
Постскриптум:
Подумываю написать своё руководство по ПО, когда обучающие материалы по гифкам подойдут к концу...
Хотели бы вы услышать мой голос в следующей части?14
