Writing for UX Optimizing Images

Updated by : February 1, 2020

…

This series of three articles follows the steps in a typical Image Optimisation Workflow:

  1. Step 1 reflects on our choice of images, their inclusivity, and their source.
  2. Step 2 discusses optimizing the alternative content experience of digital images.
  3. Step 3 outlines strategies to optimize images for performance before uploading them.

Each step guides an approach to, and the design of our users' experience of images. This is of immediate interest to anyone writing and uploading content to enterprise CMS or B2C web applications.

Tip: There's more to providing an inclusive image experience than only complying with WCAG.

Shared Learning

Flag this content to your friends, connections, and colleagues.

Scope

The three articles in this series inform the three steps of a typical image optimization workflow.

Important

Always back up your image files before optimizing them.

Step 1: Choice of Image

  1. 1.1. Decide what content the image must convey:
    1. 1.1.1. Why is an image needed?
    2. 1.1.2. Where does the image sit in the content flow?
  2. 1.2. Consider accessibility, inclusion, and culture:
    1. 1.2.1. Inclusion and culture.
    2. 1.2.2. Create and consult personas.
  3. 1.3. Plan to enable:
    1. 1.3.1. Ability.
    2. 1.3.2. Visual impariment.
    3. 1.3.3. Cognitive impairment.
    4. 1.3.4. Color perception.
    5. 1.3.5 Color pallets.
    6. 1.3.6. Color contrast.
  4. 1.4. Decide the image that best conveys the content:
    1. 1.4.1. Searching for images.
    2. 1.4.2. Stock imagery.
    3. 1.4.3. Product 'shots'.
    4. 1.4.4. Copyright.
  5. 1.5. Select or create the image:
    1. 1.5.1. Image selection.
    2. 1.5.2. Copying an image from the Internet.
    3. 1.5.3. When the right image is not available.
    4. 1.5.4. Scalable Vector Images (SVG).
    5. 1.5.5. Animated Graphic Interchange Format (GIF).
    6. 1.5.6. Image sprite sheets.

Read the Step 1 article.

Step 2: Design for Alternative Content

  1. 2.1. Design for accessibility:
    1. 2.1.1. Alternative text or alternative content?
    2. 2.1.2. Accessibility is a requirement.
    3. 2.1.3. Accessibility by image type.
  2. 2.2. Consider alternative text:
    1. 2.2.1. The HTML alt attribute.
    2. 2.2.2. Writing the alternative text value.
    3. 2.2.3. Help deciding on the alternative text.
    4. 2.2.4. Testing alternative text.
  3. 2.3. Consider alternative content:
    1. 2.3.1. Primary content.
    2. 2.3.2. Images replacing text content
    3. 2.3.3. Captions.
    4. 2.3.4. Planning alternative pages and files.

Read the Step 2 article.

Step 3: Optimize for Performance

  1. 3.1. Why optimize images?
    1. 3.1.1. What is performance?
    2. 3.1.2. What does optimizing do?
    3. 3.1.3. What do we optimize?
  2. 3.2. Optimizing image scale:
    1. 3.2.1. What can we do?
    2. 3.2.2. Optimizing image scale.
    3. 3.2.3. Find the image scale.
    4. 3.2.4. Edit an image's scale.
  3. 3.3. Optimizing file size.
  4. 3.4. Optimizing image resolution:
    1. 3.4.1. What is this resolution madness?
    2. 3.4.2. How is image resolution measured?
  5. 3.5. Dynamic loading of images:
    1. 3.5.1. The Picture element.
    2. 3.5.2. Lazy loading, etc.
    3. 3.5.3. Testing Optimization.
  6. 3.6. Import to CMS:
    1. 3.6.1. Upload your images.
    2. 3.6.2. Testing captions and alternative text and content.
    3. 3.6.3. Testing image scale, resolution, and size.
  7. Publish.

Read the Step 3 article.

Reference this article

Godfrey, P. (Year, Month Day). Article Heading. Retrieved Month Day, Year, from URL

❮ More Articles Step 1 ❯

Sponsored Ads