When the Logo Widget stopped showing retina images and the srcset fallback I used to restore crisp logos on high-DPI screens

When the Logo Widget stopped showing retina images and the srcset fallback I used to restore crisp logos on high-DPI screens

If you’ve ever managed a website with client logos or brand graphics, you know how important it is for those logos to look crisp and clean on all screen resolutions. For a long time, I relied on my trusty Logo Widget—a plugin many WordPress users will recognize—for dropping these visuals onto pages with ease. But one day, while viewing a new build on a Retina screen, I noticed something was off: my logos looked… blurry. That led me down a rabbit hole of investigating image resolutions, srcset behavior, and ultimately implementing a modern-fallback that brought their crispness back.

TL;DR

When the Logo Widget I used in WordPress stopped displaying retina-quality images, I found that the issue stemmed from missing srcset data in the rendered image tags. To solve this, I manually implemented srcset attributes by customizing the output or using a plugin that supported advanced image rendering. The change allowed high-DPI devices to load appropriate logo resolutions, ensuring crisp visuals again. This article walks through the issue, the debugging steps, and the simple-yet-effective fallback I created.

Identifying the Problem: A Blurry Wake-up Call

Let’s set the scene. I was finalizing a design mock-up with client logos prominently displayed in a grid. Everything looked great—until I pulled it up on a Retina MacBook Pro. Suddenly, those logos looked like they’d been through a faulty fax machine.

This happened because Retina (or other high-DPI) screens use more pixels to show the same dimensions, meaning a standard 1x resolution image is stretched and therefore appears blurry. Normally, WordPress (and many good plugins) handle this gracefully by including srcset attributes in the image tag, which lists higher-resolution sources like logo@2x.png, allowing the browser to choose the appropriate image.

However, upon inspecting the DOM, I noticed something interesting: 

<img src="logo.png" alt="Client Logo">

No srcset. No sizes. Just the base image. That explained the blurriness—it simply wasn’t loading a high-res version.

Investigation: Why Had srcset Disappeared?

Until recently, the Logo Widget had been working fine. To rule out caching or deployment issues, I spun up a clean install with just the plugin—and the issue persisted. Upon further research and scanning through plugin changelogs, I discovered that a recent update had inadvertently removed or bypassed WordPress’s native wp_get_attachment_image() function, which automatically includes srcset data when available.

In its place, the image was being rendered with raw <img src> tags directly referencing the media attachment’s base URL. This meant that even if a 2x or 3x version existed in the media folder, the browser had no way to know it.

Understanding srcset and Why It Matters

The srcset attribute provides options for the browser to choose from depending on the user’s screen size and resolution. For instance: 

<img 
  src="logo.png" 
  srcset="logo.png 1x, logo@2x.png 2x" 
  alt="Client Logo">

Here’s what this does:

  • 1x: Used by standard displays.
  • 2x: Used by Retina and high-DPI displays.

Without this, the browser always picks the 1x version—no matter what device it’s on. This is why having srcset is vital for image clarity, especially for sharp-edged logos and icons, which are unforgiving when pixelated.

My Fallback: Restoring Clarity, One Logo at a Time

With the widget no longer reliable for automated retina handling, I had three options:

  1. Roll back to an older version
  2. Create a child theme override
  3. Use a manual srcset fallback

I opted for the third. The idea was simple: for every logo, I would manually specify both the 1x and 2x versions, and insert an <img> tag directly in a custom HTML widget or Gutenberg block. Here’s what I used: 

<img 
  src="/wp-content/uploads/2023/10/logo.png" 
  srcset="/wp-content/uploads/2023/10/logo.png 1x, /wp-content/uploads/2023/10/logo@2x.png 2x" 
  alt="Client Logo" 
  width="150" height="75">

Yes, it was manual. But it worked beautifully across all devices.

Making It Scalable: Automating the Fix (Somewhat)

While inserting everything manually works for a handful of logos, it’s not ideal when you’re juggling dozens. So next, I created a shortcode function in functions.php to simplify the process. That way, I could insert logos like this: 

[retina_logo src="logo.png" src2x="logo@2x.png" width="150" height="75" alt="Client Logo"]

Then I added the following to my theme: 

function retina_logo_shortcode($atts) {
  $atts = shortcode_atts( array(
    'src' => '',
    'src2x' => '',
    'width' => '',
    'height' => '',
    'alt' => ''
  ), $atts );

  $src = esc_url( $atts['src'] );
  $src2x = esc_url( $atts['src2x'] );
  $alt = esc_attr( $atts['alt'] );

  return '<img src="' . $src . '" srcset="' . $src . ' 1x, ' . $src2x . ' 2x" width="' . $atts['width'] . '" height="' . $atts['height'] . '" alt="' . $alt . '">';
}
add_shortcode( 'retina_logo', 'retina_logo_shortcode' );

Problem solved with consistency and maintainability.

Additional Recommendations

If you’re dealing with a lot of visual elements and want to future-proof your designs for next-gen screens, here are a few tips:

  • Use SVG wherever possible: SVGs are resolution-independent and perfect for logos.
  • Consider responsive plugins: Some plugins like Advanced Custom Fields can give you more control over front-end rendering.
  • Test often: Check your output on various devices or use Chrome DevTools to simulate DPI environments.

The Bigger Picture

This experience reminded me of a critical lesson in web development: never blindly trust that a plugin will handle things correctly forever. Developers make updates, APIs change, and assumptions we make today can unravel tomorrow.

By understanding how features like srcset and sizes work, we can create better experiences for users on all devices. And beyond the technical fix, this journey reaffirmed the virtue of inspecting our work with fresh eyes—and high-resolution screens.

Conclusion

Crisp logos are more than just aesthetic—they convey professionalism and attention to detail. When my Logo Widget dropped the ball on retina displays, I had two options: settle for blurry output or understand the root of the problem and fix it. I’m glad I chose the latter.

Whether you’re a designer, developer, or someone managing a brand’s digital presence, I hope this story helps you maintain visual excellence. Retina screens are here to stay, and with the right approach, your logos can shine just as clearly as your brand message.

Avatar for Khera
Khera

Related Posts