Overview
The Image element renders as an <img> tag and displays images on your page. By default, images include max-w-full and h-auto classes for responsive sizing that prevents images from overflowing their containers while maintaining aspect ratio.
Images require two essential attributes: src (the image URL) and alt (accessibility description). You can select images from your WordPress Media Library or enter a URL directly.
For advanced layout control, use object-fit utilities to control how images fill their containers, and aspect ratio classes to enforce specific proportions.
Always provide descriptive alt text for images. This is essential for screen reader users and improves your site's SEO. Describe what the image shows, not just "image" or "photo".
Settings
Configure the Image element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Source (src) | Image URL or select from Media Library. Click the media button to browse uploaded images. | Placeholder image |
| Alt Text | Accessibility description displayed when image cannot load. Required for SEO and screen readers. | "Image description" |
| Width | Image width constraint using Tailwind width classes. | max-w-full (responsive) |
| Height | Image height using Tailwind height classes. | h-auto (maintain aspect ratio) |
| Object Fit | How image fills its container: object-cover (crop to fill), object-contain (fit without cropping), object-fill (stretch), object-none (original size). |
Not set |
| Aspect Ratio | Force specific aspect ratio: aspect-video (16:9), aspect-square (1:1), or arbitrary values like aspect-[4/3]. |
Not set |
| Lazy Loading | Enable native lazy loading for performance. Images load only when scrolled into view. | Not set |
Object Fit Options
Control how images fill their containers when using fixed dimensions:
object-cover– Image covers entire container, cropping edges if needed. Best for hero images and backgrounds.object-contain– Image fits entirely within container, may leave empty space. Best for logos and product images.object-fill– Image stretches to fill container, may distort. Rarely recommended.object-none– Image displays at original size, may overflow. Useful for specific design effects.
Examples
Basic Responsive Image
A simple responsive image that scales with its container and maintains aspect ratio.
<img
src="/path/to/image.jpg"
alt="A sunset over the mountains with orange and purple colors"
class="max-w-full h-auto"
>Image with Aspect Ratio
Force an image to maintain a specific aspect ratio, useful for grids of images that need consistent sizing.
<img
src="/path/to/image.jpg"
alt="Product photograph showing the item from front angle"
class="w-full aspect-video object-cover rounded-lg"
>Image with Object-Cover in Container
A fixed-size container with an image that fills it completely, cropping edges as needed.
<div class="w-64 h-64 overflow-hidden rounded-full">
<img
src="/path/to/profile.jpg"
alt="Portrait of Jane Smith, CEO"
class="w-full h-full object-cover"
>
</div>Enable lazy loading (loading="lazy") for images below the fold. This improves initial page load time by deferring off-screen image loading.
Writing Good Alt Text
Effective alt text describes the image content and purpose:
- Good: "Team members collaborating around a whiteboard in our open office"
- Bad: "team.jpg" or "image"
- For decorative images: Use an empty alt attribute (
alt="") if the image is purely decorative