- This topic is empty.
August 1, 2019 at 3:00 pm #293722
Not sure what I’m doing wrong, first I created the extra size for 1x version of the images, then regenerated the thumbnails, and tested that by separated they load the correct image size, but I can’t get to work with both.
Right now it only displays the 1x version in my computer (which is retina type). Here’s the template code and the rendered code.
https://codepen.io/Snippet/pen/JgyWbbAugust 1, 2019 at 3:42 pm #293738
It’s kind of hard to grok with all the PHP in there, but you’ll need width and height attributes. I’ll ask the obvious question which is is the 2x image actually retina?August 1, 2019 at 3:57 pm #293740
In the local WordPress installation they are set with object-fit, added that css to the codepen as well.
“which is is the 2x image actually retina”
It is the second one; which is called with the “medium” wordpress image size 650×650: http://localhost/tomastestart/wp-content/uploads/2019/06/WhatsApp-Image-2019-06-25-at-11.49.21-PM-4-459×650.jpeg
And the 1x retina is this one with 230x325px: http://localhost/otzerling/wp-content/uploads/2019/06/WhatsApp-Image-2019-06-25-at-11.49.21-PM-4-230×325.jpeg
Update: there was a missing line in the codepen in the rendered part, it got lost when I trying to post the code here in the forum…August 1, 2019 at 4:29 pm #293748
We won’t be able to follow those links because your localhost server is local.
Ideally your 1x image dimensions will match the dimensions of your img tag. Your 2x image would be exactly twice that.August 1, 2019 at 4:48 pm #293750
Yes except that there is a hover zoom effect thats why i added a bit more. Maybe I can use a less visited part of the website to test it..August 1, 2019 at 5:32 pm #293751
Okey it seems it’s an issue on the detection of retina implementation and not in the code. Check out this https://codepen.io/bseymour/pen/EjaNyj Is pretty much the same, and I’m still getting the 1x version, which means that my computer is not recognized as retina 2x, if flip 1x and 2x versions I get the 2x. So the question is why this happens and what can I do to fix it, I don’t want some computers like mine with crappy experience over this.August 1, 2019 at 6:20 pm #293752
If you don’t have a retina display you don’t get a retina image – that’s how it works.
Most smartphones and tablets are retina. Most desktop monitors aren’t. Some laptops are.
If you don’t want a “crappy” experience, get a retina monitor.August 1, 2019 at 6:27 pm #293753
It’s not about me but about other users, so in your logic I should put a message that tells all desktop computers with large screens to buy a retina monitor if the images look bad? Instead I have been reading the topic and is much more complex https://medium.com/hceverything/applying-srcset-choosing-the-right-sizes-for-responsive-images-at-different-breakpoints-a0433450a4a3August 1, 2019 at 7:11 pm #293754
In case it helps someone else https://css-tricks.com/responsive-images-css/#article-header-id-2August 1, 2019 at 8:58 pm #293758
I don’t understand what you’re asking for here. How are your images looking “bad”? The only one I’ve seen so far is the butterfly one and it seems fine.
You can’t make a non-retina monitor show an image at higher resolution than the monitor can support.August 1, 2019 at 9:12 pm #293759
“How are your images looking “bad”? The only one I’ve seen so far is the butterfly one and it seems fine.”
That’s what doesn’t make sense to me either.
1. This is how to it looks with retina size 650px
2. Now the non-retina image size
https://drive.google.com/open?id=13SjBmkRjFUtuq7KHvYaKRMqRJ736lrwNAugust 1, 2019 at 9:18 pm #293760
Okay, now we’re getting somewhere. Your issue isn’t with which image you’re showing at all, rather how your images are generated in the first place.
What are you doing to re-size your images? Are you optimising them somehow?August 2, 2019 at 1:11 pm #293817
I generated them with wordpress and with “regenerated thumbnails” plugin, I have set the “medium size” to 650x of height, and added to functions the size “medium1xretina”. They are optimized with Tinypng/jpg plugin but not resized with it.August 4, 2019 at 3:36 pm #293860
It might be worth tinkering with different optimisation options then.August 4, 2019 at 5:08 pm #293861
“It might be worth tinkering with different optimisation options then.”
Turns out I used all the free optimizations with Tinypng so now the images uploaded recently haven’t been modified by it.
Anyways I uploaded/replicated the changes so it’s live here: https://www.otzerling.com/index#actividades-todo
- You must be logged in to reply to this topic.