DivineDraft

Особо не силен по grid, но похоже код выше не работает из-за того, что не установленное кол-во строк.
Если вы обладаете информацией о кол-ве выводимой информации, то просто установите в следующей строке статичное число:
grid-template-rows: repeat(6, 1fr);

Если таковых данных нет, то так же добавил небольшой скрипт на jquery, который производит расчеты автоматически

Обратите внимание на свойство " slidesPerView".
К примеру, на 1980 у вас указано - отображать 3.6 слайда. Укажите целые числа.

Почему бы просто не поместить лицо персонажа в единый див, разместить его по центру экрана и далее при масштабировании наложить свойство scale? А после 1000px, стоит совсем уже поменять структуру, ведь через тач не будет работать, а значит и от идеи толку мало. По поводу замены - просто поменяйте картинку через скрипт, при наведении.

Используйте lazy load, в интернете есть много разных библиотек, к примеру эта

Можно пойти двумя путями:
1) Заказать написание / Написать самостоятельно
2) Дублировать существующее решение и доработать
Вот основной грязный код всего этого деяния (не забудьте увеличить рабочую область, адаптивность скрывает часть элементов при малых разрешениях). Далее в стилях ищите все классы, лишнее удаляете и тоже самое с кодом скрипта.

Попробуйте разделить единую svg картинку на несколько малых, далее закиньте их в единый див, где зафиксируйте положение слоев через z-index. Мне кажется, из-за ее размеров, анимация после прокрутки работает пассивно экономя ресурсы браузеры и когда возвращаетесь обратно просто не успевает восстановится, а при наведении на кнопку - часть страница рендерится снова и она восстанавливается.

Решение на JQuery

Как сделано - в самом исходном коде скрипта isotope, в подробностях, если у вас нету представлений даже по написанию, то у Вас вряд ли получится реализовать подобное. В распакованной версии на данный момент - 1232 строчки.

Для написания легкой версии, можно просто использовать стили (css) и пару скриптов, которые будут добавлять классы. Шаги:
1. Поместить необходимые элементы сортировки в один контейнер.
2. Добавить к каждому элементу дополнительный класс в зависимости от категории.
3. При нажатии на одну из кнопок сортировок - Добавлять класс к главному контейнеру. В стилях прописать значение, которые будет добавлять нужным категориям display:block, а всем остальным display:none. По желанию добавить анимации. Пример основного кода:

<div class="Buttons">
 <button>Показать 1 категорию</button>
 <button>Показать 2 категорию</button>
 <button>Показать 3 категорию</button>
</div>
<div class="categories">
 <a href="" class="cat1">Категория 1</a>
 <a href="" class="cat2">Категория 1</a>
 <a href="" class="cat3">Категория 1</a>
</div>

Пример срабатывания: при нажатии Показать 2 категорию, добавляем класс к categories - viewcats2.
Стили

.viewcats2 a {display:none;}
.viewcats2 .cat2 {display:block;}

Всех благодарю за ответы, искал 2 дня. Проблема заключается и правда в цветопередаче.

Зашел по адресу chrome://flags/#force-color-profile, при его настройке цвета возвращаются, правда не те что нужно, но уже прогресс. Всем спасибо еще раз за тесты.