> For the complete documentation index, see [llms.txt](https://docs.gmetri.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gmetri.com/guidelines-compatibility/guidelines/experience-optimizations/image-optimizations.md).

# Image Optimizations

### Summary

* Before uploading any images to the GMetri File Manager (by dragging and dropping files onto it), just run them through a [compression tool](#transparent-pixels-use-the-same-amount-of-memory-as-non-transparent-ones) to reduce their sizes drastically.
* Transparent pixels use the same amount of memory as non-transparent ones
* Don’t use more pixels than being used in the viewport (the user’s monitor). Eg: If you use an Image that’s `5meters x 5meters` in 3D, and but placed 20 meters from the camera, its actual usage on the viewport is going to be only `100px x 100px`. In that case, use a `100px x 100px` as the base image

### Image Resolution and File Size Recommendation

{% hint style="info" %}
You can find the size and resolution of assets on the right pane of the File Manager.
{% endhint %}

| Device                  | Recommended Max Resolution | Recommended Max File Size |
| ----------------------- | :------------------------: | :-----------------------: |
| Desktop                 |          8192x4096         |            5MB            |
| Flagship mobile devices |          8192x4096         |            5MB            |
| Low-end mobile devices  |          4096x2048         |            2MB            |

{% hint style="warning" %}
**Oculus Go** doesn't support images (both normal and panoramic) of resolution more than \~4K (4096x2048).
{% endhint %}

#### Equirectangular Images

GMetri uses Equirectangular Panoramic Images for as backgrounds (360 Image) for the 360 Scene type. Equirectangular images should have an **aspect-ratio of 2:1**

### Optimize Image File Size

{% hint style="info" %}
As a thumb rule, most of your images should be much below 1MB in size
{% endhint %}

Before uploading any images to the GMetri File Manager (by dragging and dropping files onto it), just run them through a compression tool to reduce their sizes drastically.

{% hint style="warning" %}
When you compress your images, there will be a drop in quality. Find the best compression to quality ratio that works for you by trying them out for yourself.
{% endhint %}

GMetri Suggested Compression website for little to no loss in image quality:

* JPEG images: <https://squoosh.app/>
* PNG images: <https://tinypng.com/>

A few other online resources:

* <https://compressor.io/compress>

### Avoid using transparency as a tool for image placement

Transparent pixels use the same amount of memory as non-transparent ones[​](https://github.com/gmetrixr/gitbook-docs/blob/main/guidelines-compatibility/guidelines/experience-optimizations/broken-reference/README.md)

#### **Good Example**

![Good Example - not using transparency for image placement](https://s.vrgmetri.com/gb-web/portal-docs/assets/img/screenshots/01_C__R1.png)

Dimensions: `235px * 235px`. So it uses 55225 bytes = 0.05 MB in memory. 16x better than the bad example

#### **Bad Example:**

![Bad Example - not using transparency for image placement](https://s.vrgmetri.com/image/bo_10/gb-web/portal-docs/assets/img/screenshots/01_C__R.png)

Dimensions: `960px * 831px`. So it uses 797760 bytes = 0.79 MB in memory

### Avoid decorational transparent images

#### **Bad Example**

Although it's only 3Kb in size, its resolution is `960px * 608px`, and so ends up using 0.5MB RAM!

<figure><img src="https://s.vrgmetri.com/image/w_965,h_742,q_90/gb-web/portal-docs/assets/img/screenshots/decorationaltranparent%20.png" alt=""><figcaption><p>Bad Example - decorational transparent images</p></figcaption></figure>

### Use the minimum possible resolution that’s seen in the viewport

#### **Bad Example**

![Bad Example - Use the minimum possible resolution](https://s.vrgmetri.com/image/w_820,h_189,q_90/gb-web/portal-docs/assets/img/screenshots/45_26_False1b.png)

Dimensions: `820px * 189px`. i.e. it uses 154980 bytes (0.15MB) in memory

#### **Good Example**

![Good Example - Use the minimum possible resolution](https://s.vrgmetri.com/image/w_1600,h_1000,q_90/gb-web/portal-docs/assets/img/screenshots/decoration%20goodexample.jpg)

As you can see from the usage, the actual usage takes only around `300px * 75px` on the screen. So instead of using a `820px`*`*`*`189px` image for it, use a `300px * 75px` image. This would reduce the memory consumption by 7 times!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.gmetri.com/guidelines-compatibility/guidelines/experience-optimizations/image-optimizations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
