Consider taking a screenshot of super mario bros at its original resolution and saving it as an SVG file. The resulting file size will likely be significantly smaller. Why is this the case?

Images can be classified into two main types: raster, which utilizes a pixel matrix and is typically used for photographs, and vector, which contains shape information and is commonly used for drawings. Vector images require much less storage space and can scale to any resolution with minimal distortion compared to raster images.

In many cases, vector drawings can be represented using a series of textual commands. For instance, a command might instruct to draw a rounded blue rectangle from coordinates (0,50) to (100,200) with a border radius of 5. This approach drastically reduces the space needed to store an image. Additionally, vector images typically utilize a color gamut of just 256 colors, allowing a single byte to represent a color instead of the 4 bytes required in a 32-bit display system.

As a result, a frame created using vector graphics may only require around 4 kB of storage. For a game, there may be approximately 4 unique images (such as level start, player select, game play, and level completion). Except for the game play segment, the remaining images are largely static with some overlaid text. The game play segment comprises a cluster of images displayed according to the game logic. This allows developers to maintain the entire visual component within roughly 20 kB of storage, leaving ample space—around 11 kB—for the core game logic.

Today, developers can utilize JavaScript-based gaming engines to create platformer games with only a few kB of code. Depending on the choice of optimized PNG or SVG graphics, the entire game can be compressed to less than 30 kB when zipped. In contrast, a screenshot of the same game in JPG format may exceed 200 kB in size.