What Smush's lazy loading placeholder does

Lazy loading in Smush delays image downloads until a visitor scrolls near them, which speeds up your page load time. A placeholder is what appears in that image's space while the real image loads — it can be a solid color, a blurred preview, or a low-quality version of the actual image. Smush gives you control over which placeholder style you want and how it looks.

The placeholder matters because visitors see something in the image area instead of a blank space or broken layout. This keeps your page looking intentional while images load in the background. Without a placeholder, the page can shift around as images pop in, which is distracting and can hurt your search ranking.

Key Takeaways

  • Lazy loading placeholders are set in Smush under Settings > Lazy Load, and you choose between color, blur, or low-quality image options.
  • A solid color placeholder loads fastest but shows nothing about the image; a blurred placeholder gives a visual hint without the file size of the full image.
  • You can set a default placeholder for all images and override it for specific images using Smush's image-level settings.
  • The placeholder color or blur strength affects how your page looks while loading, so test it on a staging site before changing it on live pages.

Where to find lazy loading settings in Smush

Open your WordPress dashboard and go to Smush > Settings. On the Settings page, click the Lazy Load tab. This is where all placeholder and lazy loading options live. If you do not see a Lazy Load tab, make sure Lazy Load is turned on — there is a toggle at the top of the Smush settings page.

The Lazy Load tab shows your current placeholder choice and lets you change it. Below that are options for how lazy loading behaves on your site — things like which image types to lazy load and whether to load images when the visitor's connection is slow. Start with the placeholder section at the top.

Choosing between placeholder types

Smush offers three main placeholder styles. A solid color placeholder fills the image space with one flat color — usually gray or white — until the real image loads. This is the fastest option because it is just a color, not an image file. It tells visitors something is there, but they do not see what the image is until it loads.

A blurred placeholder shows a very low-quality, blurred version of the actual image. This gives visitors a hint of what the image contains without downloading the full file. It looks more polished than a solid color but takes slightly longer to render because Smush has to generate and serve a small blurred copy.

A low-quality image placeholder (sometimes called LQIP) is a small, compressed version of the real image. It is sharper than blur but still much smaller than the full image. This option gives the best visual preview but requires Smush to create and store a tiny version of every image on your site.

For most sites, blur is the middle ground — it looks good, loads fast, and does not require extra storage. Solid color is best if your site is already slow or if you have thousands of images. Low-quality image is best if you want the sharpest preview and your hosting can handle the extra files.

Setting a default placeholder color

If you choose a solid color placeholder, you can pick which color appears. In the Lazy Load settings, look for the Placeholder Color option. Click the color picker box to open a color chooser. Pick a color that matches your site's background or a neutral gray that works with most page designs.

The color you pick becomes the default for all images using lazy loading. If your site has a white background, a light gray or white placeholder blends in smoothly. If your site has a dark background, pick a darker gray so the placeholder does not look jarring. You can always change this color later — it does not affect images that have already loaded.

Adjusting blur strength for blurred placeholders

If you select blur as your placeholder type, Smush usually sets a default blur amount that works for most sites. You can adjust how blurry the placeholder is by looking for the Blur Strength or Blur Level slider in the Lazy Load settings. A higher number makes the placeholder more blurred; a lower number makes it sharper.

A stronger blur (higher number) loads faster because there is less detail to render, but visitors see less of what the image actually shows. A lighter blur (lower number) gives a better preview but takes a fraction longer to display. Most sites use a medium blur strength — around 40 to 60 on a 0-100 scale — as a balance.

Test your blur setting by visiting your site in a new browser tab and watching images load as you scroll. If the placeholder looks too blurry or too sharp, come back to this setting and adjust it. Changes take effect immediately on new page loads.

Overriding placeholders for specific images

You can set a different placeholder for individual images instead of using the site-wide default. To do this, go to your Media Library, click an image, and look for Smush options in the image details panel. You should see a section for lazy loading settings specific to that image.

From there, you can choose a different placeholder type just for that image — for example, use blur for most images but a solid color for a hero image at the top of your page. This is useful if certain images are critical to your page design and you want them to look a specific way while loading.

Keep in mind that overriding placeholders for many images takes time and is usually not necessary. Use the site-wide default for consistency, and only override it for images where the default does not fit your design.

Testing your placeholder setup

Before you finalize your placeholder choice, test it on a staging version of your site or a test page. Open your site in a browser, open the developer tools (press F12 or right-click and select Inspect), and go to the Network tab. Reload the page and watch how images load — you will see the placeholder appear first, then the real image replace it.

On a live site with real visitors, you can also test by throttling your connection to simulate a slow network. In Chrome or Firefox developer tools, go to the Network tab, find the connection speed dropdown (usually says "No throttling"), and select a slower speed like "Slow 3G". Reload your page to see how placeholders look on slower connections.

If the placeholder looks wrong, feels too slow, or does not match your site design, go back to Smush > Settings > Lazy Load and adjust it. There is no penalty for changing your placeholder type or color — it only affects new page loads after you save the change.

Frequently Asked Questions

Does a placeholder slow down my page if it is too detailed?

A solid color is instant. A blurred placeholder takes a few milliseconds longer because the browser has to render the blur effect, but the difference is not noticeable to visitors. A low-quality image placeholder is slightly slower because it is an actual image file, but still much faster than loading the full image. For most sites, any placeholder type is fine.

Can I use a custom image as a placeholder instead of color or blur?

Smush's built-in settings do not support custom placeholder images. You can use solid color or blur. If you need a custom placeholder, you would need a different plugin or custom code. For most sites, blur or color works well enough.

What happens to my placeholder if I change it after images have already loaded?

The placeholder only appears on new page loads or for visitors who have not cached your site. Visitors who already loaded your page will not see the new placeholder until they clear their browser cache or visit again later. The change takes effect immediately for new visitors.

Does the placeholder show on mobile devices?

Yes, placeholders show on all devices — desktop, tablet, and mobile. Mobile visitors often have slower connections, so the placeholder is actually more noticeable on phones. Test your placeholder on a mobile device to make sure it looks good on smaller screens.

Can I disable lazy loading for certain images?

Yes. In the Media Library, click an image and look for the Smush lazy loading options. You should see a toggle to turn lazy loading off for that specific image. This is useful for images above the fold (visible without scrolling) that you want to load immediately instead of waiting.