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
- In the KB article form, click the space where the image should appear.
- On the toolbar, click the Insert/edit image icon
- If the image hasn't been uploaded yet:
- Click on Upload
- Click on Browse for an image or drag and drop your image
- If the image has already been uploaded previously:
- In General, click on Image list
- Select the image to embed
- Click Save.
Insert an image in a form as an attachment
- Click the Manage Attachments paper clip in the top-right corner of the form.
- Click the Choose Files button to bring up your files.
- Select the desired image or screenshot file, and click Open.
- Click Close to close the dialog box.
Update an image
- Click the Manage Attachments paper clip in the top-right corner of the form.
- Click the checkbox next to the images to remove.
- Click Remove.
- Click Close.
- 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: 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:
- Select the image.
- Click the image icon to open the image editor.
- Enter the desired height and width in pixels:
- Click Save.
- 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
- Select the image. It will show that it's selected by highlighting the borders and corners.
- Right-click and select Image...
- Add alt text in the Alternative description field.
- Click Save.
Related Links
For more information, see: