Srcset Not Downloading Resized Image

How To
1

I have set up an image to display at Medium Large size. For some reason the browser is loading its full sized version.

Here is the output HTML:


<img width="768" height="1153" src="https://roth.lonzo.dev/wp-content/uploads/Gz_Techelsberg_1-768x1153.jpg" class="css-filter size-medium_large" alt="" decoding="async" fetchpriority="high" srcset="https://roth.lonzo.dev/wp-content/uploads/Gz_Techelsberg_1-768x1153.jpg 768w, https://roth.lonzo.dev/wp-content/uploads/Gz_Techelsberg_1-200x300.jpg 200w, https://roth.lonzo.dev/wp-content/uploads/Gz_Techelsberg_1-682x1024.jpg 682w, https://roth.lonzo.dev/wp-content/uploads/Gz_Techelsberg_1.jpg 799w" sizes="(max-width: 768px) 100vw, 768px">

Here are some screenshots of the image setup on the editor and the Network tab.

image setup on the edito
image setup on the edito738×984 51.9 KB

Network tab
Network tab2708×796 201 KB

2

For me it loads correct version, look:

image
image751×83 11.4 KB

I am not sure, why in your case it’s showing something different, but here is my teory:

Browser loads the best size of the image based on srcset. But if it already loaded (and possibly cached) the bigger version, it always serves the biggest version even for smaller devices.
Or maybe you fixed it meantime :smiley: