Texture Optimization and Atlases

Audit Texture Usage

Before optimizing, you need to know what you are working with. List every texture file in your project and record its dimensions, format, file size, and where it is used. Most game engines can export this information, or you can write a simple script that walks your asset directory. Identify textures that are oversized for their usage. A 2048x2048 texture used for a small in-game icon is wasting 15.9 MB of GPU memory to display a 64x64 pixel area on screen.

Check for duplicate textures. Artists sometimes export the same texture under different filenames for different objects. Also check for textures that are loaded but never rendered, which happens when scenes are reworked but old references remain. Removing unused textures is the easiest optimization because it has zero impact on visuals.

Use SpectorJS to capture a frame and inspect which textures are actually bound during rendering. This shows you the ground truth of what the GPU is using, which may differ from what your asset manifest claims.

Right-Size Every Texture

Texture resolution should match the maximum number of pixels that texture will ever occupy on screen. A wall texture that the player can walk up to and press their face against might justify 2048x2048. A wall texture in a distant background never needs more than 512x512. A skybox texture that stretches across the entire screen might be 2048x1024, but a small UI button needs only 64x64.

The formula is straightforward: if an object covers at most N pixels on screen and is mapped with M texels of UV space, then the texture resolution should be roughly N divided by M, rounded up to the next power of two. In practice, most developers find that halving their largest textures from 4096 to 2048 or from 2048 to 1024 produces no visible difference during gameplay while cutting memory by 75 percent per texture.

Ensure all texture dimensions are powers of two (256, 512, 1024, 2048, 4096). WebGL requires power-of-two textures for mipmapping and texture wrapping. Non-power-of-two textures work but cannot use mipmaps or repeating wrap modes, which limits their usefulness for 3D rendering. Many GPUs also store non-power-of-two textures less efficiently.

Pack Textures into Atlases

A texture atlas combines many small images into a single large image with a coordinate map that tells the renderer where each sub-image is located. Atlasing reduces texture bind operations, which are one of the most expensive state changes in WebGL. A 2D game with 200 individual sprite images needs 200 texture binds per frame in the worst case. The same sprites packed into a single 4096x4096 atlas need only one bind.

Use a tool like TexturePacker, Free Texture Packer, or the Phaser atlas generator to create atlases automatically. These tools arrange sprites to minimize wasted space, generate the JSON coordinate map, and support trimming transparent pixels to pack more efficiently. Set a maximum atlas size of 4096x4096, which is the guaranteed maximum texture size in WebGL 1.0. WebGL 2.0 supports 8192x8192, but 4096 is safer for compatibility.

For 3D games, combine textures that are used together on the same objects. If a character has separate diffuse, normal, and roughness textures, those three textures are always bound at the same time, so atlasing them together does not reduce binds. Instead, atlas diffuse textures from multiple objects that share the same shader, so you can draw all of those objects with a single texture bind.

Be aware that atlasing affects texture filtering at sub-image boundaries. When the GPU samples near the edge of a sub-image in an atlas, it can bleed colors from the neighboring sub-image. Prevent this by adding a 1 to 2 pixel padding border around each sub-image and by using clamp-to-edge sampling when rendering individual sprites.

Use GPU-Compressed Formats

Standard image formats like PNG decompress to raw RGBA pixels on the CPU and then upload to the GPU. A 2048x2048 RGBA texture is 16 MB in GPU memory regardless of how well PNG compressed the file on disk. GPU-compressed formats like ASTC, BC7, and ETC2 remain compressed in GPU memory, typically using 4 to 8 bits per pixel instead of 32, which means that same texture occupies 2 to 4 MB in VRAM.

Use Basis Universal to encode your textures into KTX2 containers. The KTX2 file contains a universal intermediate format that the browser transcodes to whichever GPU format the hardware supports. ASTC is used on most mobile GPUs, BC7 on desktop GPUs, and ETC2 as a WebGL 2.0 fallback. The transcoding step takes a few milliseconds per texture and happens only once at load time.

For textures with alpha channels, UASTC encoding preserves alpha quality better than ETC1S. For opaque textures like terrain or diffuse maps, ETC1S produces smaller files. Normal maps require special attention because standard compression algorithms distort the direction vectors. Encode normal maps with the normal map flag in Basis Universal, which adjusts the algorithm to preserve angular accuracy.

Generate and Configure Mipmaps

Mipmaps are pre-computed, progressively smaller versions of a texture. When an object is far from the camera and occupies few pixels on screen, the GPU samples from a smaller mip level instead of the full-resolution texture. This reduces aliasing artifacts (the shimmering you see on distant textures) and improves GPU cache performance because the sampled texels are closer together in memory.

Generate mipmaps at build time rather than at runtime. Most texture tools and engines support this. A mipmap chain adds 33 percent to the texture's total memory, but the quality and performance improvement is worth the cost for any texture used on 3D geometry. Disable mipmaps for textures that are always displayed at full resolution, such as UI elements and 2D sprites that do not scale.

Configure anisotropic filtering for textures viewed at oblique angles, such as ground textures and roads. Anisotropic filtering at 4x to 8x produces much sharper results than trilinear filtering alone, with a small GPU cost. Set this per-texture or globally through your engine's rendering settings.

Pack Channels Efficiently

Many rendering workflows use separate grayscale textures for metallic, roughness, ambient occlusion, and height. Each of these grayscale images uses a full RGBA texture slot even though it only contains one channel of data. Channel packing combines four grayscale maps into the RGBA channels of a single texture, reducing the number of textures by 4x and the number of texture binds accordingly.

A common convention is to pack ambient occlusion in the red channel, roughness in the green channel, and metallic in the blue channel, with the alpha channel available for height or emission masks. This is sometimes called an ORM map. Adjust your shader to read each component from the correct channel. Most modern engines support this convention natively.

Channel packing also works for 2D games. If you have separate images for a sprite's diffuse color, glow mask, and damage overlay, pack the glow and damage data into the alpha channel or into a secondary texture's channels. This reduces draw calls and simplifies your rendering pipeline.

Verify in the Profiler

After applying texture optimizations, measure the results. Use SpectorJS to capture a frame and compare texture memory usage, texture bind count, and draw call count against your pre-optimization baseline. Chrome DevTools memory panel shows overall GPU memory consumption, which should decrease after switching to GPU-compressed formats.

Run your game on the lowest-spec target hardware and confirm that frame rate has improved. Texture optimizations reduce both memory pressure and rendering cost, so you should see gains in both memory headroom and frame time. If frame rate did not improve, the bottleneck is elsewhere and you should profile other subsystems.