- This topic has 8 replies, 2 voices, and was last updated 1 year, 2 months ago by Tom.
July 11, 2019 at 7:05 pm #955475Melissa
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!July 12, 2019 at 9:15 am #956051TomLead DeveloperLead Developer
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/July 12, 2019 at 10:39 am #956141Melissa
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?July 12, 2019 at 3:22 pm #956326TomLead DeveloperLead Developer
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.July 12, 2019 at 7:27 pm #956417Melissa
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.July 12, 2019 at 8:02 pm #956434Melissa
Looking at the clock image on this page
the following screenshot shows the html and the srcset and the file being used
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.July 13, 2019 at 8:00 am #956875TomLead DeveloperLead Developer
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!July 13, 2019 at 7:01 pm #957160Melissa
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?July 14, 2019 at 9:34 am #957602TomLead DeveloperLead Developer
- You must be logged in to reply to this topic.