MinimalCSS Images & Media Tab

The Images & Media tab includes optimization settings for images, background images, iframes, embedded media, and media-related WordPress assets.

These settings can help improve frontend performance by reducing layout shifts, delaying non-critical media, and removing unnecessary media scripts when they are not needed.

Image and media optimization can have a direct impact on perceived speed and Core Web Vitals, especially on pages with large hero images, background sections, embedded videos, maps, galleries, or third-party iframes.

What the Images & Media Tab Is For

The Images & Media tab helps optimize how visual and embedded content loads on your site.

Depending on your setup, this may include:

  • Preloading important page images
  • Lazy loading background images
  • Lazy loading iframes
  • Adding missing image dimensions
  • Adding missing iframe dimensions
  • Removing unnecessary WordPress MediaElement assets

These settings are designed to improve loading behavior while helping pages remain visually stable.

Recommended Approach

Start with the safest settings first, then test important pages.

For most sites, image dimension settings are a good starting point because missing width and height attributes can contribute to layout shift. Lazy loading can also be helpful, but it should be tested on pages with sliders, background hero images, embedded maps, videos, or third-party widgets.

A safe workflow is:

  1. Enable one Images & Media setting at a time.
  2. Save your changes.
  3. Test your homepage and other important pages.
  4. Check desktop and mobile layouts.
  5. Confirm that images, backgrounds, videos, maps, and embeds still appear correctly.
  6. Continue enabling additional options after testing.

Preload Page Images

The Preload Page Images setting helps the browser discover important page images earlier.

Preloading can be useful for key images that appear near the top of the page, such as a hero image, featured image, logo, or important above-the-fold visual.

When used correctly, preloading can help important images load sooner and improve the visitor’s first impression of the page.

Preloading is most useful for:

  • Homepage hero images
  • Landing page banner images
  • Important featured images
  • Above-the-fold visuals
  • Large images that affect the first screen of the page

Preloading should be used carefully. Preloading too many images can compete with other important resources and may reduce the benefit. The goal is to help the browser prioritize the images that matter most early in the page load.

Lazy Load Background Images

The Lazy Load Background Images setting delays loading background images until they are needed.

This can be helpful because CSS background images are not always handled the same way as regular elements. Large background images lower on the page can add unnecessary weight to the initial load.

Lazy loading background images can help improve performance on pages with:

  • Background image sections
  • Full-width banners
  • Alternating content rows
  • Decorative image panels
  • Page builder background images
  • Call-to-action sections lower on the page

 

Lazy Load iframes

The Lazy Load iframes setting delays iframe loading until the iframe is closer to being viewed.

iframes are commonly used for embedded content from third-party services. They can be heavy because they often load scripts, styles, images, and tracking resources from external platforms.

Lazy loading iframes can improve performance on pages that include:

  • YouTube videos
  • Vimeo videos
  • Google Maps
  • Social media embeds
  • Booking widgets
  • Review widgets
  • Calendars
  • Third-party forms
  • Embedded tools or dashboards

This setting is usually helpful when iframes appear lower on the page. It prevents the browser from loading every embedded resource immediately.

Add Missing Image Dimensions

The Add Missing Image Dimensions setting adds width and height attributes to images that are missing them.

When images do not have dimensions, the browser may not know how much space to reserve before the image loads. This can cause the page layout to shift as images appear.

Adding missing image dimensions can help reduce layout shift and improve visual stability.

This is especially useful for:

  • Blog images
  • Featured images
  • Inline content images
  • Product images
  • Gallery images
  • Logo images
  • Images added by older themes or plugins

After enabling this setting, review important pages to make sure images still scale correctly on desktop and mobile.

Most responsive themes handle image dimensions properly, but testing is still recommended, especially on custom layouts, older themes, and page builder sections.

Add Missing iFrame Dimensions

The Add Missing iFrame Dimensions setting adds width and height attributes to iframes that are missing them.

Like images, iframes can cause layout shift when the browser does not know how much space to reserve for them before they load.

Adding missing iframe dimensions can help stabilize pages with embedded media and third-party widgets.

This is useful for:

  • Embedded videos
  • Maps
  • Calendars
  • Booking widgets
  • Review widgets
  • Social media embeds
  • Third-party forms
  • Other iframe-based embeds

After enabling this setting, check pages with embedded content to confirm that the iframe size still looks correct on desktop and mobile.

Remove MediaElement

The Remove MediaElement setting removes WordPress MediaElement assets when they are not needed.

WordPress includes MediaElement scripts and styles to support audio and video players. These assets may load on the frontend even when a site does not rely on the default WordPress media player.

Removing MediaElement can reduce unnecessary frontend assets on sites that do not use WordPress-native audio or video players.

This setting may be useful if your site uses:

  • Embedded YouTube or Vimeo videos instead of native WordPress video
  • Custom video players
  • Page builder media widgets
  • No audio or video player features
  • Lightweight image-only content

Be careful with this setting if your site uses:

  • WordPress audio blocks
  • WordPress video blocks
  • Self-hosted video files
  • Self-hosted audio files
  • Podcast players that depend on WordPress media handling
  • Themes or plugins that rely on MediaElement

After enabling this option, test any page that includes audio or video content. If the default media player stops displaying or behaves unexpectedly, re-enable MediaElement.

Best Practice Workflow

A safe Images & Media workflow looks like this:

  1. Enable Add Missing Image Dimensions.
  2. Test important pages for layout stability.
  3. Enable Add Missing iFrame Dimensions if your site uses embeds.
  4. Test pages with videos, maps, forms, and widgets.
  5. Enable Lazy Load iframes for pages with below-the-fold embeds.
  6. Enable Lazy Load Background Images and check hero sections carefully.
  7. Use Preload Page Images for important above-the-fold images.
  8. Remove MediaElement only if your site does not rely on WordPress-native audio or video players.
  9. Re-test your homepage, landing pages, blog posts, product pages, and contact pages.

The goal is to reduce unnecessary media loading while keeping important visuals and embedded features reliable.

Troubleshooting

My hero image loads too late

The hero image may be affected by lazy loading. Above-the-fold images should usually load immediately. Review lazy loading settings and consider using image preload for important hero images.

A background image flashes in after the page loads

The background image may be lazy loaded. This may be acceptable for lower-page sections, but not for important top-of-page visuals. Test the page and adjust the setting if needed.

A video or map does not appear right away

The iframe may be lazy loaded. This is usually expected for below-the-fold embeds. If the iframe is important above the fold, review whether it should be lazy loaded.

Images shift the page layout while loading

Enable Add Missing Image Dimensions and test again. Missing dimensions are a common reason images cause layout movement during load.

Embedded videos or maps shift the page layout

Enable Add Missing iFrame Dimensions and review the affected page. The browser needs dimensions to reserve space before the iframe finishes loading.

The WordPress audio or video player stopped working

MediaElement may have been removed. Re-enable MediaElement if your site uses WordPress-native audio or video players.

An iframe looks stretched or cropped

The added iframe dimensions may not match the responsive layout. Review the embed on desktop and mobile, and adjust the related setting if needed.

Recommended Settings for Most Sites

For many brochure, service, and content websites, a good starting point is:

  1. Enable Add Missing Image Dimensions.
  2. Enable Add Missing iFrame Dimensions if the site uses embeds.
  3. Use Lazy Load iframes for videos, maps, and third-party embeds lower on the page.
  4. Use Lazy Load Background Images carefully, especially around hero sections.
  5. Use Preload Page Images for important above-the-fold images.
  6. Remove MediaElement only if the site does not use WordPress-native audio or video players.

These settings can help improve performance while reducing layout shifts and unnecessary media loading.