4

I have the 2 new added sized that I am testing:

// testing
add_image_size('new-small', 500, false);
add_image_size('medium-large', 768, false); // just added today for devices support

image outputted html:

<img class="alignnone size-full wp-image-24" src="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg" alt="test-image" width="932" height="524" srcset="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-500x281.jpg 500w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-768x432.jpg 768w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg 932w" sizes="(max-width: 932px) 100vw, 932px">

I'm watching the network tab in chrome, and when I reload the browser at say 500x900 (width height), it loads the correct image at first, then immidiately loads the natural image after: enter image description here

Has anyone run into that or know how to fix it?

Improve this question
3
  • I have sort of same issue. I haven't added any custom sizes - trying to get it work out of the box first - and can't get it to work. In the inspector I can see it loads 4 sizes, but no matter how I resize the browser window it always sets currentSrc as the largest image. I don't get it. Do I have to add some extra styles, code etc.? – Borek Jan 20 '16 at 10:06
  • what localhost are you using? I'm using Wamp Server on Win10. Maybe that's an issue? Maybe we need to enable some extra Apache modules? – Borek Jan 20 '16 at 11:35
  • How are you getting the image. Are you using wp_get_attachment_image_src( $attachment_id, 'medium-large'); ? – Kivylius Jan 20 '16 at 12:09
6
+50

This is more of a general srcset and browser question, not a WordPress specific question.

However, in general, you can't predict what browsers will do with the srcset information. For your specific example, it appears that you failed to clear the cache completely between your reloads. Note the 304 response indicating that your browser already has the image cached (304 is the Not Modified response).

In such a situation, it's perfectly reasonable for a browser to simply use the largest image that it already has in the cache. You've already got the higher quality version, might as well use it. Using a lower quality image here won't save you any network bandwidth, which is kind of the whole point of srcset to begin with. Chrome's algorithm is not simply "use the image size that fits".

So, in order to really test, you have to clear cache and reload. Every time.

Some background information on how different browsers use srcset's: https://stackoverflow.com/questions/28683635/is-there-something-wrong-with-my-srcset-definition-or-is-current-browser-suppor

Edit: As Mark Kaplun points out in the comments, it's entirely feasible for a browser to choose a larger image based on the connection speed. Chrome, for example, will always choose the largest image if it knows that the image is on the local filesystem (like you're viewing a local .html file). It may also know about "localhost" and choose the large image then too. You don't get to force the issue, you can't peek behind the curtain. Not really. The goal of srcset is to give browsers the information to allow them to choose the image. Not for you to be able to decide for them which image is used in which circumstances.

Improve this answer
4
  • 2
    +1, The whole point of srcset is to let the browser decide and nowhere in the standard it is specified how the decision should be made. In theory a browser might select a lower quality image if it detects a slow network. – Mark Kaplun Jan 20 '16 at 20:07
  • @Otto The problem here is that it does not work in ANY browser. And as far as connection speed goes (a Mark stated) this is not a factor on localhost. I have actually removed almost all code from funcions.php file to see if anything messes with the responsiveness and it still does not work. – Borek Jan 21 '16 at 10:46
  • The responsive images does not have nor need any extra code necessary to support it. This is not some kind of javascript trick. You're misunderstanding the nature of the goal here. The point of responsive images is to give more information to the browser, in the form of identical but differently sized images. The browser then decides which one to choose. You cannot force it somehow. There's no extra code you need to add, and nothing you need to do. The browser chooses. It chooses based on whatever it chooses based on. Use a mobile browser to test and you'll see the real difference. – Otto Jan 21 '16 at 20:21
  • For example, if a browser decides that it wants to use the big image specifically because you're on "localhost" and it knows the connection speed is thus irrelevant, then it might use the big image anyway. You don't get to see the magic in action, it just happens. That's the whole point, to make which image is used actually irrelevant to the design process, but relevant only to the render process. – Otto Jan 21 '16 at 20:23

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.