# Handling multimedia

*Published:* 2024-12-13
*Author:* Danish Shakeel

> Design smarter with multimedia in WordPress. Learn to use preset image ratios and implement effective fallbacks for better visuals.

# Handling Multimedia in WordPress Site Editor

One of the most common mistakes I see designers make is not accounting for WordPress’s image handling limitations. While Gutenberg offers powerful media management, it comes with specific constraints that need to be considered during the design phase.

## Image Aspect Ratios

Gutenberg provides preset aspect ratios that work reliably across different devices. Some of the core options are:

- Square (1:1)
- Standard (4:3)
- Wide (16:9)
- Portrait (3:4)

![Image aspect ratio](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfC1bX8fo-ZxJuB9BP1QrO0jF731SIpQw65WKAEuPnpNTRWud4LsLxcyHhPL3HcEQUWyS2-4Zqsr6-wjzwlwtTSU0XX27kR8J9rimhT1QIBF-zqbVJ1BsxUUT3JVggcq8faymA2YA?key=naM81YGDZ-tRSPkEeGtVmg)Figure 3.7Figure 3.7 shows these four preset ratios applied to the same image. Notice how each maintains its proportion regardless of the container width.

## Handling Custom Ratios

Sometimes designs call for unique aspect ratios, like ultra-wide hero images or Pinterest-style vertical images. While it’s possible to achieve these through custom development, it often leads to inconsistent results and maintenance challenges.

## Design Considerations

When working with images, consider:

- Hero sections: Stick to 16:9 or 4:3 for consistent results
- Feature images: Square (1:1) works best for grid layouts
- Team photos: Portrait (3:4) accommodates most headshots
- Gallery items: Use consistent ratios within each gallery

## Fallback Strategies

Images can fail to load for various reasons. There are four common approaches to handling missing images:

- Text-based fallback with title
- Color block with icon
- Low-resolution placeholder
- Skeleton loader

## Video Integration

While Gutenberg handles video similarly to images, there are additional considerations:

- Poster frames (thumbnail images) should match your aspect ratio choice
- Autoplay policies vary by browser
- Mobile bandwidth concerns

Remember that working within WordPress’s limitations often leads to more maintainable designs than fighting against them.

### Categories and Taxonomies

#### Service
[WP Frontend Development](https://rtcamp.com/blog/service/wp-frontend-development.md)

#### Solutions
[WordPress Development](https://rtcamp.com/blog/solution/wordpress-development.md)

#### Topics
[Frontend](https://rtcamp.com/topics/frontend.md), [WordPress](https://rtcamp.com/topics/wordpress.md), [WordPress Development](https://rtcamp.com/topics/wordpress-development.md)

### Related Posts

- [Structural Limits of Accounting-First Software](https://rtcamp.com/handbook/why-migrate-quickbooks-to-erpnext/structural-limits.md)
- [Project structure](https://rtcamp.com/handbook/react-best-practices/project-structure.md)
- [Outgrowing standard hosting](https://rtcamp.com/handbook/enterprise-wordpress-hosting/why-choose-enterprise-wordpress-hosting.md)
- [WordPress vs Kentico](https://rtcamp.com/handbook/enterprise-consolidation/kentico-vs-wordpress.md)
- [rtCamp’s philosophy & principles](https://rtcamp.com/handbook/headless-wordpress/rtcamps-philosophy.md)