- This topic has 39 replies, 5 voices, and was last updated 2 years, 11 months ago by David.
February 19, 2018 at 10:04 am #500397TomLead DeveloperLead DeveloperFebruary 19, 2018 at 10:28 am #500426Janine
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!February 19, 2018 at 9:33 pm #500793TomLead DeveloperLead Developer
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 🙂February 21, 2018 at 7:19 pm #502450Janine
Thanks for the offer and I will take you up on that. BUT…
I simply cannot decide what dimensions to resize my images.
Currently, my site is set to the following:
**featured image: 750px
**content area: 670px
**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!February 21, 2018 at 8:54 pm #502489TomLead DeveloperLead Developer
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 🙂February 22, 2018 at 4:17 am #502692Janine
Thank you, Tom.
Issue settled! I’ll send you a link once I upload my images.
Thanks, again!February 22, 2018 at 4:25 am #502695Janine
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.February 22, 2018 at 11:36 am #503098TomLead DeveloperLead DeveloperMarch 6, 2018 at 4:36 pm #513387Janine
My site is live, so if you wouldn’t mind checking what sizes my images display on mobile or smaller screens.
Thank you!March 6, 2018 at 9:05 pm #513529TomLead DeveloperLead Developer
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/March 7, 2018 at 3:27 am #513730Janine
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!March 7, 2018 at 3:37 am #513737Janine
If I choose to update with beta testing, what do you want me to keep an eye out for? Thank you!March 7, 2018 at 10:28 am #514100TomLead DeveloperLead Developer
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 🙂March 7, 2018 at 4:43 pm #514287Janine
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:
Also, when 1.6 final is released, I assume I will need to remove this code, right?
Thank, Tom.March 7, 2018 at 8:12 pm #514344
- You must be logged in to reply to this topic.