Images in a Help Center appear blurry or distorted

Issue symptoms

Images within an article or community post appear much less readable than the original. If this is a screenshot of an application, the text may be unreadable. If it's a photo, the clarity is less than ideal.

Conditions

• The image looks normal and readable when looking at the image in a new web browser tab or at full resolution.
• The issue only presents itself in your help center.

Resolution steps

Although this issue typically looks the same in all situations, there can be a few reasons for it occurring.

CSS is causing the image to resize

Images come in all sizes, but typically in a help center, the boundaries are dictated by where they are located. For example, most article bodies in the Help Center are about 700px wide. If an image is added which is 2000 px wide, then the image is likely to get distorted as the web browser has to make that image fit within the more narrow article body.

To remedy this, adjust the CSS to allow for a larger image or save the image at a resolution much closer to the size of its relative location. In the example above, saving the image to a resolution with a width of 700 px gives a truer representation of the image. Additionally, scale the height to the appropriate new size in your photo editing software.

Tip: Some of our internal teams found success in compressing the image to 8-bit color for faster downloads (not resizing the image dimensions), then using the width attribute to size them in articles (<img src="[image URL]" width="500px"/>). Use an image editor to create the 8-bit color files.

Alternatively, there are some more experimental CSS properties such as image-rendering which impact how the browser displays your images. Custom CSS is outside the scope of the Zendesk Zendesk Customer Support, but you may have success using these properties.

The browser zoom level is set to a value greater than 100%

When you use the zoom tool on a browser, if you then navigate to another website, that zoom setting may persist and stay zoomed in. This can cause problems for how images appear, as the browser is working to decide how an image should look both after CSS considerations and also how it should look with a different zoom setting. To restore the image appearance, go back to 100% zoom in the browser.