[Resolved] Uploaded Images

[Tom]

Retina typically wants the image to be 2x the size, so twice as many pixels are used when you size down.

[Janine]

So if I resize all my images to 2x width of my content area, will the visitor’s browser will automatically know which size to load for the size of the device or display they are using?

Or do you think it makes sense to resize all my images to, say 1700px, to cover my bases?

Thank you!

[Tom]

Yes, I believe WordPress will still display the smaller images on smaller screens. I can confirm that for you once you add the images if you link me to an example page 🙂

[Janine]

Hi, Tom.

Thanks for the offer and I will take you up on that. BUT…

I’m stuck.

I simply cannot decide what dimensions to resize my images.

Currently, my site is set to the following:

Single Post
**featured image: 750px
**content area: 670px

Page
**featured image: 800px
**content area: 720px

I would like to accommodate visitors with retina displays.

I understand the rather simplified concept that retina displays are 2x more pixel dense.

But just serving up an image that is double in size of the area in which it fills sounds like it would interfere big time with site speed.

And from what I can tell the #1 thing you can do with images is resize them to the appropriate dimensions of the space that they will fill.

My ultimate goal is this: I definitely don’t want to eat up the data bandwidth of my visitors on mobile devices or offer a slow as molasses experience because they are downloading a larger file than they need for the device they are on. I know how much I hate that myself.

Plus, I want to avoid having to upload thousands of larger files in the future, because everybody now has retina displays.

I have Googled and Googled and Googled and YouTubed and YouTubed and while this technology is not exactly brand new, I am unable to find any advice that a non-developer, such as myself, can make sense of and actually use.

Tom, what’s the dope? How would you proceed?

Link to my demo site: http://e0b0c60d.ngrok.io/

Thank you!

[Tom]

Personally I just go with having the image slightly larger than the content area.

Retina is important for things like small logos etc.. but I would argue that the difference when it comes to large images isn’t huge. Site speed over slightly better looking images 🙂

[Janine]

Thank you, Tom.

Issue settled! I’ll send you a link once I upload my images.

Thanks, again!

[Janine]

Tom, I also visited my local Best Buy and looked at a website that did not have images optimized for retina on retina devices of various sizes.

And also did not see a worthwhile difference. But I just had to be sure.

[Tom]

No worries! Glad I could help 🙂

[Janine]

Hi, Tom.

RE: #500793

My site is live, so if you wouldn’t mind checking what sizes my images display on mobile or smaller screens.

https://stitchingincolour.com/

Thank you!

[Tom]

Ahh, responsive images are turned off right now when infinite scroll is turned on. That’s a current workaround for a bug we were experiencing.

It’s fixed in GPP 1.6, which is currently available for beta testing: https://docs.generatepress.com/article/beta-testing/

[Janine]

Hi, Tom.

So let see if I understand when I enable Infinite Scrolling in Layout > Blog, it turns off responsive images?

So if I turn off Infinite Scrolling, it should make my images responsive on smaller devices?

Thank you!

[Janine]

Hi, Tom.

If I choose to update with beta testing, what do you want me to keep an eye out for? Thank you!

[Tom]

That’s correct – srcset (responsive images) were causing a bug with infinite scroll, so we turned them off while infinite scroll was activated until we figured it out. It’s figured out in 1.6.

There’s nothing specific to look out for in 1.6, just let me know if you notice any weirdness 🙂

[Janine]

Hi, Tom.

I added the code to my gp-child theme’s function.php. Can you now check and see if images are responsive on my site:

https://stitchingincolour.com/

Also, when 1.6 final is released, I assume I will need to remove this code, right?

Thank, Tom.

[Leo]

Yup the images are responsive to me.

The beta code? No you won’t have to remove it.

[Author]

Posts