Images within an article or community post appear much less readable than the original. If this is a screenshot of an application, maybe the text is unreadable or if it's a photo, the clarity is less than ideal.
- The image looks good/readable when looking at the image in a new web browser tab and/or at full resolution
- The issue only presents itself in your Help Center
Although this issue typically looks the same in all situations, there can be a few reasons for it occurring. This article will briefly cover each option here to try to point you in the right direction.
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 in the more narrow article body.
To remedy this, the CSS can be adjusted to allow for a larger image or the image could be saved 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 would give a much truer representation of the image, and you could control the quality/appearance in your photo editing software.
widthattribute to size them in articles (
<img src="[image URL]" width="500px"/>). Creating the 8-bit color files can be done in an image editor or some online tools.
Alternatively, there are some more experimental CSS properties like
image-rendering which will impact how the browser displays your images. Feel free to do some research on those values if you think that might be something more appropriate for your situation.
The browser zoom level is set to something other than 100%
We've all seen those web pages which are too hard to read, so we have to zoom in. Then we go to another website, and that zoom is maintained. This can wreak havoc on how images look as the browser is working to decide how an image should look both after CSS considerations (like above) and then how it should look with a different zoom setting. Going back to 100% should give the image a look which is "truer" to its normal appearance.