⭐️ Загрузка GIF куда угодно || Обучающие материалы ✨️

С какого-то неизвестного периода времени блог начал называться "Эксперименты Meiv"... С тех пор я провёл тысячи небольших экспериментов. Пора показать результаты. Пора быть кому-то полезным.

* * *

⭐ Обучающие материалы #1 – вставка WEBP ⭐

 Оглавление:

1. Введение || Подгружайте WEBP, используйте Aseprite;
2. Справочник – условия подгрузки для тестов с небольшим туториалом || Здесь 6 пунктов (3 ситуативные). При несоблюдении хотя бы одного из обязательных – ваша анимация умрет.
   Эмодзи для более удобной навигации:
   • «✅» – это правильное действие;
   • «❌» – это ТАБУ для анимации, смерть при подгрузке;
   • «🤓» – это комментарий, объяснение, уточнение или же "режим зануды". Читать текст с этой пометкой совсем необязательно;
   • «⏭» – это то, что будет разобрано в следующем посте. Всякие "сложные штуки".
   После эмодзи есть два спецсимвола:
   • «:» - выделяет основную идею;
   • «|:» - продолжает ветку и выражает дополнительную мысль.
3. Рекомендации – краткие условия подгрузки в тест/аву/подложку/пост/прочее || Тот же справочник, но быстрее, удобнее, короче и без пояснительных картинок. Относится ко всему остальному куда можно загрузить гиф (вернее webp). Содержит эмодзи-навигацию. Не содержит заумного клоуна в очках. Номера соответствуют такому порядку, какой указан в справочнике... За исключением последних;
4. Ближайшие посты по теме и связанные работы || Это только начало.
   
   Ремарка: главы разделяются звёздочками ( * * * )
   

* * *

⭐ ВВЕДЕНИЕ ⭐

⭐ Первое что нужно знать – подгружать нужно не GIF, а WEBP. Формат WEBP – это не только картинки, но и анимации. Любые файлы сайт конвертирует в этот формат. Если вы попытаетесь подгрузить ГИФку вместо ВЕБПки, то вы получите статичную картинку вместо анимации. Также важно знать, что просто переконвертировать GIF в WEBP вручную – мало. Необходимо подогнать работу под условия с помощью которых сайт сможет переварить файл. Условия указаны в справочнике (раздел ниже).

⭐ В работе с гиф я рекомендую использовать Aseprite. Aseprite – это крутая программка для пиксель арта и анимации. || Фотошоп не поможет. Он плох как для анимаций, так и для сокращения цветов. Его действия распространяется только на 1 кадр. Также он не поддерживает формат webp как "анимации".  

Так выглядит Aseprite. Каждый этап будет сопровождаться анимациями из рабочего пространства этого ПО.

* * *

⭐ СПРАВОЧНИК ⭐

✨ Условия подгрузки для тестов:

• 1. ✅: Композиция должна содержать не более 256 цветов. Получив исходник – сократите цвета до наиболее приятной индексированной палитры.
  ❌|: Больше 256 цветов сайт никогда не примет. Считайте, тут также как в гифках. Гифки могут показывать до 256 цветов. 16,7 миллионов - это испытание для RGB пикч.
  🤓|: Если в композиции меньше 256 цветов – алгоритм WEBP присваивает каждому цвету индекс и сохраняет его для того, чтобы в последствии его очень удобно заменить другим цветом (сохраненным индексом). На сколько вы знаете, – нельзя создать индексы для 257, 258 и последующих по нумерации цветов. Ну... Это просто так не работает. Таково кодирование цвета. Это вам не палитра из 65 536 цветов (High Color, 16 бит) и не 16,8 млн цветов (TrueColor, 32 бит). Это олдфажная база в 1 байт (Indexed, 8 бит). || Работая в Aseprite я также заметил небольшую проблему формата webp: вы не можете сохранять в нём индексированные цвета самостоятельно. Этот формат принимает только RGB цвета и лишь потом, если их менее 256, - сам перегоняет их в индексированные. Другими словами – перед сохранением работы убедитесь в том, что переключились в цветовой режим RGB, т.к. webp - очень занятный самостоятельный паренёк и заботу он о себе не любит.

• 2. ✅: Сократите количество кадров на столько, на сколько часто и много сменяются пиксели. Это гибкий пункт. Его смысл вы поймете со временем. Опирайтесь на "рекомендации по подгрузке для тестов, пункт 2". Количество кадров в которых "что-то меняется" очень сильно влияет на вес [4]. "Количество кадров при сменах" - это самый важный из всех пунктов.
  
  🤓|: Немного подробнее:
  ✅|: 2.1. Сократите количество кадров и цветов в палитре в зависимости от "частоты и масштабности смены цветов пикселей на экране" при смене кадров. Чем больше у вас изменяются пиксели от кадра к кадру, тем больше вам придется убрать кадров и больше сократить цветов;
  ✅|: 2.2. Сократите количество сменяющихся пикселей. Если 2.1. перегружен, то заморозьте на всех кадрах ненужные сменяющиеся пиксели (можете закрасить слоем поверх, это будет работать как маска). Чем больше сменяемых цветов – тем сложнее. Зачастую необходимо комбинировать пункты 2.1. с 2.2;
  ⏭|: 2.3. ... Пока не берите 2.3 в голову. Разберем сжатие и кодирование в следующей части. [Сегментация] - сегментация это взаимоотношение пикселей, деление на логические блоки. Для эксперимента: если вы полностью зальете 4 кадра разными цветами, то файл будет весить несколько байтов вместо килобайтов. Т.е. вы максимально упростили логику. Если же у вас сложная композиция, где у каждого многочисленного цвета есть свой меняющийся оттенок/насыщенность/яркость/альфа и всё это взаимосвязано и меняется, то машине будет сложнее.

• 3. ✅: Одна из сторон должна равняться 600 пикселям. Иная сторона должна быть не менее 174 пикселей.
  ❌|: При несоблюдении этого условия анимация гарантированно умирает от доп.обработки сайтом;
  🤓|: Это условие также отвечает за ЗК для картинки.
  ⏭|: При использовании пункта 5 – в 600х600 подгружает чаще. || Также на всякий даю знать: этим решением вы сделаете комфортнее прохождение теста с ПК (кнопки ответов не будут выпадать вне картинки справа), но верно и обратное, – вы многократно ухудшите восприятие теста с телефона (кнопки ответов упадут глубоко вниз) 

• 4. Не превышайте вес в (120/100/70) кб.
  ❌|: Файл весящий более 120 кб в 90% случаев не подгрузится;
  🤓|: У меня есть исключения на 150 кб, но они получились только благодаря пункту "5". При сохранении анимации рассчитывайте на лимит в 100/70 кб и ниже, в зависимости от нагрузки на пункт "2".

Не переживайте, если у вас не получается подгрузить анимацию с первых трёх раз. Всё нормально. Вы привыкните ;)

• 5. ⏭: [СИТУАТИВНО, разберем в следующей части] | Используйте ошибки формата. Отодвиньте рамки возможного дизерингом. Иногда работу подгрузить практически невозможно (например у нас 115 кб, 16-40 цветов, 3-6 кадров) – в таком случае вы можете использовать дизеринг поверх анимации где сменяются пиксели чтобы их немного перекрыть (статичные пиксели сильно помогают). И/ИЛИ вы можете использовать дизеринг на всём холсте или части холста, независимо от того, сменяются там пиксели или нет (это создает ошибки предсказаний формата). И/ИЛИ вы можете наложить дизеринг только на первый кадр (та же тема, только программа еще больше не поняла вашего прикола, потому всё загружается)...
  Дизеринг с желтым или циановым цветом имеет многократно больший успех для подгрузки файла, (как уже сказано – это ошибки предсказаний для будущих смежных пикселей). Сама техника увеличит размер файла на +1-40кб в зависимости от того, сколь много вы создали этих "точек". Фишка может выигрывает нам от пары единиц до десятков кадров анимации.

Эта "анимация" весила 91,4 кб, она соответствует анимациям ниже, однако в процессе загрузки она умерла... Теперь мы имеем картинку 87,6 кб... Попробуем загрузить еще раз!

