Нагружают ли gif изображения сайт?

Question

[Александр]

На сайте есть пару десятков gif картинок, если они не нужны, скрываются под display:none, нагружает ли страницу работающие гифки?
У себя на пк понять не могу

Comments

[Антон]

Станет ли тяжелее стакан, если налить в него воды?

Answer 1

[Сергей Золотарёв]

Какие гифки хотите загрузить: из мини-видео или больших видеороликов?
Если у вас гифка из больших роликов-побробуйте сжать, чтобы гифка грузилась быстро на сайте и экономила трафик загрузки информации!
Здесь приведены рекомендации по правильному исполь...
Онлайн-оптимизатор гифок для вашего сайта
P.S.:

Яндекс.Дзен имеет последний хитовый функционал-в качестве комментариев к любой статье можно отправить любую гифку, а алгоритм обработки изображений в комментах сам сжимает гифку, если у нее большой размер...

Comments

[Сергей Золотарёв]

Кстати, ваш сайт кэширует гифки в браузерах посетителей?

Answer 2

[Александр Аксентьев]

У себя на пк понять не могу

Открыть Developer Tools и посмотреть в Network загружаются ваши гифки или нет не получается?

PS да скорее всего они загружаются, но последнее слово остаётся за браузером как он работает так и будет.

Comments

[Александр]

Перечитайте вопрос.

[Александр Аксентьев]

Александр, нагружают сайт или страницу вы определитесь? И что значит нагружают?

[Александр Аксентьев]

Александр, диспетчер задач в помощь тогда, тоже не ясна сложность в проверке. Очевидно что нагружают...

[Александр]

Александр Аксентьев, разницы в этом случае нет. Речь идет о поведении gif изображений. Если я поставлю зациклено анимацию css, это будет оказывать нагрузку, ведут ли себя gif так же?

И да, понятно дело, оперу они забивать будут, но речь идет не о ней, а о процессоре в первую очередь. Я не могу проверить, на моем пк нагрузка будет колебаться в пределе погрешности, для того что бы реально заметить нужно будет закинуть пару сотен обычных картинок и гифок. Если придется - сделаю, вот как раз что бы не тратить на это силы пишу тут.

[Александр Аксентьев]

Александр, это всё вопросы в пустоту, что за гифки, что за анимация.
Все же зависит от размера гифок и сложности анимаций. Т.е. вообще прямо персональные тесты надо делать на ваших данных и кроме вас никто не сделает это. "не могу у себя проверить" никак от этого не освобождает. Мы тем более не можем угадать.

Если речь про настолько простые гифки что их можно сделать на css, то очень вероятно что так и надо сделать, потому что гифки грузят по всем фронтам, да и прогрузка гифок ужасно работает(почему все уже давно пересели на всякие gifv/mp4/webm и прочие варианты заворачивания видео в контейнер, вместо гифок). Хотя с другой стороны мелкие гифки и не должны там сильно что-то грузить.

[Александр Аксентьев]

Александр, открыл хромом случайную страницу giphy, в диспетчере задач нагрузка 20-30% от вкладки и еще столько же GPU.

Закрыл нагрузка ушла, вот и весь тест.
Только вот как выше написал это вообще не коррелирует с тем что там у вас будет, потому что на гифи именно гифки которые "видео", а не мелкие анимации.

[Александр]

Александр Аксентьев, гифки сделанные из видео, через css их не сделать

[Rustam Bainazarov]

Александр, большие GIF могут нагрузить браузер, если их несколько и если устройство слабое. Либо же если на странице большое количество небольших GIF. В последний раз, когда я тестировал инструкцию, где было ~15 больших GIF, она подтупливала на ноутбуке с Core i3 2XXX и 4 Гб ОЗУ.

Я помню ещё, как мой старый телефон лет 5 назад глючил, когда я а странице было штук 20 небольших GIF'ок.

Поэтому, конечно, да, нагружают, но это сильно зависит от размера, частоты кадров, количество таких GIF и т. п.

[hzzzzl]

Александр,

Если придется - сделаю, вот как раз что бы не тратить на это силы пишу тут.

for(let i = 0; i < 100000; i++) { document.innerHTML += '<img src="gifka.gif" style="display:none">' }

[Александр]

Рустам Байназаров, спасибо