0

I have an extremely frustrating problem where mobile (tested chrome on android & ios, and safari on ios) is always using the largest sized image from the srcset (even if a smaller size is EXPLICITLY chosen in the editor).

Here is a summary of the problem:

  • In Wordpress editor, when inserting an image, I choose LARGE (720px x 480px) as the image size
  • On a mobile device, the full size image from the srcset is being downloaded and shown on the frontend every time

So the problem is two-fold:

  1. Firstly that the full image is somehow being used DESPITE actively selecting the large size (why should this be possible?)
  2. Secondly that chrome is not respecting the src set anyway and is downloading the full sized image

This is problematic because I purposefully generate many different image sizes as the original images for this blog are often quite large, often a couple of megabytes. So I have a post with 30 images, each with an elaborate srcset, and yet Chrome on Android is downloading the 1.5Mb version for every one (that's 45Mbs on mobile, even though there are images sizes and a srcset -- and a lightbox and lazy-loading which I've disabled for testing -- for this exact reason).

The image below is a screenshot from Chrome inspector using remote USB debugging (so this is actually from a phone, not browser simulation). You can see the image's actual SRC attribute is the correct, smaller version of the image (notice the '-720x480'):

http://media.londolozi.com/wp-content/uploads/2017/08/10130833/DSC_3855-720x480.jpg

enter image description here

However, Chrome on Android has in fact downloaded and is serving the full image. I know this because:

  1. Images in network tab show status of 200 (not from cache), and are the full sized images

enter image description here

  1. The image (and post) takes a while to load (I can see the images downloading progressively)
  2. Pressing and holding to download the image on the phone saves the full image
  3. Pressing and opening the image in a new tab opens the full size image

Some other things:

  • It is correctly only downloading the smaller image on desktop (firefox & chrome)
  • On every test I fully clear the cache
  • The problem still occurs if LINK TO is set to NONE (to rule out the parent a tag's href interfering)
  • The device width is 420px
  • You can see that the 'large' image size has been selected in the Wordpress editor by the 'size-large' class on the image, so the full size should not be downloaded at all
  • I have tested this on another wp site and same issue... selecting image size has no effect on chrome android
  • You can see it yourself in action here: blog.londolozi.com/2017/08/04/the-week-in-pictures-295/

So I don't know how to explain this behaviour.

Am I correct in asserting that if I explicitly set a size when inserting an image into a post, that the image downloaded by the browser should not be larger than that size, no matter what? Or else setting a size is redundant.

Any ideas why this is happening?

bumped to the homepage by Community 18 hours ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

  • This is probably (99.9999%) not a WordPress issue, rather a Chrome one, something related to it's CSS and/or image heuristics. Therefore: 1) maybe you search for help in other Stackexchange network site – Celso Bessa Oct 15 '17 at 21:46
  • browser behaviour is off-topic, especially srcset which is defined in the standard as "each browser can do what it wants" – Mark Kaplun Oct 16 '17 at 2:01
0

I messed up with my comment and can't edit it. So, I writing as an answer instead:

This is probably (99.99%) not a WordPress issue, rather a Chrome one, something related to it's CSS and/or image heuristics. Therefore:

  1. Maybe you will have better luck looking for help in other Stackexchange network site
  2. Maybe your pageload time and CSS rules makes Chrome algorithm/heuristics to prioritize the full image and you should tweak your CSS and speed things up
  3. Try using the thumbnail, small or medium size images in src, decreasing changes of chrome using full sizes on mobile/tablets because the default one will be small. And increasing the changes of Chrome using full images it finds in srcset only when the user is on larger screens.

Let me know if it helps you.

0

browsers take

pixel ratio

into account when choosing which image to download, you should check that your pixel ratio is 1 before trying to resize browser and understand the logic

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.