Relevancy
- Supports page content
- Highlights your company brand and values; well-chosen images strengthen your message
- Avoids stock photos
Select Diverse Images with a Strong Focal Point
- Images with a strong focal point capture user attention.
- Use a consistently placed focal point for image sliders.
- Use a diverse selection of imagery to keep users engaged.
- Consider diversity in background/foreground, location, and subject matter.
Identify the focal point "Safe Zone" per component
- The "Safe Zone" per component will vary by the height/width of how it has been configured to display on desktops, tablets, and mobiles.
- Identify the "Safe Zone" by viewing the finalized dimensions of your component on each device type.
Wide Cropped Images allow for versatility
- Allows for flexibility for additional cropping and overlaying elements in the layout
- Allows images to be easily modified in a variety of components and layouts
Optional: Add Optimized Images of Different Sizes
- When using the Large Image component, consider optimizing the image for mobile and adding the component twice, once for desktop/tablet and once for mobile.
- This is especially useful if there is text on the image.
Additional Image Recommendations
- The customer is responsible for delivering images that conform to the guidelines. Please see Image Recommendations in Setting Up and Maintaining SAP SuccessFactors Recruiting.
- Images are typically provided by granting access to an image library, login to a photo site (similar to photobucket.com), or a zip file of images.
- A minimum of 15-20 high resolution employment brand images is required.
- The following media types can be used in Career Site Builder: GIF, ICO, JPG, JPEG, PNG, SVG. Note that Scalable Vector Graphics (SVG) images render correctly regardless of display or layout size. For this reason, a single SVG image of your corporate logo can be used for both desktop and mobile layouts of the career site. If an SVG image needs to be resized, you can use an application, such as https://www.iloveimg.com/resize-image/resize-svg.
- All Career Site Builder images should be oriented as landscape, not portrait.
- Include alt text for each image to improve the accessibility of the site. See the Accessibility section above.
- For background images, choose subtle patterns and colors.
- Text on images is a dated web practice and is not recommended.
- Image sliders are not a recommended practice.
Resolution and File Size Optimization
- The maximum file size for images is 500KB.
- Optimizing images is highly recommended as it decreases load speed, improving the performance of the site. We recommend aiming for a file size closer to 100KB.
- Your media resource should export the selected images specifically for the web.
- An image program such as Photoshop can be used, or free image compressors are available on the Web, such as FastStone Photo Resizer.
- If you need assistance delivering Web-ready images, SAP’s web design team can prepare your images files. The time will need to be billed.
Adding Images
Images uploaded in Career Site Builder are hosted on the Akamai Content Delivery Network (CDN), which uses servers around the world to reduce page loading times.
Depending on the component, to add an image to the page, click Select Image or +Add, typically from the Styles tab.
You can choose to add an image from a list of images you’ve previously added.
To Add a New Image
1. Click Upload Image.
2. Click Select Image.
3. Browse and select the image to use. Click Add.
4. Click the back arrow.
5. Click Edit Alt Text, enter text, and click Save.
6. Click the back arrow and click Select.
Responsive Image Alignment
When adding an image, select the desired Image Position (as shown at the right). This feature allows a "focal point" for an image to always be visible no matter what browser and device type is used by the candidate. For example, a person in the image will always be centered on every device.
If the image is not displaying as desired on all devices, you can add multiple components with images of different sizes to display on each device type.
Note
These are the available Image Types. It is leading practice not to configure an image as tiled or stretched, unless it is a background pattern or subtle image.
Image Settings
Video
If the site requires videos or Flash, SAP needs a link to the location where the videos or Flash are hosted online. A direct path must be provided; for example, a link to YouTube is often used for video assets. SAP does not host video or Flash on their servers.
Other video tips:
- Turn off auto play.
- Keep the videos short. Between 30 to 60 seconds is recommended.
- Include a title and brief description for the video.