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

Focal points for background images

A focal point can be useful when you set an image as a background image. Set the image width and height to 100%, then set a focal point to make sure the most important part of the image is always visible regardless of the element size.

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 dialog by one of the following ways:
   • Select the image on the stage, then click the Enable focal point checkbox 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 center 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 center 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 center 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 dialog 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 checkbox 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 checkbox 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 and media rules

You can't change a focal point's position using media rules. If you want to display different images depending on the viewport size, but the images can't use the same focal point, you can include both images in your document, then use media rules to change the opacity of each image to 0 for the viewport sizes where it shouldn't be visible.

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:

<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>