Can't get retina ready for custom field image..

[snippet248]

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/JgyWbb

[uxfed]

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?

[snippet248]

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…

[uxfed]

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.

[snippet248]

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..

[snippet248]

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.

[uxfed]

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.

[snippet248]

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-a0433450a4a3

[snippet248]

In case it helps someone else https://css-tricks.com/responsive-images-css/#article-header-id-2

[uxfed]

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.

[snippet248]

“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
https://drive.google.com/open?id=1fu0UcFWsfkJ_FenjelmX7kL1kkMgtW8b
2. Now the non-retina image size
https://drive.google.com/open?id=13SjBmkRjFUtuq7KHvYaKRMqRJ736lrwN

[uxfed]

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?

[snippet248]

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.

[uxfed]

It might be worth tinkering with different optimisation options then.

[snippet248]

“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

[Author]

Posts