Last reviewed 31 Jul 2026

Applies to

Unity 2022.3 VRChat world projects Mesh and UI image display

Difficulty Beginner

Display Photos in Unity 2022.3

A photo can be displayed on a material in the 3D scene or as a Sprite in a Unity UI Image. Choose the workflow first, then configure the import type, proportions, material, and target-platform texture settings.

Place one photo in the scene

Use a Quad for physical wall art or a UI Image for interface content.

Import the image and select the correct Texture Type.
Assign it to a material on a Quad or to an Image inside a Canvas.
Match the image proportions, apply platform settings, and test from player distance.

VRChat Android note

VRChat recommends textures no larger than 1024 × 1024 for Android content and advises avoiding transparency where possible. Use an Android texture override and test the Android version rather than copying the PC import settings unchanged.

Choose the Display Method

Intended result	Unity setup	Texture Type
Framed photo, poster, sign, or gallery wall	Material on a Quad or custom frame mesh	Default
Menu, overlay, or screen interface	Image component inside a Canvas	Sprite (2D and UI)
Photo incorporated into an existing prop	Texture assigned through the prop’s material	Default
Image changed by a runtime system	Depends on the system’s required component and shader	Follow that system’s documentation

A world-space Canvas is still UI. A Quad with a material is scene geometry. The choice affects component setup, scaling, batching, lighting, and how the image is positioned.

Prepare the Source Image

Before importing:

Rotate the image to its intended orientation.
Crop unwanted borders.
Export in the color space and dimensions required by the project.
Remove the alpha channel when the image is fully opaque.
Give the file a descriptive name.
Store it in a project folder such as Assets/Textures/Photos.

Record the image width and height. Their ratio determines the correct display proportions:

aspect ratio = image width ÷ image height

For example, a 1600 × 900 image has a 16:9 ratio. A display width of 1.6 Unity units therefore needs a height of 0.9 units to retain those proportions.

Import a Photo for a 3D Material

Drag the image into the project’s Assets folder.
Select the image in the Project window.
Set Texture Type to Default.
Keep sRGB (Color Texture) enabled for a normal color photograph.
Set Alpha Source appropriately; use no alpha when the image is opaque.
Enable Generate Mip Maps for a photo that can be viewed at different distances.
Leave Read/Write Enabled off unless a script requires pixel access.
Set Max Size and compression for the active platform.
Click Apply.

Unity’s Texture Import Settings define how the source image becomes a texture in the Editor and in each platform build. The source file size is not the same as imported texture memory.

Put the Photo on a Quad

Unity’s Quad primitive is a flat surface made from two triangles and is suitable for displaying an image in the scene.

Choose GameObject > 3D Object > Quad.
Rename it for the photo or sign it represents.
Create a material in the Project window.
Assign the imported photo to the material’s main color texture slot.
Drag the material onto the Quad.
Rotate and position the Quad.
Match the Quad’s width and height to the image aspect ratio.

If the photo is 4:3 and the Quad’s X scale is 1.2, set its Y scale to 0.9 when the parent transforms do not introduce additional non-uniform scaling.

Use a frame or backing mesh behind the Quad when the object needs thickness. Keep the image surface slightly in front of the backing surface to avoid overlapping coplanar faces.

Choose Lit or Unlit Presentation

The material’s shader determines whether scene lighting changes the photo.

Presentation	Result	Check
Lit material	Responds to lights and baked lighting	Highlights, darkness, tint, and readability
Unlit material	Displays without normal scene-light response	Brightness in dark spaces and consistency with the environment

Use a lit material when the photo should feel physically present in the room. Use an appropriate unlit material when stable readability is more important than matching the surrounding illumination.

Test the shader on every target platform. A visually correct PC material can still be too expensive or unsuitable for Android.

Import a Photo for Unity UI

Unity’s UI Image component displays a Sprite.

Select the image asset.
Set Texture Type to Sprite (2D and UI).
Set Max Size and compression.
Click Apply.
Create or select a Canvas.
Choose GameObject > UI > Image.
Assign the imported Sprite to Source Image.
Enable Preserve Aspect or resize the Rect Transform to the image ratio.

Unity documents Preserve Aspect as fitting the Sprite inside the Image rectangle while keeping its original proportions. Empty space can remain when the rectangle and Sprite have different ratios.

