Skip to main content
WordPress Development

Return to Question

Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Commonmark migration
Source Link
Community Bot
Community Bot
  • 1

I have been trying to get SRCSET to load in images for different device sizes.

My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size.

I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes:

[![WP generated SRCSET URLs][1]][1]WP generated SRCSET URLs

This is great! The issue is, I haven’t been able to produce, on any device, proof that the browser is loading anything other than the original (large) image. In other words, that anything is happening with the other, mobile optimized sizes. If I open or save the image in question it’s always the original one. The smaller sizes of image appear not to be utilized at all.

So: is there a Javascript component, or otherwise some kind of configuration setup I’m missing? Something to hook into in WordPress? I’m using a custom theme but notice the same using TwentyFifteen. Is there something I need to register in the functions file? I’m writing this after a lot of research and am still totally stumped what step I’m missing. [1]: https://i.sstatic.net/YR0Rk.png

I have been trying to get SRCSET to load in images for different device sizes.

My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size.

I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes:

[![WP generated SRCSET URLs][1]][1]

This is great! The issue is, I haven’t been able to produce, on any device, proof that the browser is loading anything other than the original (large) image. In other words, that anything is happening with the other, mobile optimized sizes. If I open or save the image in question it’s always the original one. The smaller sizes of image appear not to be utilized at all.

So: is there a Javascript component, or otherwise some kind of configuration setup I’m missing? Something to hook into in WordPress? I’m using a custom theme but notice the same using TwentyFifteen. Is there something I need to register in the functions file? I’m writing this after a lot of research and am still totally stumped what step I’m missing. [1]: https://i.sstatic.net/YR0Rk.png

I have been trying to get SRCSET to load in images for different device sizes.

My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size.

I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes:

WP generated SRCSET URLs

This is great! The issue is, I haven’t been able to produce, on any device, proof that the browser is loading anything other than the original (large) image. In other words, that anything is happening with the other, mobile optimized sizes. If I open or save the image in question it’s always the original one. The smaller sizes of image appear not to be utilized at all.

So: is there a Javascript component, or otherwise some kind of configuration setup I’m missing? Something to hook into in WordPress? I’m using a custom theme but notice the same using TwentyFifteen. Is there something I need to register in the functions file? I’m writing this after a lot of research and am still totally stumped what step I’m missing.

broken image fixed (click 'rendered output' or 'side-by-side' to see the difference); for more info, see https://gist.github.com/Glorfindel83/9d954d34385d2ac2597bbe864466259f
Source Link
edit approved Jun 5, 2019 at 22:08
Glorfindel
edit approved Jun 5, 2019 at 22:08
Glorfindel
  • 605
  • 3
  • 10
  • 18

I have been trying to get SRCSET to load in images for different device sizes.

My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size.

I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes:

WP generated SRCSET URLs http://oi67.tinypic.com/2ccv8n4.jpg [![WP generated SRCSET URLs][1]][1]

  

This is great! The issue is, I haven’t been able to produce, on any device, proof that the browser is loading anything other than the original (large) image. In other words, that anything is happening with the other, mobile optimized sizes. If I open or save the image in question it’s always the original one. The smaller sizes of image appear not to be utilized at all.

So: is there a Javascript component, or otherwise some kind of configuration setup I’m missing? Something to hook into in WordPress? I’m using a custom theme but notice the same using TwentyFifteen. Is there something I need to register in the functions file? I’m writing this after a lot of research and am still totally stumped what step I’m missing. [1]: https://i.sstatic.net/YR0Rk.png

I have been trying to get SRCSET to load in images for different device sizes.

My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size.

I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes:

WP generated SRCSET URLs http://oi67.tinypic.com/2ccv8n4.jpg

 

This is great! The issue is, I haven’t been able to produce, on any device, proof that the browser is loading anything other than the original (large) image. In other words, that anything is happening with the other, mobile optimized sizes. If I open or save the image in question it’s always the original one. The smaller sizes of image appear not to be utilized at all.

So: is there a Javascript component, or otherwise some kind of configuration setup I’m missing? Something to hook into in WordPress? I’m using a custom theme but notice the same using TwentyFifteen. Is there something I need to register in the functions file? I’m writing this after a lot of research and am still totally stumped what step I’m missing.

I have been trying to get SRCSET to load in images for different device sizes.

My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size.

I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes:

[![WP generated SRCSET URLs][1]][1]

 

This is great! The issue is, I haven’t been able to produce, on any device, proof that the browser is loading anything other than the original (large) image. In other words, that anything is happening with the other, mobile optimized sizes. If I open or save the image in question it’s always the original one. The smaller sizes of image appear not to be utilized at all.

So: is there a Javascript component, or otherwise some kind of configuration setup I’m missing? Something to hook into in WordPress? I’m using a custom theme but notice the same using TwentyFifteen. Is there something I need to register in the functions file? I’m writing this after a lot of research and am still totally stumped what step I’m missing. [1]: https://i.sstatic.net/YR0Rk.png

Source Link
TwoLunch
TwoLunch
  • 11
  • 1

Using SRCSET with Images and Featured Images

I have been trying to get SRCSET to load in images for different device sizes.

My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size.

I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes:

WP generated SRCSET URLs http://oi67.tinypic.com/2ccv8n4.jpg

This is great! The issue is, I haven’t been able to produce, on any device, proof that the browser is loading anything other than the original (large) image. In other words, that anything is happening with the other, mobile optimized sizes. If I open or save the image in question it’s always the original one. The smaller sizes of image appear not to be utilized at all.

So: is there a Javascript component, or otherwise some kind of configuration setup I’m missing? Something to hook into in WordPress? I’m using a custom theme but notice the same using TwentyFifteen. Is there something I need to register in the functions file? I’m writing this after a lot of research and am still totally stumped what step I’m missing.