If you’re using large, high-quality images in WordPress but noticing blurriness or pixelation, the solution may lie in how Cover blocks process images. Here’s a closer look at why this happens, and how I solved it by refining the Cover block code.
The Problem: Blurry Images on High-Resolution Displays
The initial problem was straightforward: even with a high-res image uploaded at 1920×1080, WordPress was serving a scaled-down version, resulting in pixelation on screens with higher resolutions. Here was my setup:
- Image Resolution: 1920×1080
- Screen Resolution: 2048×1280
- Cover Block Layout: Full-width, covering 100% of the viewport height
At this size, WordPress stretched the image, and pixelation became noticeable.
Why This Happens: WordPress and Image Scaling in Cover Blocks
By default, WordPress optimizes images by serving a scaled version, often relying on the “Large” size setting, which isn’t always adequate for full-width, high-res screens. WordPress also wraps the Cover block image in an <img> tag, limiting how well it can scale beyond its max dimensions.
Original Cover Block Code
In the original setup, the image is displayed via an <img> tag, relying on WordPress’s image size scaling. Here’s what it looked like:
<!-- wp:cover {"url":"https://travisbevan.com/wp-content/uploads/2016/02/IMG_4882_HDR.jpg","id":198,"dimRatio":0,"customOverlayColor":"#6293c0","minHeight":100,"minHeightUnit":"vh","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:100vh">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#6293c0"></span>
<img class="wp-block-cover__image-background wp-image-198" alt="" src="https://travisbevan.com/wp-content/uploads/2016/02/IMG_4882_HDR.jpg" data-object-fit="cover"/>
<div class="wp-block-cover__inner-container">
<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover -->In this setup, WordPress prioritizes its optimized size rather than the full quality image, limiting sharpness on larger displays.
The Solution: Use background-image for Sharp, Responsive Coverage
To fix this, I replaced the <img> tag with a CSS background-image, which scales more effectively across display sizes. Here’s the updated code:
<!-- wp:cover {"url":"https://travisbevan.com/wp-content/uploads/2016/02/IMG_4882_HDR.jpg","dimRatio":0,"customOverlayColor":"#6293c0","isUserOverlayColor":true,"minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"center","layout":{"type":"default"}} -->
<div class="wp-block-cover aligncenter is-light" style="min-height:100vh; background-image: url('https://travisbevan.com/wp-content/uploads/2016/02/IMG_4882_HDR.jpg'); background-size: cover; background-position: center;">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#6293c0"></span>
<div class="wp-block-cover__inner-container">
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover -->With this updated code in place, the Cover block now displays the image as a background-image, which maintains sharpness and clarity across all screen sizes. Below, you can see how the image looks with this approach, appearing clear and well-proportioned without any pixelation, even on high-resolution displays. This method offers a seamless visual experience that better showcases high-quality images.
Why This Fix Works
Using background-image gives the Cover block better scaling and resolution options, avoiding WordPress’s predefined image dimensions. This approach, paired with background-size: cover; and background-position: center;, ensures the image fills the entire viewport without sacrificing quality on larger displays.
Conclusion
Want to enhance the visual quality of your WordPress site? Try implementing this background-image solution today! Share your results or any questions you have in the comments below, and let’s elevate your image game together!
Leave a Reply