Best practices | Inserting images


Warning  Overview

This article discusses best practices 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.

Warning   Best Practices videos


 Warning Inserting images

 Best Practice #1: 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 best way to get an image into your forms is to insert the image or attach it.

Best Practice #2: 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:

  3. In Type, select Attachment.
  4. In Image, click New Attachment Image or Choose File (either option opens your files).
  5. Navigate to the desired image and select the image.
  6. Click Open.
  7. Click Attach.
  8. Click OK.

To 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 Attach in the Attachments dialog box. The file is then attached to the form.
  5. Click Close to close the dialog box.
 Best Practice #3: 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.
 Best Practice #4: Attach the original source file when possible.

Attach the original source file when possible. This helps to:

  • improve the quality of the image
  • ensure that the image renders correctly across multiple browsers
  • reduce the number of missing images from copy/pasting or broken or invalid links
 Best Practice #5: 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 allow 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 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. Click Advanced options.
      4. Enter the desired width in pixels:

  • Avoid resizing images larger once uploaded. This greatly distorts the quality/resolution of the images.
 Best Practice #6: 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.

Article Information

Last Updated:2016-09-16 16:03:04