PNG vs JPEG vs WebP for Game Textures: Format, Alpha, Artifacts, and Memory

Why file size does not equal runtime texture memory

PNG, JPEG, and WebP are source or delivery containers. Their compressed byte length matters for storage, downloads, patching, and decode time, but the renderer usually samples a decoded or GPU-compressed texture selected by the build pipeline. Resolution, channel count, GPU block format, mip chain, streaming, and resident mip range determine the runtime cost.

The PLAYTEX AI inspector deliberately reports an RGBA8-equivalent baseline for a consistent comparison. In this 512 × 512 study, every sample is 1,048,576 bytes at the top mip and 1,398,100 bytes for a complete RGBA8 mip chain. A real build may use fewer channels, BC/ASTC/ETC2, virtual texturing, or partial residency, so profile the cooked target.

Why color maps tolerate loss better than normal maps

Opaque albedo often contains correlated color and natural variation, so a carefully chosen lossy encode can be acceptable. Judge it in the shaded material and at representative distance, not only as a flat image. Avoid baking lighting into base color and keep the color texture tagged sRGB at import.

A normal map stores vector components, not display color. In this test, JPEG q82 produced a 5.418° mean angular error and a 24.765° p95 error; lossy WebP q82 produced 5.468° mean and 24.433° p95. Those numbers are source-specific, but they demonstrate why a visually similar purple preview can still change lighting.

Why masks expose ringing and threshold contamination

Metallic, opacity, material-ID, and packed masks can depend on exact endpoints or thresholds. A small halo of intermediate values may create partially metallic pixels, soft cutout edges, or leaking material regions after filtering and mip generation.

For the binary PLAYTEX AI-derived mask, PNG and lossless WebP introduced no new midtones. JPEG q82 introduced intermediate values in 1.926% of tested pixels and reached a maximum channel delta of 115/255. Lossy WebP q82 reduced that to 0.018% in this sample, but lossless remains the safer authoring choice.

Alpha support is more than a yes-or-no column

PNG stores unassociated alpha and can preserve RGB behind transparent pixels. Ordinary JPEG has no alpha channel, so the test flattened the sample over #07111a before encoding. That is permanent: changing the background later cannot recover the original coverage or edge RGB.

WebP supports alpha with lossy or lossless RGB. At alpha-quality 100, this test preserved alpha exactly in both WebP modes. The lossless encoder still normalized RGB under fully transparent pixels, matching Google's documented caveat; that invisible RGB can matter to dilation or future editing even when the current composite looks identical.

What Unity 6.5 and Unreal Engine 5.8 currently document

Unity 6.5 lists JPG and PNG among its readable texture source formats, then applies Texture Import Settings and platform overrides to choose the imported texture. Unreal Engine 5.8 likewise lists JPEG/JPG and PNG, and its Texture Asset Editor exposes sRGB, compression, maximum size, mip, and streaming controls.

Neither current source-format list names WebP. That is a documentation-scoped compatibility result, not a universal claim that no plugin or custom importer can read WebP. Keep WebP for browser or network delivery when useful, but convert or test the exact engine pipeline before committing it as the studio master.

Settings Reference

Encoding controls that change the result

Record these values beside every comparison; a bare extension is not a reproducible setting.

• Lossy quality: Changes quantization and therefore file size and reconstruction error. Test at the viewing distance and on the most artifact-sensitive map, not only the albedo.
• JPEG chroma subsampling: Reduces color resolution, commonly using 4:2:0 for smaller photographic files. Avoid for vector data and colored masks; compare 4:4:4 when color-edge precision matters.
• WebP mode: Selects lossy RGB or lossless coding; alpha can exist in either mode. Use lossless for data or exact masks only when the destination supports WebP and the byte result is actually useful.
• WebP alpha quality: Controls alpha coding separately from lossy RGB in supporting encoders. Keep it high for sprites, decals, foliage, and cutouts, then composite over multiple backgrounds.
• PNG bit depth and color type: Changes channel precision and whether alpha is stored at all. Preserve 16-bit source data only when the next tool and engine path can use it; remove truly unused alpha.

Engine import controls that determine runtime behavior

These choices sit after the source file and can change memory, quality, and sampling independently.

• Texture type / compression preset: Selects normal-aware, mask, color, or other build behavior and target formats. Assign the semantic role before judging memory or artifacts.
• sRGB: Applies the display transfer function for color data. Enable for base/emissive color; disable for normal and scalar/packed data maps.
• Maximum size: Caps imported dimensions per platform and changes every downstream memory figure. Set from texel density and screen coverage, not from the source's maximum available resolution.
• Mipmaps and streaming: Add lower-resolution levels and control which levels may be resident. Use for 3D textures unless a deliberate UI/sprite case says otherwise; profile active residency.
• Alpha handling: Can keep, split, discard, or choose a different compressed target. Remove unused alpha; preserve real coverage and verify the material blend mode.

