Images

# Use When

• Illustrating a product feature
• Allowing comparisons between similar items
• Capturing the user’s attention
• Telling a story
• Communicating the REI brand message
• Explaining a complex procedure or how to perform an action

# Foundations

REI image requirements are described on the Consumer Mobile Applications/Design page for Launch and Default Shop Image Sizes.

# Aspect Ratio

Use conventional aspect ratios:

• Square
• Portrait: 1:2, 2:3, 3:4, 9:16
• Landscape: 2:1, 3:2, 4:3, 16:9

# Quality

• Always maintain high image quality
• Choose the right file format when saving your images to ensure proper image quality and file size:
  • For photos, use JPEG. Optimize JPEG files to find a balance between size and quality
  • For bitmap/raster artwork, use PNG with 8-bit color palette

# Sizing

• Avoid small file sizes that pixelate the image
• Avoid unnecessarily large file sizes. Export images at the lowest file size possible without compromising quality
• Optimize high resolution images using TinyPNG
• Must display images at a proper pixel size compared to Natural size

# Color and Contrast

• Test images for high contrast displays
• Ensure that no meaning is lost when colors are removed
• Include text only with sufficient contrast

# Cropping Images

• Specify the ratio of all cropped images
• Enable background image to use the entire container:
  • Without stretching the image
  • Cropped either vertically or horizontally without empty space
• Crop images by specifying the starting point:
  • Adjust the starting background-position on the x-axis of the image:
    • Left: Orients the image to its horizontal left
    • Right: Orients the image to its horizontal right
    • X-center: Orients the image to its horizontal center
  • Adjust the starting background-position on the y-axis of the image:
    • Top: Orients the image to its top
    • Bottom: Orients the image to its bottom
    • Y-center: Orients the image to its vertical center
• Accepts x and y axis combination (e.g. crop="top left")

Images are cropped on y-axis with top value and on x-axis with left, x-center, and right values

Images are cropped on y-axis with y-center value and on x-axis with left, x-center, and right values

Images are cropped on y-axis with bottom value and on x-axis with left, x-center, and right values

# Content

# File Names

• Image file name should include primary keyword or what the page is targeting
• Showcase keyword targeting through file name and alt text
• For more information, view SEO How-to articles: Image Implementation

# Overlaid Text

• Only display heading text on non-solid backgrounds:
  • Text should be at least 18px
  • Never allow overlaid text to wrap. Longer strings of text can be harder to navigate when the background varies
  • Consider adding a semi-transparent black gradient over the image in the CSS
• Apply only vertical gradient backgrounds. Avoid horizontal, diagonal, and radial gradients
• Always include a backup background color so that when the background image is disabled, text is still legible and passes contrast requirements
• For help in determining whether your text and image combination conforms to the required contrast ratio, use this Chrome plugin: Color Contrast Analyzer

# Decorative Images

• Avoid using decorative images; instead present the image as a background-image using cascading style sheets (CSS)
• If using the HTML <img> element, add an empty alt attribute
• If using the HTML <img> element, add the following attribute: role="presentation"

# Alternative Text

• Use this decision tree to determine how to use the alt attribute
• Be succinct. Ideally, one sentence or less
• Be informative and accurate
• If images of text are used, the alt attribute should contain the same words that appear in the image
• Avoid repetitive labels. For example: “image of” or “picture of”
• Descriptions:
  • Use short description that conveys the essential information presented by the image without burdening users with superfluous details
  • Use long descriptions for complex images such as graphs, charts, or diagrams to provide equivalent access to the information the image
• For groups of images that convey a single piece of information, apply the alt attribute to only one image for the entire group
• For image maps with multiple clickable areas:
  • Must provide an overall context for the set of links using alt attribute
  • Each individual clickable area should have an alt attribute that describes the purpose or destination of the link

# Responsiveness

• Ability to control image display at small, medium and large breakpoints
• Lazy loading of images is provided

# Resources

• Chrome plugin, Color Contrast Analyzer
• Image compression service, TinyPNG

# Props

Any other properties supplied will be assigned to the root element (native element).

# Slots

# Installation

Resources are available within the CdrImg package:

• Component: @rei/cdr-img
• Component styles: cdr-img.css

To incorporate the required assets for a component, use the following steps:

# 1. Install using NPM

Install the CdrImg package using npm in your terminal:

Terminal

npm i -S @rei/cdr-img

# 2. Import Dependencies

main.js

// import your required CSS.
import '@rei/cdr-img/dist/cdr-img.css';

# 3. Add Component to a Template

local.vue

<template>
  <cdr-img />
</template>

<script>
import { CdrImg } from '@rei/cdr-img';
export default {
  ...
  components: {
     CdrImg  
  }
}
</script>

# Usage

# Ratio

• Positions the original image asset off-screen and replaces it with a background image
• CSS background property value is set to contain which resizes the background image to make sure it is fully visible
• Shrinks the image and display additional padding to the requested ratio
• To manipulate background property and remove excess padding:
  • Use cover property
  • Use crop property
  • cover and crop properties can be used together

# Cover

• Resizes the background image to cover the entire container
  • Without stretching the image
  • Cropped either vertically or horizontally without empty space
• Requires the ratio property

# Crop

• Background image is displayed in its original size
• Requires the ratio property
• Defines the starting point of the overflow position
• Accepts a single x-axis and y-axis value (e.g. crop=”top left”):
  • Adjust the starting background-position on the x-axis of the image:
    • left: Orients the image to its horizontal left
    • right: Orients the image to its horizontal right
    • x-center: Orients the image to its horizontal center
  • Adjust the starting background-position on the y-axis of the image:
    • top: Orients the image to its top
    • bottom: Orients the image to its bottom
    • y-center: Orients the image to its vertical center

# Radius

• Variants for this property: circle or rounded (for rounded rectangle)
• Uses preset values provided in cdr-core.css

# Modifiers

Following variants are available to the cdr-img modifier attribute:

# Performance

For internal applications with large images or images that would benefit from changes due to platform or breakpoint, use lazy load properties to integrate with the rei-lazy-image-loader project.