Modern image and texture formats

Play this lesson

Two kinds of heavy

Priya's dashboards show two image problems. On the website, the key art is a 3.1 MB PNG that takes ages on mobile data. Inside the game, 40 shard textures make budget phones run out of memory.

These are different problems: download size (bytes travelling over the network) and GPU memory (space the pictures take while the game draws them). Fixing one doesn't fix the other.

AVIF and WebP

Order it

index.html
<picture>  <source type="image/webp"    srcset="art.webp">  <source type="image/avif"    srcset="art.avif">  <img src="art.jpg"    width="1200"    height="675"    alt="Shard Garden"></picture>

Kai wrote this, and almost no player gets the smaller AVIF file. Why?

  1. WebP is listed first, and nearly every browser supports it, so the browser stops there
  2. AVIF needs a different img tag
  3. The fallback JPEG must come first
Show the answer

WebP is listed first, and nearly every browser supports it, so the browser stops there

The browser uses the first source in a format it supports. Put AVIF first, then WebP, and keep the img last as the fallback.

Small files, big memory

The GPU can't draw straight from an AVIF or PNG. The picture is first decoded into raw pixels. In the common RGBA8 format, each pixel stores red, green, blue and alpha (see-through) in 8 bits each: 4 bytes.

A 2048 by 2048 texture is 4,194,304 pixels, times 4 bytes: 16 MB. That is true whether the download was 200 KB or 2 MB. Mipmaps, smaller copies for distant objects, add about 30% more. And on phones, the CPU and GPU share the same memory.

Do the math

A Shard Garden texture is 1024 by 1024 pixels in RGBA8, with no mipmaps. About how much GPU memory does it take?

  1. 4 MB
  2. 1 MB
  3. The same as its file size
Show the answer

4 MB

1,024 times 1,024 is 1,048,576 pixels, and each takes 4 bytes, so about 4 MB. The download size doesn't matter once the picture is decoded.

Textures the GPU keeps compressed

GPU compressed texture formats stay compressed in GPU memory, and the GPU reads them directly. They are smaller and faster to sample. Their quality is lower than JPEG, so they suit colours, not data like surface directions.

The catch: no format works everywhere. Computers mostly read S3TC, Android phones ETC, iPhones PVRTC, and newer hardware ASTC, which has better quality or smaller files.

One file for every GPU: KTX2 and Basis

KTX 2.0 is the Khronos Group's container file for GPU textures. Inside it, Basis Universal stores the texture once, in a super-compressed form. When the game loads, a small library transcodes it into whatever format this device's GPU reads: BC7, ETC2, ASTC and others.

One file ships to every platform. Over the network it is much smaller than ordinary GPU textures, closer to a JPEG, and in GPU memory it stays compressed.

Quick check

Why ship Shard Garden's in-game textures as KTX2 with Basis instead of AVIF?

  1. After transcoding they stay compressed in GPU memory, and one file works on every GPU
  2. Browsers can't show AVIF images
  3. KTX2 files are always smaller downloads than AVIF
Show the answer

After transcoding they stay compressed in GPU memory, and one file works on every GPU

An AVIF becomes full-size RGBA8 pixels in GPU memory. A Basis texture becomes a GPU compressed format, so the same garden needs far less memory.

Quick check

A 200 KB AVIF and a 2 MB PNG of the same 2048 by 2048 picture take about the same GPU memory once decoded as RGBA8.

Show the answer

True

Both become 2048 times 2048 pixels at 4 bytes each, about 16 MB. The file format only changes the download.

Next: the code itself

Art is the heaviest download in most games. Code is the most expensive one byte for byte, because the phone has to run it.

Bolt says: Next: code splitting, so players only download the code they use.

Fact-checked 11 October 2026