A format decision that survives engine import

Use PNG for lossless texture data, hard-edged masks, and dependable alpha. Use JPEG only for opaque color textures when block and chroma artifacts pass review. Use WebP for compact delivery when the destination supports its selected lossy or lossless mode. The source extension alone does not state runtime VRAM.

Step 1: Classify the map before choosing a container

Treat base color and emissive color as display color, tangent-space normals and scalar masks as data, and alpha as coverage. A filename cannot replace this semantic classification.

Step 2: Build one coherent source set

Use PBR Map Generator to create aligned color, normal, roughness, metallic, AO, height, and emission maps before comparing delivery formats. A codec test is only meaningful when every variant starts from the same pixels.

Create the source map set

Step 3: Encode representative copies and inspect artifacts

Keep the master lossless. Test JPEG or lossy WebP at a named quality and chroma setting, then compare high-frequency edges, normal-vector response, mask thresholds, and alpha composites. Do not generalize one material's byte savings to another.

Step 4: Measure file metadata and decoded cost separately

Open Texture Budget & VRAM Analyzer with representative files or a ZIP. Record source bytes, dimensions, channels, alpha evidence, RGBA8-equivalent memory, mip overhead, and the target compression comparison as separate fields.

Inspect representative files

Step 5: Convert names, channels, and normal conventions for the engine

Use PBR Engine Converter after the semantic decision. It prepares target naming, channel packing, and normal-map convention; it does not make a lossy source lossless again.

Prepare the engine handoff

Step 6: Set import type, color space, compression, and mips

In Unity 6.5 or Unreal Engine 5.8, mark color textures as sRGB and normal/mask data appropriately, choose platform compression, and review the imported texture. Their current source-format documentation lists PNG and JPEG but does not list WebP, so treat WebP as a delivery format unless your exact destination path proves support.

Step 7: Run the complete set through preflight

Use Material Preflight to verify map roles, alpha, color-space expectations, normal convention, and engine packaging together. Finish by profiling the representative scene on target hardware.

Run material preflight

Failure symptoms that point back to the format decision

• Blocky or swimming highlights on a normal-mapped surface: compare the lossless normal and confirm normal-map import plus linear sampling.
• Dirty metallic or opacity boundaries: inspect the mask histogram for intermediate values added by lossy compression.
• Dark, white, or colored fringes on cutouts: verify straight versus premultiplied alpha, edge RGB, the chosen matte, and mip dilation.
• A tiny source file still consumes unexpected memory: inspect dimensions, decoded channels, GPU format, complete mip chain, streaming, and resident levels.
• WebP works in a browser but not in an engine import dialog: convert at the pipeline boundary or provide a tested importer instead of renaming the extension.
• A re-encoded texture degrades every revision: return to the lossless master rather than chaining lossy exports.

Is PNG always best for game textures?

No. PNG is a strong lossless authoring default, especially for normal/data maps, masks, and alpha, but it can transfer more bytes than a reviewed lossy color texture. Engine builds normally convert the source to a target GPU format anyway.

Can JPEG be used for normal maps?

It can be decoded, but it is usually a poor master because DCT quantization and chroma subsampling change vector components. In this PLAYTEX AI sample, JPEG q82 produced 5.418° mean and 24.765° p95 angular error.

Does WebP support transparency?

Yes. WebP supports alpha with lossy or lossless RGB. Record alpha quality separately, test composites, and remember that some lossless encoders can normalize RGB where alpha is exactly zero.

Does a smaller WebP use less VRAM than a larger PNG?

Not necessarily. Smaller encoded bytes reduce transfer or storage. Runtime memory depends on decoded dimensions, channels, GPU compression, mipmaps, streaming, and residency selected by the engine pipeline.

Should color textures use sRGB?

Base-color and ordinary emissive-color textures normally use sRGB sampling. Normal, roughness, metallic, AO, height, opacity data, and packed masks normally use linear/data sampling.

Can Unity 6.5 import WebP textures?

Unity 6.5's current documented readable texture source formats list JPG and PNG but not WebP. A plugin or custom pipeline may add support, so test that exact path; do not infer built-in support from browser compatibility.

Can Unreal Engine 5.8 import WebP textures?

Unreal Engine 5.8's current documented texture source formats list JPEG/JPG and PNG but not WebP. Convert the source or validate a specific importer before choosing WebP as an engine-facing asset.

What is the safest studio workflow?

Keep a lossless master, create named delivery variants, measure representative files, convert maps for the target engine, verify import settings and the cooked GPU format, then profile the scene on representative hardware.