Skip to main content
E
elikhopter
Known Participant
November 9, 2021
Answered

Pixel perfect problem windows 4k

  • November 9, 2021
  • 1 reply
  • 1593 views

It's been 6 months now since I switched from my 5k imac screen to a 4k pc screen and I have a problem with XD render. My lines & stroke are not pixel perfect and it's really annoying in daily use.

Is there any way to make it work?

I'm attaching an example of the same stroke duplicated.

If I move it with the keyboard arrow sometimes it becomes sharp sometimes blurred.

This topic has been closed for replies.
Correct answer Spas K.

In absolute terms I understand  what you're telling me even if it's not so clear, and why with my Imac everything is clean then? that's what I don't understand. If the reasoning is the same all retina++ screens should have an alignment problem no ? 


Your 5k imac has a dpi of 218. Your pixels are phisically so small that even if there was a blur @ 100% you wouldn't be able to see it. I don't know how big your PC screen is, but if it's 4k it's probably 27" or bigger. This has a dpi of 160-170 or less, which will make blurry pixels more easily visible.

 

I don't claim to know the inner workings of how MacOS handles this, so there might be something I'm missing. However, what I said in the above post still stands. If you have to design pixel-perfect 18x18 pixel icons, where you put that pixel or line matters a lot.

 

You don't want to rely 100% on what you see on the screen, but make sure everything is properly placed on the pixel grid. A lot of people don't use high-dpi displays, and even if it's sharp on your screen, they might not see it as such. If it's properly placed, you will see it sharply on any screen @ 100% zoom.

1 reply

Spas K.
Community Expert
Spas K.Community Expert
Community Expert
November 9, 2021

What are the Y positions of each line? If you're using 1px stroke, it will be perfect provided the line is at a .5 position on the Y axis, as it will match perfectly with the pixel grid. For a 2px stroke, it is best that the line is at a whole number position.

 

If you use 0.5 size for the stroke, that is 0.5 pixels, so that can never be pixel-perfect. It can only seem that way on a high dpi screen, as the pixels are so small you don't see the blur.

 

Here's an example at 100%:

    E
    elikhopterAuthor
    Known Participant
    November 10, 2021

    I dont understand, why the y position is important ? When i use chrome each stroke have the same display, it does not become blurred. No matter the thickness or position

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    November 10, 2021

    Short version: Browsers and design programs don't like half pixel values, and they will do work in the background to compensate for it, but not in all cases and not in the same way. And as a whole - it's not a good practice.

     

    If your Y (or X for vertical lines) position is a .5, the stroke should be an odd value (1, 3, 5). If it's at a whole number position, the stroke should be an even value (2, 4 etc). Here's a closer look at the same lines from before on a pixel grid:

     

     

     

    The canvas within Xd isn't the same environment as Chrome. And there can be similar anti-aliasing issues with more complex graphics and .svgs in Chrome as well.

     

    Browsers do a lot of work under the hood to make sure things look as good as they can on various screens and resolutions. They round some values and apply scaling, taking into account the pixel density of the device.

     

    Most design programs understand 1 pixel as the physical size of 1 pixel on a 72dpi display. Now let's take a retina device that has 144 dpi. If you specify something has a stroke of 1px, since the density of this screen is 72dpi x2, the browser will display the stroke as 2 actual pixels on that screen. If your stroke is 0.5 pixels, this is 1 whole pixel on the high-dpi display, which will display fine.

     

    If the device has a lower density display close to 72 dpi, the browser will use the original size specified. Since the monitor can't light up just half a pixel, the browser will round the .5 to 1 and still show it as a 1px stroke. Problem is, that can only happen with vector elements.

     

    Xd and other similar design software work with both vector and raster graphics, and will show things as they are for the sake of accuracy. Everything is displayed through a pixel grid.

     

    This is important, as you are not always exporting vector files, and a .png will not take advantage of the browser optimizations I mentioned before. The half pixel will not be rounded to a 1. If a line is half a pixel wide, it will fill a whole pixel with a color that's an average between the stroke and background color, making the line look blurry or lighter than it is.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices