[Support request] picture sizes

[Melissa]

I’m having a really hard time figuring out how my site is determining which photo sizes to use.

For example, on this page — https://theslowroad.org/back-to-the-middle-ages/ — on a full-width screen,
the first image (town on a hill) should be using the “wide” 1300px retina version, the second image (castle) should be using the “full-column” 806 px retina version, the third picture (flower on building) should be using the “medium” 393x590px retina version.

Instead, on my 1486px Macbook screen, the first image seems to use the 856 px retina version, the second image (castle) uses the 1300 px non-retina version, the third picture (flower on building) is using the 650×975 px non-retina version.

The retina 2x plugins say that all the sizes exist.

I’m so confused that I feel like I’m losing my mind. Please help!

[Tom]

Hi there,

How are you trying to define which images show at specific widths?

WordPress by default uses srcset to display different images sizes at different widths. You can see it in the HTML if you right click the image and “Inspect”.

I believe those values can change, but it needs to be done via filter:
https://martinwolf.org/before-2018/blog/2016/02/how-to-edit-srcset-attribute-in-wordpress-responsive-images/

[Melissa]

I’m not trying to do anything unusual. I just use Gutenberg image block to say “medium” or “full column” and expect it to use the closest available file size (preferably retina).

I have no idea why srcset isn’t doing that? Can you see the problem on the page?

[Tom]

I’m not noticing any visible issues, but I’m on a smaller MacBook at the moment.

Your images have a lot of srcset values (including retina), so it should be up to your browser to use the appropriate image size depending on the screen – all of the images exist and are listed.

[Melissa]

Is the order of the items in the srcset important? I’m still trying to figure out why it isn’t using retina versions despite them being available.

[Melissa]

Looking at the clock image on this page
https://theslowroad.org/weaving-our-way-through-lyon/

the following screenshot shows the html and the srcset and the file being used

https://theslowroad.org/wp-content/uploads/2019/07/Screen-Shot-2019-07-12-at-10.50.57-PM.png

It says:
392×590 pixels (intrinsic 650 x 975 pixels)
currentSrc: … 650×975.jpg

My initial file was 1733×2600. WordPress made the image size “medium” 590×590 not cropped, and Retina2x made the equivalent size. I used the size “medium” in my Gutenberg image block. So where is it getting 650×975? Why isn’t it using 393×590@2x ?

Sorry for all the confusion. I hope you can help.

[Tom]

I’m afraid this is a little outside of my expertise, unfortunately. You’d need to read up more about srcset: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

I don’t believe the order makes a difference, as different sizes are defined for different screen widths.

I’m sorry I can’t be more helpful!

[Melissa]

Do you have any idea of anything in GeneratePress that could be making the “intrinsic” image size listed by Chrome much smaller than the uploaded file?

[Tom]

When you’re inserting the image, are you choosing the size? For example, maybe it’s set to Medium?

[Author]

Posts