У меня есть веб-сайт, который развернут на Netlify ниже: https://hungry-mclean-362570.netlify.com/
Github: https://github.com/shindosu/mutsuki-portfolio-client
Чтобы дать немного фона, приложение работает с React JS. На домашней странице в <div id="right-side"> у меня есть два рендеринга компонентов React. Каждый из них работает от ТРИ JS, и он бесконечно чередуется между двумя изображениями с анимацией перехода изображения через GSAP. Итак, в общей сложности у меня есть 4 изображения, которые отображаются с правой стороны. Размер изображений составляет около 13 МБ (больше изображений впереди)
У меня также есть ползунок, где, если значение достигает >=50, тогда стили и изображения изменятся, чтобы пользователь знал " категория "изображений, на которые они смотрят.
Так вот, это совсем близко, так что не забывайте о незавершенности. Что меня беспокоит, так это то, что время загрузки изображений (обработанное THREE JS, GSAP) занимает безумно много времени для загрузки, что, я думаю, также влияет на время загрузки других элементов.
Как я могу ускорить процесс загрузки? Я попытался уменьшить размеры изображения (раньше было 60 МБ, а сейчас 13 МБ!); я пытаюсь отрезать больше, но самое большее, что я могу получить - это около 600 КБ / img без потери какого-либо существенного качества.
Есть ли другой способ обойти это? Это будет веб-сайт портфолио, так что на странице проектов будет больше изображений, поэтому я предполагаю, что если я продолжу в том же духе, что и сейчас, результат будет таким же или даже хуже, чем на странице, которую я Я работаю над.
Спасибо за ваше время!