How does it occur?
The resolution determines the quality of the design. When you create a design, you decide its resolution through the size you pick. Basically, the higher a design's resolution, the better the image quality.
On some displays, such as Retina, which have a higher PPI (Pixels per inch) than regular displays, the image can appear more pixelated. If you view the design on a regular display, the image should appear sharper.
How can you avoid it?
The best thing you can do is to increase your design's size by 2x as much or at least as much as possible. For example, if your design is 200x200, increase the size to 400x400, and the image should be crisper in case of retina displays.
For regular displays, make sure the image you are using has a resolution similar to the one in which it is displayed. For example, if you are creating a 300x300 design, we recommend using a background image of the same resolution as our compression system will not be as aggressive when downloading the file since it will detect that no reductions have to be made since the picture is already in the desired size.
Blurry PNG's with a transparent background
If you are experiencing blurriness in your PNG elements the underlying cause is most likely the actual resolution of your asset. Once a design is saved and rendered, compression will be applied which can vary in intensity depending on the element's size, format or construction. If you are using a PNG with a transparent background, you might be experiencing some quality loss once you preview the design in the sharelink or after you've downloaded it.
To fix this, you will have to reduce the resolution of the element in question and bring it down to a size closer or equal to the one at which it is displayed in your design.
You can check at what size you are displaying the asset by selecting it and going to the layer section in the toolbar.
Once you've got that figured out, you can simply resize your image, and upload it into your library. The quality should then, improve drastically in both download and preview. This happens because the compression gets lighter as the element's resolution gets closer to the one in which it is displayed, having the least amount applied if the asset is upload in the exact view size. The same process can be applied in reverse, if you are working with a smaller image trying to display it in a larger resolution than it's original. This, however, will cause a more drastic distortion as the asset is quite literally being stretched beyond its limits. Ideally, you'd want to get it just right, however, if for some reason you are unable to do that, It's best to keep it above, rather than below the display size.
Most common resolutions
- 720p = 1280 x 720 – is usually known as HD or “HD Ready” resolution.
1080p = 1920 x 1080 – is usually known as FHD or “Full HD” resolution.
- 1440p = 2560 x 1440 – is commonly known as QHD or Quad HD resolution.
- 4K or 2160p = 3840 x 2160 – is commonly known as 4K, UHD, or Ultra HD resolution.
Note*: the maximum resolution for a design is 4000 x 4000 pixels.