Эта анимация весит 101 кб. Мы сильно испортили работу дизер-наложением, но анимация работает! Из плюсов можно выделить то, что в тесте этот эффект работает очень интересно! При наводке на изображение создается иллюзия параллакса!

• "Эффект параллакса" можно обнаружить в тесте ниже (если вдруг вам интересно. Также я не обижусь, если вы сбросите прохождение 😉).

Предыдущая картинка выглядит несколько некрасиво, согласен, но есть вариант лучше! Мы можем сделать "дизер-рамку" и всё это будет работать (если вам не нравится рамка, то можете обойтись уголком. Главное чтобы пиксели были слева и сверху)! Итоговый вес нашего файла: 92,1 кб (т.е. отличается от оригинала на 1 кб). Для обнаружения пришлось немного сойти с ума.

• 6. ⏭: [СИТУАТИВНО, разберем в следующей части] | Не используйте пиксели с прозрачностью. Чаще всего прозрачные пиксели ломают анимацию и значительно добавляют файлу веса. Если же вам это необходимо, то подрежьте каждый из пунктов выше. Сократите вес на 35% от вашего текущего и дерзайте! Больше всего на вес (4) влияет пункт "2" (количество кадров со сменяющимися пикселями. Небольшое уточнение: если пиксели не сменяются, то файл будет одного размера, какой бы не была его длительность. *Для подтверждения слов – вот тест на 19 минут ожидания*)).
  

* * *

⭐ РЕКОМЕНДАЦИИ ⭐

✨ Рекомендации по подгрузке для тестов (повтор, кратко):

1. Менее 256/150/100/75/40 цветов в палитре (рекомендую стремиться к числам меньше 40);
2. Кадры:
   - Не более 2-3 для анимаций с ОГРОМНЫМ количеством пиксельных изменений (бывшие артефактные гиф, сжатые видео);
   - Не более 3-7 для анимаций с БОЛЬШИМ количеством пиксельных изменений (бывшие артефактные гиф, сжатые видео или просто слишком динамичная гифка);
   - Не более 7-16 для анимаций с СРЕДНИМ количеством пиксельных изменений;
   - Не более 20-60 для пиксель-арт анимаций с НЕБОЛЬШИМ количеством пиксельных изменений;
   - Не более 90 для пиксель-арт анимаций с МИНИМАЛЬНЫМ количеством пиксельных изменений.
   
3. ✅: [ОБЯЗАТЕЛЬНО] Стороны 600х[174~600] или наоборот;
4. На весе не акцентируйтесь. Главное чтобы он был менее 100 кб 👌;
5. Не перенапрягайтесь. Если на вашей исходной анимации есть артефакты (гуляющие по анимации пиксели, шум, помехи), то вам придется сильно заморочиться чтобы их убрать (15-20 минут). Рекомендую откладывать бракованные гифки, а не заниматься закрывающими масками или перекрасом пикселей поверх. || Чаще всего испорченные анимации попадаются с сайтов с компрессией или после конвертации видеороликов (которые не планировались быть как "чистые анимации без помех")

✨ Рекомендации по подгрузке для аватарок:

1. Менее 40 цветов;
2. Менее 6 кадров;
3. ✅: [ОБЯЗАТЕЛЬНО] Стороны 300х300;
   ❌|: Если вы поставите 150х150, то значение каждого пункта разделите на 2.
   ❌|: Если ваша аватарка будет менее 150х150, то вес должен быть не более 4 кб (в среднем берет 2.5 кб). Также учитывайте то, что у вас будет мыло. Сайт постарается подогнать аватарку к минимальным условиям 150х150.
   
4. Вес до 12 кб;
   📑|: Мой текущий рекорд подгрузки для ав – 17.4 кб. Взглянуть можно ниже. Ниже ава В9 (из теста который еще не вышел...).
5. Не стоит делать анимацию вне показанного сайтом круга (в целях оптимизации, сокращения вычислений). Это может спасти вашу подгрузку.
6. [Ситуативно]: если у вас анимация с прозрачным фоном и крайне небольшим объектом (1/4 или 1/8 от возможного заполнения картинки), то старайтесь располагать его не слишком близко к краю. В противном случае анимация может умереть.

✨ Рекомендации по подгрузке для подложки авы:  

