# Video Resolution with the Video SDK

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## Introduction

When it comes to video quality, we always want the best. The best output and the best input. It's common to assume the best quality means the _highest_ quality, and we often see figures like 720p, 1080p, and even 4k being thrown around in video discussions. But should the same standard that's applied for on-demand streaming be applied to real-time video used within video-call applications, like the ones built with Zoom's Video SDK? Simply put, the answer is no.

## The cost of "highest quality"

High-quality video streaming, like 1080p or 4k, is ideal for on-demand video streaming for a few reasons, two being:

-   There's **one** video being streamed
-   Wait time for buffering is expected

When it comes to real-time video streaming, though, the expectations are different. Users are expecting live video with no delays, which gets harder to achieve with the demands of high-quality streaming. 1080p (and above) requires high bandwidth _and_ a hefty level of CPU from your device.

## When lower quality is the better quality

The concept of streaming _every_ video in the highest quality possible may seem like the best option, but is unnecessary in practice. To better understand, let's look at how Zoom's Client handles HD video:

1. Speaker View, one large 720p (or 1080p if enabled) video, and the other small user videos are in 180p or 90p.
2. Gallery View 3x3, medium sized videos in 360p.
3. Gallery View 5x5, smaller sized videos in 180p.
4. Gallery View 7x7, smallest sized videos in 90p.

The video resolution goes down as the number of gallery videos goes up, but quality remains relatively constant because it is clear enough for the _size_ of the rendered canvas. In other words, a rendered video in 100px width will look the same in 90p and 1080p, because it's not large enough for resolution differences to be seen. Below are some renders of a video call to visualize this concept.

![](/img/blog/rehemaarmorer/90pscreen.png)

![](/img/blog/rehemaarmorer/720speakerview.png)

![](/img/blog/rehemaarmorer/360galleryview.png)

## Implementing with Your Zoom Video SDK Application

Within our documentation, we provide helpful tips on [rendering video resolutions for different layouts](/docs/video-sdk/web/best-practices/#video). Here's a code snippet of what it looks like to automate video resolution based on dimensions and number of rendered videos:

```js
\\actual count = rendered videos
  if (actualCount <= 4 && cellBoxHeight >= 510) {
    // GROUP HD
    quality = VideoQuality.Video_720P;
  } else if (actualCount <= 4 && cellHeight >= 270) {
    quality = VideoQuality.Video_360P;
  } else if (actualCount > 4 && cellHeight >= 180) {
    quality = VideoQuality.Video_180P;
  }
```

## Conclusion

That's it for our guide on understanding video resolution when working with real-time video. For more information on UX best practices, check out [our documentation](/docs/video-sdk/web/best-practices/)!