Image Best Practices

Overview

Format images to the appropriate size before uploading them into the File Manager. This is true for all images, whether they are being used in the image menus, as icons, or elsewhere. Keep the following in mind:

• Be consistent with the image sizes.
• Icons will be scaled up/down based on how big the group headers are.
• The recommended maximum image size is 100px by 100px.

Follow these naming convention and file management best practices for images:

• All lower case
• No special characters
• Short, descriptive names
• Group images together in File Manager folders; organize according to Oracle CPQ functional areas

Administration

Using Images in the Header & Footer

• Header images can be any size, but in most cases should be less than 200 pixels in height. A large header can require the user to scroll unnecessarily to access site content.

• Footer images should be avoided. They take up page real-estate and can result in unnecessary scrolling.

  For more information on Headers and Footers, see the topic Header & Footer.

---

Using Images in Config

• Easy-to-recognize Image Menus are the most useful. Use the same image size within the Image Menu for continuity.
• A simple object on a white background is most effective. Avoid using a photograph with scenery/details that may be confusing or distract from the focus of the image.

• Clear Focus: Image of a sliced ham on a white background makes it clear that the product is ham.

  

• Unclear Focus: Image of sliced ham on a plate with some vegetables, side dishes, and candles. This is confusing and does not clearly portray the product.

  

• Using product logos encourages brand recognition, and they are easily identifiable.
• Display the selection's details above or below the image for clarity, unless the name appears in the image, or the information is directly obvious from the image.
• Avoid using a large number of selections in the Image Menu.
  • Too many images in a Grid Image Menu can clutter your page and cause confusion.
  • Too many images in a drop-down Image Menu can cause unnecessary scrolling.
• Be mindful of image size.
  • An image that is too large increases page load time, and if overused, clutters your page.
  • An image that is too small can be difficult to see, and details can be lost.

---

Using Images in the Commerce Process

• Images can provide a visual cue of where the user is in the process. Example: a chain of images depicting "Pending Approval > Under Review > Finalized".
  • Current stage is highlighted, while future stages are grayed out.
  • Quickly communicates what stage the user is currently in, and what stages are left.
• This gives the user a sense of progress and adds visual appeal.

---

Using Images in Document Engine

• Using the company logo in the Header/Footer area provides branding continuity.
• Images can be used to dynamically insert signatures during the Approval Process.
• Logos or Product Images from the current order can add visual appeal and immediate recognition of the user's selections.
  • Can be used to indicate what stage of the process an order is in. For example, "Sample", "Pending Approval", and "Submitted".
  Background images (like watermarks) are not supported in RTF format.
• A watermark image can be applied to documents on PDF outputs.
• JPEG and non-transparent GIF files are the only acceptable types of image formats.
  • PDF format supports JPEG and non-transparent GIF files.
  • RTF format only supports JPEG format.
• It is preferable that all images be stored in the File Manager. For more information on secure File Manager images, see the topic File Manager.

• Image dimensions should not exceed the editor width or table cell width, depending on where you are inserting the image.

  For more information on Document Engine, see the topic Document Engine Overview.

---

Using Images in File Manager

---

Replacing Default Icons

Replace a file in File Manager only in situations where it is absolutely necessary. Follow these steps to determine the best approach:

1. To hide the icon, follow best practices for hiding elements within the CSS. For more information, see the topic Styling Best Practices.
2. Confirm that the icon is not used anywhere else in the site where you wouldn't want it changed.
3. Identify if the icon image is defined in the HTML or CSS. This will determine how you can change the image.
   • HTML-defined icons: If the image URL is located within the HTML, then the URL cannot be edited to display a different image. You must replace the file itself in File Manager.
     • Confirm that you wish to replace this image site-wide. Check the rest of the site to see where else the image may be used.
     • Create a copy of your old image before you place your replacement image in the File Manager.
   • CSS-defined icons: If you do not see the image URL in the HTML, find the CSS that assigns the image URL via a "background" or "background-image" line. You can replace this image with a new file and altered CSS.
     • Add your replacement image to the File Manager
     • Using the new image's URL, manually override the background-image value in the stylesheet.
     • You have flexibility with the specificity of your icon replacement because it is not site-wide. You can replace the icon only in certain places and leave it alone elsewhere.
   Maintain a record of any files you have replaced or added in the File Manager. This helps ensure a smooth migration from test to production.

   Your replacement icons should be created or edited by a professional.
   

   The icon should be an image that is either not owned or copyrighted by any entity, or is owned or copyrighted by an entity that has given permission for its use.
   

   The icon should be created or edited in a program like Photoshop that preserves transparency.
   

   PNG is the recommended format for new files.

---

Notes

Related Topics

See Also