Compressed Textures
Compressed textures significantly reduce memory usage and GPU upload time, especially on mobile devices or lower-end hardware. PixiJS supports multiple compressed texture formats, but you must configure the appropriate loaders before using them.
Supported Compressed Texture Formats
PixiJS provides built-in support for several widely-used compressed texture formats:
| Format | File Extension | Description |
|---|---|---|
| DDS | .dds | DirectDraw Surface format, supports DXT variants (S3TC) |
| KTX | .ktx | Khronos format, supports ETC and other schemes |
| KTX2 | .ktx2 | Modern container supporting Basis Universal and Supercompressed formats |
| Basis | .basis | Highly compressed format that can transcode to multiple GPU formats |
Registering Loaders
PixiJS does not automatically include compressed texture support. To use these formats, you must explicitly import the necessary loaders before loading any assets:
import 'pixi.js/dds';
import 'pixi.js/ktx';
import 'pixi.js/ktx2';
import 'pixi.js/basis';
You only need to import the loaders for the formats you're using. These imports must run before any call to Assets.load.
Using Compressed Textures in Assets
Once loaders are registered, you can load compressed textures just like any other asset:
import 'pixi.js/ktx2'; // Import the KTX2 loader
import { Assets } from 'pixi.js';
await Assets.load('textures/background.ktx2');
PixiJS will parse and upload the texture using the correct loader and GPU-compatible transcoding path based on the user's device.
Integration with AssetPack
AssetPack supports automatic generation of compressed texture variants during the build step. You can:
- Convert
.pngor.jpgfiles into.basis,.ktx2, or.ddsformats. - Reference compressed files in your manifest using the same aliases or wildcard patterns.
- Use the same manifest and loading workflow — PixiJS will resolve and load the best available variant based on the device.
Example
Your manifest might include:
{
"bundles": [
{
"name": "scene",
"assets": [
{
"alias": "bg",
"src": ["assets/bg.ktx2", "assets/bg.basis", "assets/bg.png"]
}
]
}
]
}
PixiJS will try to load bg.ktx2 or bg.basis first if the device supports it, falling back to bg.png as needed.