Photos Blurry on Retina but Sharp on a 1080p Monitor? Elementor's `Custom` Image Size Serves a 1x Asset

The client's message was the confusing kind: the team photos on a company profile site I built looked "soft" on their MacBook, and a couple of people at their office reported the same from their phones. I opened the same page on my external 1080p monitor: sharp, nothing wrong at all. I checked the originals in the media library: high-resolution studio shots, you could count individual hairs. So the photos were sharp, the page was blurry, and both of us were right. That is a strange combination, and strange usually means one of my assumptions is wrong somewhere.

My first suspect was an image optimization plugin compressing too aggressively. I checked; the compression was reasonable. Second suspect: a CDN serving a stale variant. Also no. Only then did I open DevTools and hover the img element. Chrome shows two numbers there that answered everything at once: intrinsic size 400x400, rendered size 400x400. On my 1080p monitor that is a perfect match, one file pixel per screen pixel. But the client's MacBook is not a 1x screen.

Why this happens

In Elementor's image widget, I had set Image Size to Custom and typed the exact display dimensions: 400 x 400, for a team card that indeed renders 400px wide. At the time it felt like the correct, frugal decision. Why ship a file bigger than the box that displays it?

That frugal instinct was the entire problem, for two reasons.

First, display size is not asset size. Retina screens and virtually every modern phone run at a device pixel ratio of 2x to 3x. An image occupying 400 CSS pixels needs 800 to 1200 physical pixels to look sharp. My 400px file had half of that, or a third, so the display upscaled it and the result was blur. My 1080p monitor runs at 1x DPR, which is why everything looked fine at my desk. The blur was real; it just was not visible on the screen I used to verify.

Second, and this is the nastier part: Elementor's Custom size generates exactly one file. There is nothing for the browser to choose from. WordPress normally injects a srcset with several sizes, and browsers on dense screens automatically pick a denser source. With Custom, that mechanism is completely dead:

<!-- Image Size: Custom (400x400). One file, no srcset. -->
<img src="/wp-content/uploads/team-photo-400x400.jpg"
     width="400" height="400" alt="Team member">
 
<!-- Image Size: Large. WordPress keeps srcset in play. -->
<img src="/wp-content/uploads/team-photo-1024x1024.jpg"
     srcset="/wp-content/uploads/team-photo-300x300.jpg 300w,
             /wp-content/uploads/team-photo-768x768.jpg 768w,
             /wp-content/uploads/team-photo-1024x1024.jpg 1024w"
     sizes="(max-width: 480px) 100vw, 400px"
     width="1024" height="1024" alt="Team member">

The browser on that MacBook genuinely wanted to help. It knew its DPR was 2x and would have happily fetched an 800px file if offered one. I offered nothing.

The fix

Stop serving display-sized files. I switched Image Size from Custom to a larger registered size, Large for the team cards and Full for hero imagery, and let CSS constrain the rendered box:

.team-card img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

With a registered size, WordPress's native srcset and sizes stay in play. Browsers on 1x screens grab a small file, browsers on Retina grab a dense one. Everyone gets the right version, and I never have to guess anyone's DPR.

Where file weight genuinely matters, say Large feels wasteful for a small slot, do not go back to typing display pixels into the widget. Register a proper custom size instead, at 2x the slot:

add_action( 'after_setup_theme', function () {
    // 2x asset for a 400px display slot
    add_image_size( 'card_photo_2x', 800, 800, true );
} );

That size shows up in Elementor's Image Size dropdown. Then regenerate thumbnails so existing images get the new file:

wp media regenerate --only-missing

Verification goes back to DevTools: hover the img element and compare intrinsic size against rendered size. On a Retina screen, intrinsic should be roughly 2x rendered. If the two numbers are identical, you are serving a 1x asset, and your Retina users are looking at blur you cannot see.

The takeaway

• Display size is not asset size. A 400px box needs an 800px-plus source for modern screens.
• Elementor's Custom image size kills srcset: one file for every screen.
• When anything looks "soft", check intrinsic vs rendered in DevTools before blaming compression.
• Design the asset pipeline around a minimum DPR of 2x for photos.

And one new habit: when a client says blurry and my screen says sharp, I no longer argue. I ask first: what screen are you looking at?