VSCode integrated terminal image preview distorted

[baitian752]

What system are you running Yazi on?

Windows

What terminal are you running Yazi in?

VSCode integrated terminal (VSCode 1.85.0)

Yazi version

yazi 0.1.5

Did you try the latest main branch to see if the problem has already been fixed?

Tried, but the problem is still present

Describe the bug

Remote SSH for my linux server

Run yazi

View the first image (1024x1024, OK)

Back to the text file (there is an image border)

View the second image (1024x1536 distorted)

The original image:

Expected Behavior

Preview is OK.

To Reproduce

As the bug description.

Configuration

No response

Anything else?

No response

[baitian752]

After some tests, I found this issue is relative to the global zoom level of VSCode, but the color is not correct at zoom level 0.

[sxyazi]

Try reducing max_width and max_height to see if the issue still exists - Yazi cannot obtain the correct terminal pixel width and height for displaying images due to VSCode not implementing the ioctl(TIOCGWINSZ) system call. Therefore, fixed max_width and max_height are currently used. The issue you're describing is caused by images exceeding the available area and resulting in scrolling.

Another way to obtain pixel width and height is through CSI 14 t, but unfortunately, crossterm does not provide any way for users to extend it; it can only be added to the crossterm codebase. I've submitted a patch, but it hasn't been merged yet, https://github.com/crossterm-rs/crossterm/pull/810. So, currently, in VSCode, you can only limit the image size using max_width and max_height instead of dynamically adjusting based on terminal size.

As for image colors, this is the expected behavior. Currently, VSCode only supports Sixel graphics protocol, which is a rather old protocol that only supports 256 colors. So Yazi can only use approximate colors as substitute colors for display. Until VSCode supports more advanced protocols (such as Terminal graphics protocol or Inline images protocol protocols), it cannot be improved.

[baitian752]

Thanks for you information. And for the colors, I have also test imgcat, which looks OK:

[baitian752]

I have tried set preview size with max_width and max_height. It looks good, thank you.

[sxyazi]

Thanks for you information. And for the colors, I have also test imgcat, which looks OK:

I think this is not a bug, it's just that Yazi's default image compression strategy is more aggressive.

I'll add a new config option to allow users to adjust the compression level manually.

[github-actions[bot]]

I'm going to lock this issue because it has been closed for 30 days. ⏳ This helps our maintainers find and focus on the active issues. If you have found a problem that seems similar to this, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.