1. Менее 64 цветов;
2. Менее 16 кадров;
3. ✅ [ОБЯЗАТЕЛЬНО] Стороны 300х300;
4. Вес до 30 кб;
   📑|: Лимит особо не испытывал. Пример ниже весит 33 кб. Это подложка Pie.
   
5. Учитывайте что 33% нижней части подложки никто видеть не будет.

✨ Рекомендации по подгрузке для прочего (глубоко не тестировалось):

• Для шапки блога (на своем примере слева): 148 цветов, 2 кадра, 400x200, 30 кб.
  
• Для блока в блоге: ??? (можете судить по этому посту. Возможностей много и оптимальные параметры еще кому-то предстоит найти). Навскидку можно сказать, что условия для постов схожи с условиями для тестов, однако здесь дозволено подгружать пикчу вплоть до 800х800).
• Для карточки теста/поста: ??? цветов, ??? кадров, 600х360 (можете больше, но смысла особо нет) , ??? кб. || Кстати, в карточку теста-турнира вы можете подгрузить сразу две гифки... Или гифку с картинкой ¯¯\_(ツ)_/¯ || Правда, это немного нечестно по отношению к другим тестам, а также это немного назойливо (представьте рекламные баннеры)...
  

⭐ На что нужно обращать внимание в первую очередь (по убывающей важности, [1-3]):

• 1. Артефакты (гуляющие по анимации пиксели, помехи, шум). Если на анимации есть артефакты, то либо отложите работу, либо приготовьтесь сильно заморочиться с закрывающими масками или перекрасом пикселей. Коррекция может занять у вас около 20 минут;

• 2. Количество кадров и количество сменяемых цветов. Все дальнейшие операции должны отталкиваться от того, на сколько у вас безумные пиксели и как их много. Помехи – это самый фатальный вариант (при них вы сможете загрузить анимацию не более чем на 3 кадра... или не более 7, если вы применили все возможные техники); || [п.2]

• 3. Наличие прозрачных пикселей генерирующих множество новых цветов. Если в цвете есть хоть единица прозрачности – замените его на альтернативный, без прозрачности (это предотвратит генерацию новых сменяющихся цветов). || Режимы смешивания не рекомендуется использовать по той-же причине. || Небольшое дополнение: цвета с прозрачностью имеют увеличенный вес. || [п.6]
  

* * *

⭐ Ближайшие посты по теме, связанные работы ⭐

⭐ Что будет в следующей части:
• 🤓 Терминология;
• 🤓 |: Разница между gif и webp;
• 🤓 |: Объяснение алгоритмам работы;
• ❗ Видеогайд или гайд из гифок, работа в Aseprite. || Зависит от кол-ва голосов в опросе;
• ❗ [В гайде] |: Процесс работы с затруднительными (шумными) гиф;
• ❗ [В гайде] |: Скрипт для Aseprite;
• ❓️ Ответы на вопросы по теме (задавайте вопросы в коммах). Пример: "как добавить новый цвет в палитру", "как заменить определенный цвет на определенный цвет", "как много было проведено экспериментов? Есть больше примеров?", "какие горячие клавиши ты используешь", "с какой даты ты проводишь эксперименты с анимациями", "даст ли мне админ бан за приколы с дизерингом?", "на сколько сильно по весу обычные картинки отличаются от анимаций?", "на сколько сильно сайт жмакает цвета обычных картинок (допускаю)" и тд, и тд...
* * *
⭐ Связанные с GIF (WEBP) работы:
• [Часть 1]: Вставка WEBP, начальное руководство [мы здесь];
• [Часть 2]: Режим WEBP-кора, продвинутое руководство [мы скоро будем здесь];
• [Часть 3]: Конвертеры и дополнительное ПО [мы точно будем здесь];
• [Часть 4]: *Засекречено* [и здесь мы тоже будем!], [конечная станция по анимации].
* * *
⭐ Тесты сквада за июль (если вы захотите нас поддержать 😉):
• [@@Doshi@@]: "Тест-турнир на лучшего участника Майншилда 4"
• [@@Cien'@@]: "Тест на величину вашей красоты или не красоты"
• [@@Meiv@@]: "Короткий тест где вы можете судить преступников (большинство из аниме)".