# Resolution Settings

## Resolution Settings Guide

This page provides a comprehensive guide on configuring resolution settings in Streampixel, ensuring an optimal streaming experience tailored to various devices and network conditions. You’ll learn about the available resolution modes, supported resolutions, and how to customize settings for different devices like desktops, tablets, and mobiles.

***

## **Resolution Modes**

Streampixel offers three resolution modes to control how the stream adapts to the device and screen size. Below are the details of each mode:

**1. Dynamic Resolution Mode**

* **Description**: Automatically adapts the stream resolution based on the device's aspect ratio and screen resolution while respecting the selected stream resolution.
* **Behavior**:
  * The video is resized to the closest possible resolution that aligns with the device's aspect ratio and the selected stream resolution.
  * Ensures the video fits perfectly on the user's screen without distortion or black bars.
* **Use Case**: Ideal for a variety of devices and dynamic viewing environments, such as desktops, tablets, and mobiles.

***

**2. Fixed Resolution Mode**

* **Description**: Displays the stream at the exact resolution selected, regardless of the device's screen resolution or aspect ratio.
* **Behavior**:
  * Adds black bars to fill any extra space outside the video frame to maintain the exact resolution.
  * Prevents any resizing or cropping of the stream.
* **Use Case**: Suitable for scenarios where preserving the exact resolution is critical, such as design previews or media reviews.

***

**3. Crop on Resize Mode**

* **Description**: Resizes the stream to the closest resolution based on the selected resolution and the device's screen resolution. However, on resizing (e.g., window resize), the stream is cropped instead of resized.
* **Behavior**:
  * Initially resizes the video to match the device's screen resolution as closely as possible.
  * On screen resizing, portions of the video outside the visible frame are cropped.
* **Use Case**: Best for applications where maintaining the aspect ratio or focusing on specific parts of the video content is necessary, such as games or interactive simulations.

***

## **Default Start Resolutions**

The following default start resolutions are pre-configured based on the device type:

| **Device Type** | **Default Start Resolution** |
| --------------- | ---------------------------- |
| **Desktops**    | `1080p (1920 x 1080)`        |
| **Tablets**     | `1080p (1920 x 1080)`        |
| **Mobiles**     | `720p (1280 x 720)`          |

These default settings are carefully selected to provide the optimal balance between quality and performance for each device type. However, you can customize these settings at any time by navigating to the **Settings** tab of your project, where you can modify `Start Resolution Desktops`, `Start Resolution Tablets`, and `Start Resolution Mobiles`.

***

## **User Controls**

In addition to the settings configured in the backend, users at the frontend also have the option to change the stream resolution while viewing the stream.

**Frontend Resolution Control**

* The options available for users to select on the frontend will depend on the **Max Stream Quality** you have set in the project settings.
* For example, if the Max Stream Quality is set to `1080p`, users will only be able to choose resolutions up to `1080p`.

**Disabling Resolution Settings for Users**

* If you do not want users to change the resolution, you can disable this feature by turning off the **Show Resolution Settings** flag in the **Project Settings** page on the dashboard.
* When this flag is disabled, the resolution will be locked to the defaults and users will not see any resolution settings in the frontend.

***

## **Supported Resolutions**

Streampixel supports the following resolutions, allowing you to fine-tune the video quality based on user needs:

| **Resolution**      | **Pixel Dimensions** | **Best Use Case**                                                                                   |
| ------------------- | -------------------- | --------------------------------------------------------------------------------------------------- |
| **360p**            | `640 x 360`          | Low-bandwidth networks, basic mobile devices, or when high resolution is not required.              |
| **480p**            | `854 x 480`          | Moderate network speeds or small screens like older smartphones and tablets.                        |
| **720p (HD)**       | `1280 x 720`         | High-definition streaming for tablets, mobile phones, and moderate network conditions.              |
| **1080p (Full HD)** | `1920 x 1080`        | Full HD quality for desktops, tablets, and mobile devices with high-speed networks.                 |
| **1440p (QHD)**     | `2560 x 1440`        | Ultra-clear visuals for larger screens, desktops, or advanced setups with robust network speeds.    |
| **4K (Ultra HD)**   | `3840 x 2160`        | Ultra-high-definition streaming for premium experiences on 4K monitors or TVs with strong networks. |

***

## **How to Configure Resolution Settings**

1. **Access the Settings**:
   * Navigate to the **Resolution Settings** section in the Streampixel dashboard.
2. **Select a Resolution Mode**:
   * Choose from **`Dynamic Resolution Mode`**, **`Fixed Resolution Mode`**, or **`Crop on Resize Mode`**.
3. **Set Max Stream Quality**:
   * Select the highest resolution allowed for the stream (e.g., `1080p`, `1440p`, or `4K`).
4. **Adjust Start Resolutions**:
   * Use the default start resolutions (`1080p` for desktops and tablets, `720p` for mobiles), or customize them based on your audience's needs.

<figure><img src="https://4054772100-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAxFCxNtDJTPCgUnSsK1%2Fuploads%2FgrAZCQOQs9Rlxy2qgTWi%2FResolution%20Settings.png?alt=media&#x26;token=79d6f740-912b-4c23-929a-b396b3d419e5" alt=""><figcaption><p>Resolution Settings</p></figcaption></figure>

***

{% hint style="success" %}

#### **Recommendations**

* Use **Dynamic Resolution Mode** for general audiences with diverse devices.
* Use **Fixed Resolution Mode** when resolution consistency is critical.
* Use **Crop on Resize Mode** for interactive content like games or detailed visual simulations.
  {% endhint %}

{% hint style="info" %}
Always test your configuration across devices to ensure the best possible user experience.
{% endhint %}
