Inserting images: Methods and Tips - Support and Troubleshooting

Inserting images: Methods and Tips 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 . 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