react와 framer-motion으로 웹앱게임만들었습니다.

Question

시뮬레이션 게임을만들었는데요,div에 백그라운드 이미지입혔고 하단에 말풍선 세개 택1해서 대화+백그라운드 이미지가 달라지는 형식입니다.이런 게임만들때 이미지 최적화는 어떤식으로해야하나요? webp확장자로 다 바꿔줘야할까요?preloading같은걸로 어느정도 속도는 맞췄으나 새로고침하거나하면 새롭게 이미지를 로딩하기때문에 자원소모가 좀 심했습니다.그래서 vercel무료버전에서 유료플랜으로 갈아타게됬는데..nextjs/image 태그를쓰면 캐싱처리되서 좀 나아질까요?또, 느린 모바일환경에서는 어떤식으로 처리를해줘야 좋았을지 의견같은거 툭툭 던지듯이라도 주신다면 정말 감사하겠습니다

HJOW · Answer

일단 생각나는 몇 가지를 얘기해보면모든 이미지가 png급일 필요는 없습니다. 투명도가 필요없는 이미지들은 jpg로 바꾸는 것만으로도 다운로드 속도가 획기적으로 개선될겁니다.그다음으로, 어쩔 수 없는 고용량 리소스들은 메인화면에서 사전 캐싱하는 방법이 있습니다.정적 리소스 (이미지, 폰트, js, css 등) 들은 브라우저가 알아서 캐싱을 합니다. 개발자가 따로 뭔가 할 필요가 없습니다.메인화면에서, 바로 본화면으로 넘어가지 말고, 로딩창을 띄워놓고, 숨김영역에서 자바스크립트로 리소스들을 불러올 수 있습니다. 자바스크립트와 iframe 을 적절히 활용하면 가능합니다.

빠른코딩 · Answer

저는 이미지는 코드안에 안넣어요cloudinary에 이미지 넣어요무료 플랜 있는데이마저도 aws cf랑 연결하면 사용량도 적어지고 캐시효과도 누릴수 있죠

ansdbduf · Answer

성능을 올리고 싶다면 아래 연구 - 이미지 디코딩없이 바로 gpu로 전달GitHub - BinomialLLC/basis_universal: Basis Universal GPU Texture CodecBasis Universal은 성능 최적화에 꽤 강력한 도구예요. 이 오픈소스 GPU 텍스처 코덱은 이미지 디코딩 없이도 GPU에 직접 텍스처 데이터를 전달할 수 있도록 설계되어 있어서, 특히 실시간 렌더링이나 게임, 웹 기반 그래픽에서 큰 이점을 줍니다.간단히 요약하면:Basis Universal은 .basis 또는 .ktx2 포맷으로 텍스처를 저장하고,런타임에 GPU가 지원하는 포맷(예: BC7, ASTC, ETC2 등)으로 빠르게 트랜스코딩합니다.이 방식은 이미지를 CPU에서 디코딩하지 않고, GPU가 직접 사용할 수 있는 포맷으로 변환해 메모리 사용량과 로딩 시간을 줄여줍니다.특히 UASTC 모드는 고품질을 유지하면서도 다양한 GPU 포맷으로의 트랜스코딩을 지원해요.Binomial의 GitHub 저장소에서 Basis Universal 프로젝트를 확인하실 수 있고, Vulkan과 함께 사용하는 예제도 공식 문서에 잘 정리되어 있어요.

react와 framer-motion으로 웹앱게임만들었습니다.

3개의 답변

Q&A 목록