0

I've been trying to understand how WordPress picks images to use depending on the size of the user screen, but I've been unable to figure it out.

Is it just by checking if the request is coming from a mobile or desktop device? I have a photo site that would like to cater to 4k screens, so I have a featured images of 2400px * 1120px.

I know a version that has a width of 1536px is generated. On my mac, my the featured image is displayed as 1425px * 665px (1425px is the full width of my browser window). Why doesn't WordPress use the 1536px width image that was automatically generated instead of the 2400px width original?

3
  • Are you sure it was WordPress that decided this? There are image sizes yes, and those are chosen by the user, not WP, but there is also responsive images, in which case the browser is offered a selection and the browser decides based on local considerations. To answer the question, I'd need to know more about the context of this image, as well as the markup, etc. Also what's the native resolution of your panel? Are those 1425 logic pixels or physical pixels? Is it a high DPI panel?
    – Tom J Nowell
    Jul 29 '20 at 17:31
  • @TomJNowell I have a mac with retina display. I'm just wondering now maybe that is the reason why the large image is being used. Because although hovering over the element in dev tools tells me the width is 1425px, the display actually requires 1425*2 pixels in width (the native resolution is 2560 x 1600)...?
    – OctaviaLo
    Jul 29 '20 at 17:56
  • @TomJNowell Yep that was it. I discovered I can use chrome dev tools to simulate an MDPI screen and it did use the 1536px width image. Thanks for pointing me in the right direction :)
    – OctaviaLo
    Jul 29 '20 at 18:05
1

It doesn't, WP supports responsive image markup, so your browser decides based on various factors such as pixel density, battery, network, viewport, etc

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.