Optimizing assets for graphics heavy Web Applicatoins: tips and tricks from the game dev background
summary
Skeletal rigs replace frame‑by‑frame sprites so sprite sheets shrink from tens or hundreds of frames to just parts plus JSON, cutting some projects ~30–40% and preserving flexible FPS; spine 2d runtimes integrate with Pixi-like engines. A 1920×1080 1s frame sequence compresses to ~2.9MB at 15FPS but a 3s MP4 is ~660KB; writing GLSL shader effects (one dev two days) moves work to GPU and lowers CPU; a pre‑render bake halves the network “red zone” and yields ~40% faster overall load.
AI-written summary · about
chapters (13)
- 0:00Start
- 2:38Skeletal Animation
- 5:22Runtimes
- 9:23Shaders
- 12:12Pre-Render
- 13:42Color Filters
- 14:02Mirror Packing
- 14:27Buttons
- 15:08Pizza Slice Method
- 15:32Cons and Pros
- 16:20Conclusions
- 18:02Particle System
- 18:40Texture Packing
related talks
23mOptimizing HTML5 Games: 10 Years of Learnings
47mOptimising for the Web
35mGamedev on React + WebGL
58mMemes, Shaders and PixiJS: How an RTS on the Web Loads in 3 Seconds and Delivers 120 FPS
39mLife of a pixel: A visual explanation of rendering performance
33mSaving the Web 16 Milliseconds at a Time
37mTricky JS and WebGL practices to achieve the best performance on mobile
29mSpeed Essentials: Key Techniques for Fast Websites