Retina Images Do Not Load on 4K Displays

Your theme has a small bug where it cannot detect 4k desktop/laptop displays as “retina” displays even though they are. The result is that all thumbnails use the lower res version on 4k displays and they all look blurry. I tried turning off the “regular” thumbnails and just leaving retina on, hoping this would force the retina version to display all the time, but that just shows the thumbnail missing placeholder. Any way to make this happen?

This is not about the logo. The logo is correctly displayed in retina form on 4k displays. However, every featured image is shown in low-res on 4k displays, which are all retina dpi displays, capable of showing images at 2x normal resolution. What I am telling you is that this is a bug in your theme. Other themes correctly show retina images on 4k displays. Since your theme relies heavily on photos – since it’s a newspaper theme – this is far more critical of a bug for you than a standard theme that doesn’t specialize in something particular.

I guess I should be more specific here….your code is requiring too high of a dpi/pixel count to show the retina image. I’ve tried loading our pages on a 15″ 4k screen (255dpi) and a 27″ 4k screen (156dpi) and both fail to display the retina images even though both are capable and the regular images are very obviously blurry.

It isn’t until you get to 350dpi devices that it starts showing the correct retina image. It shouldn’t be that high. Any device with a dpi higher than 100dpi is going to be able to show an improved image with the retina version.

This is false. And I know this because EVERY OTHER MAJOR WEBSITE properly displays retina images on my 4k display. All of them. It’s only the Newspaper theme that does not do this. There is no need to read any of those articles. This is a BUG in your coding and I tell you this with 100% certainty.

Let me show you just one of the hundreds of examples where retina images show properly on my 4k display. Here is the Newspaper theme with retina images turned on but not working on my 4k display: https://prnt.sc/pta1bv

Here is The Guardian newspaper website loaded right next to it on the same display: https://prnt.sc/pta21h

See the difference? Let me say this again: EVERY SINGLE NEWS WEBSITE properly shows retina images on 4k displays except the Newspaper theme.

We can stop using the term “retina” and simply say that Newspaper theme does not properly display high dpi images on high dpi screens. Please fix this. I haven’t posted a review of the theme but will be doing so this week. No support for high dpi images on a theme that’s primarily images is a huge problem.

Yes, Retina is an Apple brand name, which is why I said to not focus on retina and let’s just call it high-dpi images.

What I am telling you, and this is indisputable, is that your theme does not properly detect high-dpi displays and shows the proper high-dpi image. No matter what your explanation is, this is a flaw in the theme.

Why not fix this? Why throw in the towel and just tell me you can’t do it, when EVERY OTHER WEBSITE ON THE INTERNET can do this? It’s literally just you guys getting this wrong. Why are you trying to explain it away rather than fix it?

How about this – is there a workaround or code snippet I could use that would simply show retina/high-dpi images to ALL users regardless of the display they had? I’d rather everyone have to download images that might be larger in bytes than necessary if it means those with highdpi devices see the proper images.

@co50 I think Calin was trying to tell you where the dpi settings were, if you would like to adjust the threshold to display retina images down to 100dpi.

Also a part of retina is set in this file -> http://prntscr.com/pt251i -> wp-content/plugins/td-composer/legacy/common/wp_booster/td_util.php and this file -> http://prntscr.com/pt25ns -> wp-content/plugins/td-composer/legacy/Newspaper/js/tagdiv_theme.js if you change the tagdiv_theme.js you’ll need to mimify the code en replace the one from tagdiv_theme.min.js

That seems to be the main cause of your issue and I would personally not consider it a “bug” – its just how they have their theme configured to keep images / page sizes optimized for faster load times.

There are no plugins we could find that force retina images to be shown to all browsers. The one you linked has nothing to do at all with what we want.

Further investigation, if this helps, found that the issue with your theme only occurs on Chrome. It does not occur on other browsers. But again, everyone else’s theme and website shows highdpi images on my display with both Chrome and Firefox (and even IE 11!).

Hi. Any news on this issue? I’m having the same trouble with the logo. I’ve uploaded a retina logo size: 544x180px and the theme keeps showing a 300x99px crop version automatically generated. I tried deleting “-300×99” added by the theme from the “data-retina” and “src” urls generated using the browser inspector and the image looks with the quality it should.

This is the original file url:
wp-content/uploads/2020/01/logo-top@1x.png

The theme creates this url once used as the header logo:
wp-content/uploads/2020/01/logo-top@1x-300×99.png

Thanks in advance

Hi. I ended up creating a new header using the Cloud Template and that seemed to solve the issue. My display is retina. I use a MacBook Pro. Thanks