‹ Guides

Preparing graphics for Pico Portal OS

Choose display dimensions, fit and dithering settings, and inspect an RGB565 asset before copying it to the Pico.

A graphic that looks good on a laptop can turn into a blur on a small display. For Pico Portal OS, start with the target size and decide which details need to survive. A menu icon and a full-screen picture need different treatment.

The Pico Portal OS Image Converter prepares the device's RGB565 assets and a PNG preview. It also opens headerless RGB565 BIN files when you supply the correct dimensions and byte order.

Start with a small, predictable graphic

Use the transparent shapes sample to try the controls. It has clear edges and a partially transparent area, which makes cropping and background changes easy to notice. Choose Choose image or BIN, then select Menu icon: 20 x 20 under Preset.

Keep Fit on Contain for the first pass. The whole composition stays inside the output bounds, with unused space filled by the background. Cover / crop fills the output but can remove part of the source. Stretch uses both dimensions as entered and can change the shapes' proportions. Try each on the same source so the differences are easy to compare.

For a real menu icon, use a simple white design on a transparent background and a black output background. The OS treats black as transparent for these icons and draws the non-black pixels in the active theme color. The sample is for learning the converter, not a finished theme icon.

Check dimensions and byte count together

A 20 by 20 RGB565 asset has 400 pixels, with two bytes per pixel: 800 bytes. The exported BIN should have that exact length. It has no header storing its width, height, or format. Keep those details with the file, especially when moving several assets into a project.

The display presets use 135 by 240 and 240 by 320 portrait layouts. The panels are often described by their 240-by-135 and 320-by-240 hardware resolutions, so watch the orientation instead of swapping dimensions to match a product label. Use Custom for an asset that only covers part of the screen.

The output is row-major, big-endian RGB565. Its red and blue channels have five bits each, and green has six. Raw files written with the opposite byte order can have the right length and still show the wrong colors. When reopening a BIN, set BIN source width, BIN source height, and BIN byte order to match the original export.

Sampling and dithering

Pixel / nearest keeps hard transitions when scaling pixel artwork. Smooth interpolates between source pixels and is useful for pictures, but can soften a tiny icon. Judge the output at the size it'll be shown, not only from a large preview.

RGB565 can't represent every source color. Ordered 4 x 4 dithering adds a repeating pattern, and Floyd-Steinberg spreads quantization error into neighboring pixels. Compare both with None on a gradient or shaded graphic. More texture isn't automatically better, especially when the asset needs to read clearly at 20 pixels wide.

Brightness, contrast, saturation, grayscale, inversion, and the binary threshold are available too. Start with one change. If a narrow line disappears after scaling, raising contrast won't necessarily bring it back. Sometimes the fix is to simplify the original design.

Keep the PNG and device output separate

Select Download RGB565 BIN for the device asset, or Download preview PNG for a normal image you can inspect on your computer. Preview alpha can preserve transparency in the preview, but RGB565 has no alpha channel. The BIN is always flattened onto the selected background.

The 20-by-20 example's export size and preview were checked in Chromium 146 on Windows. That's a browser check, not a test on a physical panel. Check color, orientation, and placement on your own device before finishing an asset set.

The current Pico Portal project explains the OS and display profiles. Its USB screenshots use RGB332 or indexed P8 framebuffers. Those are capture formats, not the RGB565 asset format prepared here. The screen capture guide covers that side of things.