Почему мой GIF пикселируется в Firefox, а не в браузере Google Chrome?

Question

У меня есть gif в качестве логотипа на моей навигационной панели, в google chrome gif выглядит нормально, но в Firefox и Internet Explorer он становится пиксельным.

Здесь под результатом слева Chrome Right Firefox:

Как я могу это исправить, я уже пробовал это:

Image-rendering: -webkit-optimize-contrast или это image-rendering: optimizequality;

Но ни один из них не приводит к резкому гифу

Вот HTML с CSS:

<img src="/img/dasbot-logo-wit.gif" alt="" class="logo-img">

img {
    max-width: 100%;
    height: auto;
}

Как это возможно и как я могу это исправить?

Вот ссылка gif: https://gph.is/2HYzaqT

Answer 1

Для всех нас этот логотип имеет пикселизацию по краям слов. Чтобы это исправить, вы должны загрузить какое-то приложение (я рекомендую Coreldraw, просто используйте пробную версию), а затем быстро проследить каждый кадр в анимации. Быстрая трассировка просто отслеживает внешнюю часть элемента и делает его не пиксельным. У него также есть другие функции (лазерная резка), но это сейчас не имеет значения.

Как только ваш gif-файл будет отслежен, вы должны повторно загрузить его обратно на giphy. Это не решение для кодирования, так как это проблема с вашим GIF.