img-Tag is not replaced

  • torbent

    (@torbentschechnegmailcom)


    8 years, 4 months ago

    Hello,
    I just installed WPRetina 2x on one of my websites. My WP Settings are that the medium size has a width of 620px and the large file is 1240 px width. I did always upload the images in 620px width because my content is 620px width.

    I know uploaded an image with 1240px and activated WP Retina 2x. Then I went into the Plugins Settings screen and clicked on “Generate” for this particular image.

    I now can see this: https://d.pr/i/WpbL

    But on the frontend, when I reload the page I do not see a difference in the code inspector. In the content column of 620px the 1240px image is served – on my Thunderbolt Display, which is not a Retina display. Also there is no src-Tag.

    What am I doing wrong?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter torbent

    (@torbentschechnegmailcom)

    Update: I think it did not work because the file name had some strange characters like %20 etc, but I am wondering that it shows me in Chrome the currentSrc is the image which has a @2x – so it takes the Retina image? Or is this a bug in Chrome?

    Within my developer console, it also shows me that the @2x image has been loaded, but on a Thunderbolt display it should load the smaller image: https://d.pr/i/Q9rL

    • This reply was modified 8 years, 4 months ago by torbent.
    Thread Starter torbent

    (@torbentschechnegmailcom)

    Hey Jordy,
    do you have a comment on my last post? That would be nice. Thanks

    2x is loaded on a Thunderbolt Display which is non-retina?!
    https://d.pr/i/pr2Y

    and it shows me that 2x is loaded, but the image is displayed in the 1x resolution.

    https://d.pr/i/5yUg

    • This reply was modified 8 years, 4 months ago by torbent.
    • This reply was modified 8 years, 4 months ago by torbent.
    Plugin Author Jordy Meow

    (@tigroumeow)

    Hi,

    Sorry for the late replies, I am very busy with the support for the Pro users and I can’t help everyone with questions unfortunately ??

    I am not sure if you still have an issue with getting the plugin to work actually, it looks like it does because Retina is loading?

    I suggest you to check my website, visit the Tutorial and the Debug section. Following the Debug question would help a lot.

    %20 means your filename has a space in it, simply avoid this, it’s not good as it might be confusing for many systems, for SEO or if you move your install. Normally, when you upload images to WP, those spaces are converted into hyphens.

    About the retina images being displayed in on your Thunderbolt display, it would be interesting to know the pixel density of your display. There is no Retina and non-Retina screen, all screens have a different pixel density and depending on it the browser your are using makes the choice of using a @2x image or not. Actually, the plugin doesn’t make this choice ??

    Thread Starter torbent

    (@torbentschechnegmailcom)

    Hey Jordy,
    totally understandable that the Pro Users are getting premium support ??

    The Thunderbolt Display has a resolution of 2560x1440px.

    For example: I have a 13 inch MacBook from 2011 with a resolution of 1280×800. When I debug this one with Google Chrome Developer console I can see the screenshot above. So the image is 620px width on the page, the original is 1240px width and as “currentSrc” it shows me the larger image.

    My assumption was:
    – MacBook Pro 2011 – 1280x800px – It takes the picture in its width of 620px.
    – MacBook Pro 2015 Retina – 2560x1600px – It takes the picture in the size of 1240px to show it sharply.

    So I am wondering why it takes the larger image in both cases, even when the image is set to a width of 620px.

    Plugin Author Jordy Meow

    (@tigroumeow)

    Hi @torbentschechnegmailcom,

    Actually, I can’t reply accurately on this. The way src-set works is a mystery that depends on the browser your are using. Also, there might be information about it on the PictureFill script page: https://scottjehl.github.io/picturefill/. I am a bit busy at the moment to look into how it works on the client-side of things, but that would be interesting to know if you get your answer ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘img-Tag is not replaced’ is closed to new replies.