Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #293722
    snippet248
    Participant

    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

    #293738
    uxfed
    Participant

    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?

    #293740
    snippet248
    Participant

    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…

    #293748
    uxfed
    Participant

    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.

    #293750
    snippet248
    Participant

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

    #293751
    snippet248
    Participant

    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.

    #293752
    uxfed
    Participant

    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.

    #293753
    snippet248
    Participant

    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

    #293754
    snippet248
    Participant
    #293758
    uxfed
    Participant

    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.

    #293759
    snippet248
    Participant

    “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

    #293760
    uxfed
    Participant

    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?

    #293817
    snippet248
    Participant

    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.

    #293860
    uxfed
    Participant

    It might be worth tinkering with different optimisation options then.

    #293861
    snippet248
    Participant

    “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

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘Back End’ is closed to new topics and replies.