Inserting images in articles

You can insert images in the body of your Help Center knowledge base articles. When you insert images, they are added as attachments to the article. Large images are automatically resized to fit the width of the article.

Be sure to insert the image, as opposed to copying and pasting the image from another source, to avoid image issues. As an alternative to inserting images directly in your articles, you can host your images on a public file server and link to them.

To insert an image in an article

1. In Help Center, create a new article or edit an existing article.
2. Place the cursor where you want the image to appear.
3. Do one of the following:
   • Drag and drop the image into the body of the article.
   • Click the Insert image button on the toolbar, then click Upload images and select your image.

     

   The image file size limit is 20 MB.
   Images are automatically adjusted to fit the width of the article, using a compression feature within CSS. It's a good idea to manually resize images that are more than 1600px wide, as the compression might cause the image to appear distorted in the published article. You also might want to manually resize images if you are using Web Widget (see Optimizing images for Web Widget below).

4. Click Insert in the dialog that appears.

   The image appears in your article.

5. Click Save.

If you have a closed Help Center that requires all users to sign-in, article images will appear broken in email notifications sent to users who are following your Help Center. This is a known issue.

Optimizing Help Center images for the Web Widget

To make sure the images in your Help Center articles display correctly in the Web Widget, it’s important that the images are added to the article at the desired size.

When Help Center articles are converted for viewing in the Web Widget, the article’s images are stripped of their attributes in the HTML tags (except for the src and alt attributes), and custom CSS rules are ignored. For most images, this isn’t a problem. However, if the original images are very big, and significantly resized in the HTML or in a custom CSS, they can appear awkwardly large.

Say, for example, you want to display an icon in your Help Center article. The icon’s original image is 300x300 pixels. To display it at a more reasonable size, the HTML is modified by adding the attributes width=“6%” height=“6%”.

In the Help Center article, the icon is 18x18 pixels, 6% of the actual image size. When the article is processed for the Web Widget, and the width and height attributes are removed, it goes back its original size and, even after being sized down to fit inside the widget, it’s too big for an icon.

Simply resizing the original image down to the size you want, rather than manipulating the size in your code, avoids this problem.