Фільтри CSS, gifи і продуктивність

21

Від автора: кілька місяців тому я нахабно вкрав ідею Чарлі Глісона (Charlie Gleason). В його презентації на MelbJS за текстом на багатьох слайдах були показані повноекранні анімовані gif’и (в тому числі власного особи) у відтінках сірого. Я виявив, що він старанно відредагував і оптимізував кожен GIF в photoshop’е, щоб ті добре виглядали за текстами слайдів.

Мені захотілося зробити те ж саме, але не займаючись таким трудом.

Результатом цього кілька місяців тому стала моя презентація про strict mode Javascript’е на Web Directions Code. Вам, напевно, варто відкрити у вкладці прямо зараз, тому що у мене 24MB gif’ов, і їх завантаження може зайняти деякий час. Так, і так як вона була побудована для запуску на моїй машині, на вашій вона може взагалі не працювати. Вибачте. (Якщо вам цікава ця тема, ось відео).

Цей пост – про те, чому я попутно навчився.

Ці приголомшливі gif’и

Якщо у презентації ви намагаєтеся передати емоцію, то тут складно обійти правильно підібраний GIF. В іншому випадку, якщо ви мешкаете замість написання своєї презентації, то пошук ідеального GIF’а займе у вас годинник. Це – безпрограшний варіант.

Фільтри CSS, gifи і продуктивність

Велика частина gif’ов звідти – поганої якості, погано оптимізовані і нерівно змикаються в циклі. Але не всі. В блогах на зразок If We don’t, Remember Me і Tech Noir показано, що реально можна зробити в цьому форматі, захопивши відчуттям окремої сцени фільму в такій мірі, яка неможлива в статичного зображення (зауважте: All Movie Gifs є величезний список gif’ов з фільмів, але зазвичай набагато гіршої якості). Мораль в тому, що хороші gif’и десь поруч: просто відшукайте їх!

Фільтри CSS + повноекранні gif’и повільні

Не впевнений, що заголовок кого-небудь здивує. Але виходить, щоб відобразити 4MB відеоданих у форматі, визначеному в 1989р., потім розтягнути їх на мільйони пікселів на дисплеї, потім застосувати специфікацію CSS Filter в робочому проекті, підтримувану тільки в браузерах Webkit, і то з недавнього часу – вам доведеться туго.

Наскільки сильно? Настільки. Збільшіть до максимуму і відчуйте повільність. Перейдіть в режим Timeline і дивіться, як пропливає повз об’єкт частотою 60 кадрів в секунду (і навіть 30 кадрів):

Фільтри CSS, gifи і продуктивність

Злочинець – розмиття, а воно ненавидить пікселі

Після багатьох експериментів над безліччю різних gif’ов справжньою проблемою стало застосування фільтра blur, що дуже прикро, так як він дуже придатний, якщо ви намагаєтеся з GIF’а зробити фон. Отже, у нас проблема.

Але її, як і всі проблеми CSS, можна вирішити з допомогою MOAR CSS!

Чарівне зіткнення transform і фільтрів

Чесно, не знаю, чи хороша це ідея, але дану конкретну проблему вона вирішує. Ось мої міркування з цього приводу:

GIF не дуже великий щодо розмірів

Масштабування зображення вимагає зусиль

Застосування фільтра вимагає зусиль пропорційно кількості пікселів

Чому б спочатку не застосувати фільтр?

Виявляється, це насправді можливо, а застосувавши transform CSS, можна масштабувати зображення за допомогою графічного процесора GPU, що дає нам розумне збільшення продуктивності.

Спочатку зменшуємо елемент фону, скажімо, до 20% вікна перегляду, а не заповнюємо його на всю ширину:

position: absolute;
top: 0;
left: 0;
width: 20%;
height: 20%;

Потім застосовуємо фон, як ми робили до того:

background-image: url(…);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;

Потім застосовуємо фільтр і масштабується зображення, щоб воно підійшло за розміром:

-webkit-filter: blur(2px) grayscale(0.8) brightness(0.8);
-webkit-transform-origin: top left;
-webkit-transform: scale(5);

А потім ми закінчили:

Фільтри CSS, gifи і продуктивність

На перший погляд, ми ніби всього лише прискорили всі на 40% (160мс/кадр до 100мс), але насправді це GIF частотою 10 кадрів в секунду, тому Chrome просто чекає готовності наступного кадру GIF. Вся розфарбування, розмиття і масштабування відбувається в перші 30мс.

Хай живуть графічні процесори!