This article provides tips for inserting images into articles or forms. This ensures the same results are achieved in terms of image formatting and sizing across all devices, UI types, HTML form fields, and browser versions.

You will also find very useful information in the following videos:

"How to insert images in ServiceNow Forms and KB articles"

"How to Optimize Images to Insert in ServiceNow Forms and KB Articles"

Inserting Images

Avoid copy/pasting images

Depending on your browser capabilities, device type, form view, and other factors, copy/pasting images into an article or form does not always work as expected and is not supported by our platform. The recommended way to get an image into your forms is to insert the image or attach it.

Use the attachment function to insert images

To insert an image into a Knowledge Base article as an attachment:

1. Within the KB article, click the space where the image should appear.
2. On the toolbar, click the Insert/edit image icon
   
   

1. In Type, select Attachment.
2. In Image, click on the drop-down list.
3. Navigate to the desired image and select the image.
   
   
   
4. Click Open.
5. Click Save. The image is attached.

Insert an image within an Incident, Change, or Problem form as an attachment

1. Click the Manage Attachments paper clip in the top-right corner of the form.
2. Click the Choose Files button to bring up your files.
   
   
   
   
3. Select the desired image or screenshot file, and click Open.
4. Click Close to close the dialog box.

Optimize your web images

• When uploading an image, use a smaller file size for 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 max-width
• High-resolution images require a significantly higher number of pixels and bytes. The standard web resolution is 72 dpi.
• 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 web compatible.

Attach the original source file when possible. This method provides the following advantages:

• Improves the quality of the image
• Ensures that the image renders correctly across multiple browsers
• Reduces the number of missing images from copy/pasting or broken or invalid links

Resize larger images files to optimal web size

• When possible, resize larger images to an optimal web size before uploading to a form. Most graphic applications enable you edit the size/quality of an image. In Photoshop, for example, you can use an option called Save for Web and Devices.

When resizing after upload, use the image editor instead of the page's HTML. Although this method displays the image smaller, the page still downloads the file at its original size. To adjust the image settings:

1. Within the KB article, click the image.
2. Click the image icon to open the image editor.
3. Enter the desired height and width in pixels:
   
   1. 
4. Click Save.
5. Avoid resizing images larger once uploaded. This greatly distorts the quality/resolution of the images.

Use appropriate naming conventions

• Use naming conventions that are logical and easy to remember. Include relevant keywords that are easy to search.
• Use only letters, numbers, hyphens, and underscores in file names. Other characters (like question marks and ampersands) may upload incorrectly or cause unexpected behavior.