Image

Image displays a picture from the WordPress media library or a URL. It includes image sizing, alternative text, loading behavior, effects, borders, and spacing.

Add and configure Image

1. Click Add, choose Image, and place it in the container.
2. Choose Content > Image > From: Media Library or URL.
3. Choose the Media item or enter the URL, then set the image size and alternative text options.
4. Review Lazy Load, Disable Srcset & Sizes, and Set HTML Width & Height before styling the image under Design.
5. Save your changes.

This element has no children; use its own controls.

Content and front-end behavior

For media-library images, Size selects a registered WordPress size. Lazy Load defers off-screen loading; turn it off where an immediately visible image should load promptly. Disable Srcset & Sizes removes the browser's responsive image candidates. Explicit HTML width and height describe image dimensions; check them against the source image.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Image

Setting	Purpose and options	Behavior
From	Media Library, URL.	Shared
Media	WordPress media. When: From = Media Library.	Shared
URL	Destination URL. When: From = URL.	Shared
Size	Registered WordPress or custom image size. When: Media is set and From = Media Library.	Shared
Alt	Media Library, Custom, Decorative. When: From = Media Library.	Shared
Custom Alt	Alternative text describing the image. When: From = Media Library and Alt = Custom.	Shared
Alt	Custom, Decorative. When: From = URL.	Shared
Custom Alt	Enter the custom alt. When: From = URL and Alt = Custom.	Shared
Lazy Load	On/off. When: From is set.	Shared
Disable Srcset & Sizes	On/off. When: From = Media Library.	Shared
Set HTML Width & Height	On/off. When: From is set.	Shared
Width	Width. When: Set HTML Width & Height is set and From is set.	Shared
Height	Height. When: Set HTML Width & Height is set and From is set.	Shared

Design > Image

Setting	Purpose and options	Behavior
Width	Width.	Responsive
Max Width	Max width and unit.	Responsive
Height	Height.	Responsive
Aspect Ratio	1:1, 4:3, 3:2, 16:9, 8:5, Custom.	Responsive
Custom Ratio > Width	Width. When: Aspect Ratio = Custom.	Responsive
Custom Ratio > Height	Height. When: Aspect Ratio = Custom.	Responsive
Object Fit	Cover, Contain, Fill, None. When: Height is set or Aspect Ratio is set.	Responsive
Object Position	Set object position. When: Object Fit is set.	Responsive

Design > Effects

Setting	Purpose and options	Behavior
Opacity	Set opacity. Range: 0–1.	Hover
Filters > Filter Items	Add, edit, remove, and reorder filter items.	Hover
Filters > Filter Items > Type	blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia.	Shared
Filters > Filter Items > Blur Amount	Blur amount and unit. When: Type = blur.	Shared
Filters > Filter Items > Amount	Amount and unit. When: Type = brightness, contrast, grayscale, invert, saturate, sepia.	Shared
Filters > Filter Items > Rotate	Rotate and unit. When: Type = hue-rotate.	Shared
Transition Duration	Transition duration.	Shared
Blend Mode	normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.	Shared

Design > Borders

Setting	Purpose and options	Behavior
Borders	borders controls.	See linked controls

Design > Spacing

Setting	Purpose and options	Behavior
Spacing	spacing controls.	See linked controls

Troubleshooting