Using images in articles

Jo_Dunne · ‎07-10-2024

Hi all

I am writing some guidance for authors and wondered if there is any best practice guidance on use of images? what is the best size (and how to set this), what should the resolution be etc.

Many thanks (in advance)

Jo

Dr Atul G- LNG · ‎07-10-2024

Hi @Jo_Dunne

Optimize your web images

When uploading an image, use a smaller file size for the best results. This ensures compatibility across multiple platforms (responsive design) and enhances page performance. Depending on the content and style, suggested image sizes include:
- 150×150 pixel thumbnail
- 300×200 pixel medium
- 600×600 pixel large
- 960px maximum width for the Advanced/Legacy view
- 840px maximum width for the Knowledge Portal
High-resolution images require a significantly higher number of pixels and bytes. The "standard" web resolution is 96 dpi (it used to be ~72 dpi, but in the last years higher pixel density screens have become the norm).
Check that your image format is in RGB color mode. Print mode (CMYK) does not render in most browsers.
Save images in .jpg, .gif, or .png format only. Files such as pdf, .psd, .tff, and .doc are not acceptable web image formats.

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0696767

*************************************************************************************************************
If my response proves useful, please indicate its helpfulness by selecting " Accept as Solution" and " Helpful." This action benefits both the community and me.

Regards
Dr. Atul G. - Learn N Grow Together
ServiceNow Techno - Functional Trainer
LinkedIn: https://www.linkedin.com/in/dratulgrover
YouTube: https://www.youtube.com/@LearnNGrowTogetherwithAtulG
Topmate: https://topmate.io/atul_grover_lng [ Connect for 1-1 Session]

****************************************************************************************************************

View solution in original post

Ashley Heath · ‎08-21-2025

From my experience, we've had mixed results when importing word documents with images for knowledge articles. Uploading quality resolution images into the knowledge editor and then sizing them appropriately within the article could be better.

Depending on the size of the original image, you can also specify a height and width percentages instead of specific pixel sizes to get the images to display the way you would like. For example, in some instances we have knowledge articles Where the image is the article and we set the width = 100% and the height = auto. This makes the image use the maximum amount of space regardless of the device size that it is being viewed on.

This is also helpful when your image resolution exceeds the specs of the knowledge viewer. We've found that images wider than 700px creates a scroll bar across the bottom when viewing the article in the portal whereas setting the width = 100% allows the image to display without the scroll bar.

Jonas Gersbo · ‎07-29-2024

Naming standards matter.

In my humble opinion, getting people not to use the OotB drag n' drop feature when adding pictures is also of importance. For end-users, having the opportunity to view pictures as attachments in higher resolutions is only as helpful as the names they are given... Having 20 or so pictures all named "Pasted image.png" helps no one, so make sure to name pictures individually.

emilyswanger · ‎11-20-2024

This is extremely frustrating. I wind up having to rename all the images and then adding them back into the article. There should be a way to name the article when you use the drag n' drop feature, otherwise it is extremely cumbersome to go back in and out of the editor and into Manage attachments to rename all of my images. This is especially frustrating when someone updates an old article by just adding new images in without deleting the old ones.