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. Navigate to Configuration > Media > Image styles.
  3. Click + Add image style.
  4. Enter User picture in the Image style name field. Click Create new style

    Enter image style name

You created the image style User picture. You can edit the User picture as required. For more information, see Edit 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. Navigate to Configuration > Media > Image styles.
  2. Click Edit on the User picture style name.

    Edit style user picture screen

  3. Under Effect, select Scale and crop from the list and click Add.
  4. Enter 300 in the Width and Height boxes. Leave the Anchor as the middle setting.
  5. Click Add effect.

    Scale and crop options

  6. Click Save to save the changes.
You edited the image style User picture.

Assign User picture to the picture option in Account settings

  1. Navigate to Configuration > People > Account settings and click the Manage display tab.
  2. Click the Compact tab.

    Manage display page displaying the display settings

  3. On the Picture row, click Cog icon.
  4. Select User picture from the Image style list.
  5. Click Update
  6. Click Save to save the changes .

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, go to 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