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.
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.
6 comments
Katie Kolar
Hello,
I have tried resizing a screenshot to both 700px and 1200px, and despite that the images are still blurry. Is there something else I should be doing?
TIA
Katie
0
Roxelle Miayo
We appreciate you getting ahead of troubleshooting. I'll go ahead and create a ticket so we could investigate further. Please expect an email shortly.
0
Permanently deleted user
Delete my account
0
Christine
I see that you already raised a ticket with regard to this matter. Kindly check your email for updates.
Thank you!
0
Karina Caro
I am having the same issue. Is there a solution for this? Where do I adjust the CSS in the Help Center?
0
Dainne Kiara Lucena-Laxamana
Hi Karina Caro
You can follow the steps here to get to the Guide admin > Customize design > Customize > Edit code
0