For in-world UI, test the Canvas from the intended player distance and angle. Do not judge legibility only while zoomed in through the Scene view.

Preserve Aspect Ratio

Stretching occurs when the display rectangle and source image use different ratios.

Symptom	Cause	Correction
Faces look wide	Display is too wide for its height	Reduce width or increase height
Image looks tall and narrow	Display is too tall for its width	Increase width or reduce height
UI has empty bars	Preserve Aspect is fitting inside a different Rect Transform ratio	Resize the Rect Transform or accept the bars
Important content is cut off	A crop or fill workflow is being used	Change the crop or use a fitted display

For a mesh, change the display geometry rather than applying non-uniform UV tiling to force the image into place. For UI, use the Rect Transform and Image settings deliberately.

Set Texture Size and Compression

Choose imported resolution from the image’s visible size and closest intended viewing distance.

View the image from the closest normal player position.
Lower Max Size by one step.
Click Apply.
Check fine detail, text, faces, and gradients.
Return to the previous value when the loss becomes visible.

Use platform-specific overrides when PC and Android need different limits. For a complete explanation of Max Size, mipmaps, compression, Crunch, and runtime memory, see Optimize Texture Imports in Unity 2022.3.

Do not use Crunch as proof that runtime texture memory decreased. VRChat documents Crunch as a download-size optimization, not an in-memory reduction.

Build a Gallery Without Repeating Mistakes

For multiple images:

use a reusable frame prefab
keep consistent physical frame dimensions for the same image ratio
group source files in a clear folder
set PC and Android overrides deliberately
remove duplicate and unused photos
reuse materials only when they use the same texture and settings
measure texture memory and build size after adding a representative group

Each separate photo texture still needs memory when loaded. A gallery’s simple Quad geometry does not make dozens of high-resolution images inexpensive.

If an atlas is appropriate, calculate whether its imported dimensions, mipmaps, padding, and material savings improve the actual scene. Do not combine every gallery image automatically.

Check Color and Lighting

When the photo does not match the source:

Confirm sRGB (Color Texture) is enabled for a normal color photo.
Check the material color or tint is white.
Check whether the shader is lit or unlit.
Inspect scene lighting, exposure, fog, and post-processing that affect the view.
Check compression artifacts.
Compare in a local build.

A photo can be imported correctly and still appear different because the material or rendered scene modifies it.

Test the VRChat Result

Use the final scene and target platform:

Check	Test
Legibility	Read signs and captions from the intended player position
Proportions	Compare faces, circles, and known shapes with the source
Lighting	Check bright, dark, and baked-light conditions
Viewing angle	Approach from the angles players can use
PC build	Verify the Standalone override and material
Android build	Verify the Android override, shader, and image clarity
Performance	Compare texture memory and build size before and after the gallery

For images containing text, also check desktop, VR, and mobile presentation. Readability depends on physical size, viewing distance, resolution, and display resolution.

Troubleshooting

The UI Image will not accept the imported photo.

Select the asset, set Texture Type to Sprite (2D and UI), and click Apply. Assign the resulting Sprite to the Image component’s Source Image field.

The photo is stretched on the Quad.

Calculate width divided by height for the source image, then give the Quad the same X-to-Y scale ratio. Check parent transforms for non-uniform scaling if the local values already appear correct.

The photo is black or invisible from one side.

Check the Quad’s orientation and the material shader. A Quad has a facing direction, and the shader can cull its back face. Rotate the Quad or use suitable geometry and material settings for the required viewing directions.

The photo looks too dark, tinted, or washed out.

Confirm sRGB is enabled for the color photo, set the material tint to white, and compare lit and appropriate unlit presentation. Then inspect scene lighting and post-processing in a local build.

The photo shimmers or loses detail at a distance.

Confirm Generate Mip Maps is enabled for a photo on 3D geometry. Check filtering, imported resolution, and compression, then compare from the same player viewpoint.

The gallery uses much more memory than expected.

Review each texture’s imported dimensions, format, mipmaps, Read/Write setting, and platform overrides. Build-size compression alone does not describe runtime texture memory.

Continue Learning

Official References

Next Step

Import one representative photo, place it on a Quad or UI Image, and verify its proportions and platform settings before building the rest of the gallery.