Как оптимизировать визуализацию анимированных картинок?

Question

[TheSnegok]

Здраствуйте, столкнулся с проблемой оптимизации большого количества .webp на странице, думал может рендерится что-то постоянно, но нет, вот мой тестовый сайт:
тык
При открытии работает нормально, а вот при визуализации изображений подтормаживает, вот код вывода самих изображений:

const Image = React.memo((props) => {
	let gif = props.gif;

	const [loader, setLoader] = useState(false);

	let clickCopy = (elem) => {
		navigator.clipboard.writeText(elem);
	};

	const loadImage = () => {
		setLoader(true);
	};

	return (
		<div className={s.wrapper} key={gif.id}>
			<div
				className={s.image}
				data-title="Нажмите чтобы скопировать ссылку на изображение"
			>
				<picture>
					<source type="image/webp" />
					<img
						src={gif.images.original.webp}
						alt={gif.slug}
						key={gif.id}
						className={!loader ? s.gifNone : s.gif}
						onClick={() => clickCopy(gif.images.original.url)}
						onLoad={() => loadImage()}
						crossOrigin="anonymous"
						width="361"
						height="203"
					/>
				</picture>
			</div>

			{!loader && <div className={s.loader}></div>}
		</div>
	);
});

Comments

[Denisca Gareev]

странно, может я плохой тестер, я не заметил причин для оптимизации

[TheSnegok]

Denisca Gareev, Но сайт точно не выдаёт 60 fps

[Denisca Gareev]

TheSnegok, Сайт классный. Да, не 60, но консольные 30! xD

[Denisca Gareev]

TheSnegok, стоит убрать сглаживание, зачем создавать отдельный класс каждой гифке?

img {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */image-rendering: -moz-crisp-edges;          /* Firefox                        */image-rendering: -o-crisp-edges;            /* Opera                          */image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */image-rendering: pixelated; /* Chrome */image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}

[TheSnegok]

Denisca Gareev, Это реакт добавляет

[RAX7]

TheSnegok, анимация большого числа гифок съедает много ресурсов, для оптимизации можно приостановить анимацию для изображений, которые не попадают во вьюпорт, либо просто для <picture> вешать display: none.

[TheSnegok]

RAX7, Спасибо, сделал, но это не очень помогло вот