From Vectors to Pixels: mastering images
summary
Image handling changes app performance and UX, not just aesthetics: explains GPU textures and sampling, shows raster decoding cost and cache behavior, gives a run length example (60 bytes → 17 bytes) and points to Flutter’s Impeller engine. Compares raster images and vector graphics (SVG parsing cost, CPU tessellation), demonstrates shader limits for selective recolor, and presents an SVG bundle tool that outputs raster variants, a sprite sheet, and generated Dart code to auto-switch assets by size and density.
AI-written summary · about
chapters (16)
- 0:00Image management in apps
- 1:27Computer graphics basics
- 4:25Raster images and GPU memory
- 7:46Flutter image handling
- 8:52Raster limits at scale
- 10:40Crisp rendering solutions
- 12:29Runtime shader updates
- 15:25Shader constraints
- 17:56Vector graphics APIs
- 21:29SVG for vector graphics
- 24:05SVG package performance
- 25:33Vector binary format
- 27:42Optimizing vector assets
- 28:45Raster vs vector
- 30:51SVG Bundle tool
- 33:27Q&A
related talks
32mImages 101
39mLife of a pixel: A visual explanation of rendering performance
25mThe Life of an Image on iOS
26mSVG, Canvas, and WebGL: The Power, the Beauty, and the Cost
37mRendering performance inside out
32mCode Meets Art: Flutter for Creative Coding
46mGraphics performance - Best practices
43mPortable Material: Flutter physical models