Skip to page contentSkip to chat
ServiceNow support
    • Community
      Ask questions, give advice, and connect with fellow ServiceNow professionals.
      Developer
      Build, test, and deploy applications
      Documentation
      Find detailed information about ServiceNow products, apps, features, and releases.
      Impact
      Accelerate ROI and amplify your expertise.
      Learning
      Build skills with instructor-led and online training.
      Partner
      Grow your business with promotions, news, and marketing tools
      ServiceNow
      Learn about ServiceNow products & solutions.
      Store
      Download certified apps and integrations that complement ServiceNow.
      Support
      Manage your instances, access self-help, and get technical support.
Inserting images: Methods and Tips - Support and Troubleshooting
  • >
  • Knowledge Base
  • >
  • Support and Troubleshooting (Knowledge Base)
  • >
  • Inserting images: Methods and Tips
KB0696767

Inserting images: Methods and Tips


37568 Views Last updated : Sep 30, 2024 public Copy Permalink English (Original)
  • English (Original)
  • Japanese
KB Summary by Now Assist

Issue

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.

Inserting images

Avoid copy/pasting images

Depending on your browser's capabilities, device type, form view, and other factors, copy/pasting images into an article or form does not always work as expected. The recommended way to get an image into your forms is to insert the image or attach it to the record before embedding it in the content.

Insert an image in a Knowledge Base article as an attachment

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

  3. If the image hasn't been uploaded yet:
    1. Click on Upload
    2. Click on Browse for an image or drag and drop your image
      insert_edit_image_upload.png
  4. If the image has already been uploaded previously:
    1. In General, click on Image list
    2. Select the image to embed
      insert_edit_image_dialog_existing_attachment.png
  5. Click Save.

Insert an image in a 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.

Update an image

  1. Click the Manage Attachments paper clip in the top-right corner of the form.
  2. Click the checkbox next to the images to remove.
  3. Click Remove.
  4. Click Close.
  5. Follow the steps listed above to add the updated image.

Other Tips

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.

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 them to a form. Most graphic applications enable you to edit the size/quality of an image. Check the following sites for more detailed instructions for the mentioned applications

  • Resize, rotate, or flip an image in Preview on Mac
  • How to resize an image on a Windows 10
  • In Photoshop, for example, you can use an option called Save for Web and Devices.
Note iconNote: As always, there is more than one way to resize an image and your mileage may vary. There are many software products on the market that can make this easier.

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. Select the image.
  2. Click the image icon to open the image editor.
  3. Enter the desired height and width in pixels:

  4. Click Save.
  5. Avoid resizing images larger once uploaded as this may distort the quality, aspect ratio, and 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.

Add alternative (alt) text to images

  1. Select the image. It will show that it's selected by highlighting the borders and corners.
  2. Right-click and select Image...
    right_click_and_select_image.png
  3. Add alt text in the Alternative description field.
    insert_edit_image_dialog_window.png
  4. Click Save.
  To write the best alt text, consider the audience and the purpose of the image. The description in the alt text should be meaningful in the context of the knowledge article or form, specifically. The alt text within the Alternative description should let the user know what an image's content and purpose are. It is important to have alt text that is meaningful in and of itself. For accessibility, screen readers will read out the alt text of the image, so be sure it describes the purpose of the image as best as possible.

Related Links

For more information, see:

  • Insert an image in a knowledge article
  • Storing images in the database

The world works with ServiceNow.

Sign in for more! There's more content available only to authenticated users Sign in for more!
Did this KB article help you?
Did this KB article help you?

How would you rate your Now Support digital experience?

*

Very unsatisfied

Unsatisfied

Neutral

Satisfied

Very satisfied

Very unsatisfied

Unsatisfied

Neutral

Satisfied

Very satisfied

What can we improve? Please select all that apply.

What are we doing well? Please select all that apply.

Tell us more

*

Do you expect a response from this feedback?

  • Terms and conditions
  • Privacy statement
  • GDPR
  • Cookie policy
  • © 2025 ServiceNow. All rights reserved.