QOI Peek

Preview QOI (Quite OK Image Format) image files directly in VSCode.

中文说明

Features

• Automatically renders QOI images when opening .qoi files
• Supports RGB (3-channel) and RGBA (4-channel) images
• Checkerboard background for RGBA transparency visualization
• Info bar showing resolution, channels, colorspace, and file size
• Auto-fit scaling with centered display
• Pure TypeScript QOI decoder, zero external dependencies

Usage

Install the extension, then open any .qoi file in VSCode to preview it.

Development

# Install dependencies
npm install

# Compile
npm run compile

# Watch mode (auto-compile on save)
npm run watch

Press F5 to launch the Extension Development Host for debugging.

Project Structure

vscode-qoi/
├── package.json               # Extension manifest
├── tsconfig.json              # TypeScript config
├── media/
│   └── editor.css             # Preview UI styles
└── src/
    ├── extension.ts           # Extension entry point
    ├── qoiDecoder.ts          # QOI decoder
    └── qoiEditorProvider.ts   # Custom readonly editor provider

How It Works

• Registers a CustomReadonlyEditorProvider for .qoi files
• Inline QOI decoder (~120 lines) implementing all 6 QOI opcodes
• Sends decoded RGBA pixel data to a webview canvas via postMessage

About QOI

QOI is a lossless image format designed by Dominic Szablewski. It offers 10-30x faster encoding/decoding than PNG, with a spec that fits on a single page. See qoiformat.org.