Focal points for responsive images

You can set a focal point to ensure that a key part of an image won't get cropped. Focal points are particularly useful for responsive layouts, when the same image may be displayed in different sizes.

Focal point for responsive images

Limitations on focal point availability:

• Image scaling type – The Scaling property must be set to Crop image to fill or None.
• Image source type – The source must be local and not an external URL.
• Dynamic ads – Focal points aren't supported in dynamic ads.
• Animation – Focal points can't be animated. If you animate the image's dimensions, the focal point that you set for this image will apply for the initial image size.

Enabling a focal point overrides alignment options.

Set a focal point

1. Open the Edit image focal point dialogue by one of the following ways:
   • Select the image on the stage, then click the Enable focal point tick box in the Properties panel.
   • Right-click the image and select Set focal point… from the pop-up menu.
2. Drag the focal point to where you want it.
   • By default the focal point is at the centre of the image.
   • The control for the focal point appears as a white circle so that it's easy to see and click, but the cross hairs in the centre indicate the actual focal point.
   • Use the keyboard arrow keys to move the focal point one pixel at a time.
   • You can reset the focal point to the centre by right-clicking the image and selecting Reset from the pop-up menu, or by pressing Ctrl+R (Windows) or ⌘+R (Mac).
3. Switch to the Preview tab to see how the focal point affects image cropping for different image aspect ratios.
4. Click OK.

If you change the image source, Google Web Designer asks if you want to keep, edit or discard the focal point.

Edit a focal point

You can change the position of an existing focal point:

1. Open the Edit image focal point dialogue using one of the following methods:
   • Right-click the image and select Edit focal point… from the pop-up menu.
   • Select the image and click the Set focal point position button next to the Enable focal point tick box in the Properties panel.
2. Drag the focal point to its new location.
3. Click OK.

Toggle a focal point

You can disable a focal point to see how your image will appear using alignment options instead. If you re-enable the focal point, Web Designer remembers the previously set focal point position.

Use one of the following methods to toggle the focal point for the selected image:

• Click the Enable focal point tick box in the Properties panel.
• Right-click the image and select either Enable focal point or Disable focal point from the pop-up menu.

Remove a focal point

1. Right-click the image.
2. Select Remove focal point from the pop-up menu.

Swap an image with a focal point

When you use the Swap image… function or change the source of an image that has a focal point enabled, you can decide whether to keep the same focal point, edit the focal point or discard the focal point for the new image.

Focal points in Code view

In Code view, the focal point coordinates are set in the focalpoint attribute for the gwd-image element. For example: