Tutorial: Using image optimization

You can use image optimization on your Developer Portal site to enhance the use of images.

Optimized images do not overload your website and significantly increase its performance compared to using the original images. Your customer satisfaction and brand reputation improve with fast-loading and trimmed visual assets. Automatic optimization can save time and effort on editing and content moderation.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so.

About this tutorial

In this task, you create an image style that is called User picture, and give it a scale and crop effect. Then, use the User picture as the Picture field in the user account.

This tutorial takes you through the following steps:
  1. Create the image style User picture.
  2. Edit the image style User picture.
  3. Assign User picture to the picture option in Account settings..

Create the image style User picture

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Navigate to Configuration > Media > Image styles.
  4. Click + Add image style.
  5. Enter User picture in the Image style name block. Click Create new style

    Add image style

You created the image style User picture.

Edit the image style User picture

When you edit this style, you choose the width and height settings. Also, the part of the picture to retain during the crop, for example, the center.
  1. If the administrator dashboard isn’t displayed, click Manage to display it.
  2. Navigate to Configuration > Media > Image styles.
  3. Click Edit on the User picture style name.

    Edit User picture style

  4. Select Scale and crop from Select a new effect, then click Add.
  5. Enter 300 in the Width and Height boxes. Leave the Anchor as the middle setting. Click Add effect.

    Scale and crop options

  6. Click Save.

    Style changes have been saved

You edited the image style User picture.

Assign User picture to the picture option in Account settings

  1. If the administrator dashboard isn’t displayed, click Manage to display it.
  2. Navigate to Configuration > People > Account settings > Manage display, then click Compact tab.

    User account settings

  3. On the Picture row, click Cog icon.
  4. Select User picture from the Image style drop-down.
  5. Click Update and Save.

You set the User picture image style for all accounts.

What you did in this tutorial

You changed your account settings so that if the user displays a picture it is within the limits of the image style User picture.

To check the picture used by a user, navigate to Manage > People, click a user, and see their picture on their profile page. Right-click the image, then click View image info, you can see that the dimensions are scaled.

Image dimensions