Not Serving High Res to Retina Display

Hello, my friend,

First of all the image you mention “in question” is not a very large one. It is only 1100x619px. Are you sure this is the one we need to test?

Now, all my checks show that the plugin is working as expected and that your images are being resized as they should. For instance look at these two debug image urls:

https://bravoechoinc.com/wp-content/uploads/2017/05/BE_Sliders_JCI.jpg?resolution=320,1
https://bravoechoinc.com/wp-content/uploads/2017/05/BE_Sliders_JCI.jpg?resolution=320,2

They show that image resizing is working and that double (x2) device pixel ratio is handled correctly.

Last but not least, about your iMac and very large resolutions in general, I must point out that the Adaptive Images plugin will not try to enlarge an image that is not big enough for a screen resolution. It always tries to remain below or equal to the natural image size.

Hope this helps!

Let me know if I can help any further.

Cheers,
Takis

Hello again,

Thank you for looking into it. The reason I say that is the image “in question” is because that is not the image that I need served to retina devices. That is my problem exactly, there is a 5120×2880 sitting in my media library that Adaptive does not serve when I view the site on my retina screen, even though I set 5120 as a breakpoint in the plugin settings.

I am not trying to get adaptive to scale images up, what I would like is for it to identify the retina device and select/serve the high-res image from my media library instead of the 1100×619 image (the original asset) I cannot point you to the high-res image because it is not getting served. Is that possible? The person who recommended this plugin told me it was but I’m not sure anymore. Thank you for taking the time to look into this issue.

-Danny

• This reply was modified 7 years, 9 months ago by dannyecho.

Hello, Danny,

Indeed, the plugin detects the device pixel ratio of each screen and, if the corresponding option is enabled in the settings page, it serves larger images. In my tests of your website I saw it happening myself.

Could you please point me to the actual 5120×2880 pixel image and a page that you are using it in? Because the image you originally mentioned does seem to be only 1100×619. Or am I missing something here? Even the “debug original” parameter says so: https://bravoechoinc.com/wp-content/uploads/2017/03/BE_Work_Meijer_mPerks_Img_1.jpg?debug=original.

Cheers,
Takis

Yes, that is the problem, when I view the webpage on a high res retina screen I do not want BE_Work_Meijer_mperks_Img_1.jpg to serve, that is too low res for those screens. That is the image I originally mentioned because when I go to the page on my retina 27 inch 5k screen and inspect the element I do not want to see that file at 1100×619 because it is too low-res. When, and only, when I am viewing the site on my 5K retina screen I want to see another file in my media library named BE_Work_Meijer_mPerks_Img_1@2x That is the high res retina version (5120×2880) that I want served to large retina screens, or at least something bigger than 1100×619.

I cannot point you to that image because it is not getting served up (that is the problem) that image is only in my wordpress media library which only admins to my site have access to. I am not using it anywhere on the website because it is too big. The only time I want that image served is to large high res retina screens.

Best Regards,
Danny

• This reply was modified 7 years, 9 months ago by dannyecho.
• This reply was modified 7 years, 9 months ago by dannyecho.

Hello, Danny,

I think we are missing something here. The original dimensions of this image https://bravoechoinc.com/wp-content/uploads/2017/03/BE_Work_Meijer_mPerks_Img_1.jpg are indeed 1100×619 and not 5120×2880. I can confirm this by calling it like this https://bravoechoinc.com/wp-content/uploads/2017/03/BE_Work_Meijer_mPerks_Img_1.jpg?debug=original with the ?debug=original at the end which makes the plugin bypass the resizing mechanism and serve the original image size.

Are you sure you are pointing me to the correct image? ??

Cheers,
Takis

Hi there,

That is what I am trying to say; the image that is being served is the image that I have on the website a 1100×619 image. I want adaptive images to serve the larger version that is only in the media library of my wordpress. I cannot point you to that image because it is only in my media library. Can I get adaptive images to call the image out of my media library instead of the 1100×619 when it notices at retina device? Thanks for bearing with me here I am trying to be as clear as I can but I don’t understand the plugin as well as I could and that is why I am here.

-Danny

No problem, Danny, I also want to find out if there is a possible bug in the plugin.

Now, all I can say is that you need to use the original image somewhere in your content so that the plugin will be able to deliver it as it should. Otherwise it is impossible for WordPress and the plugin to handle it. Do you think you can put it in a test page, hidden from the public, so that I can take a look at it there?

Cheers,
Takis

Hello again Nevma,

Sorry I disappeared for a few days I got busy with some other work. So then are you saying that the high res image needs to be uploaded into the project page as well as the 1100×619 (original image) I think I am confused about how the plugin works when it comes to where to put my content, could you provide some clarity on that.

I originally thought the plugin would pull the high res image from my media library but it seems that is not the case. I could try to setup a a hidden test page so that we could take a look at it there, thank you again for your help.

Hello, Danny,

Let me try to break down how the plugin works for you.

For every image request that reaches your website, the Adaptive Images plugin tries to serve a resized version of that image, as close to the requesting device dimensions and depending on your plugin settings.

However the Adaptive Images plugin never chooses one thumbnail size over the other for you from your media library. Whatever thumbnail size you have chosen at each particular point, this thumbnail size will be resized anew and kept in a cache folder.

If you can provide a hidden test page, perhaps I could explain it to you a little more in detail.

Cheers,
Takis

Thank you Takis for that explanation, now that I know that I imagine it would be best to upload largest size images to my portfolio and let Adaptive size down the images as devices dictate.

• This reply was modified 7 years, 9 months ago by dannyecho.

You are welcome!

Send me the hidden test page to debug it any time.

Cheers,
Takis