Chrome Question

  • Resolved THP Studio

    (@thpstock)


    5 years ago

    Hey,

    Quick Q about the requirements for Retina images in different browsers.

    Using the example link provided (or any page on that site), loading it up in Safari and looking the code in the inspector, I can clearly see the @2x images being included in the srcset.

    However, loading it up on Chrome or Firefox, none of the @2x images are included.

    Looking at this page (https://developers.google.com/web/fundamentals/design-and-ux/responsive/images#enhance_imgs_with_srcset_for_high_dpi_devices) , if I’m understanding it correctly, it seems Chrome needs an additional attribute along the lines of “[email protected] 2x” with the additional “2x” included after the file name.

    When I compare this page in Safari on a Retina screen with Chrome on the same screen, I can see a visual difference between the images being displayed.

    Does this mean Chrome is not currently serving retina images, which I would assume is the case since i can’t see them included in the srcset and the code doesn’t have the additional attribute as documented in the Google help docs?

    Thanks

    • This topic was modified 5 years ago by THP Studio.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Jordy Meow

    (@tigroumeow)

    5 years ago

    Hi,

    I’m understanding it correctly, it seems Chrome needs an additional attribute along the lines of “[email protected] 2x” with the additional “2x” included after the file name.

    In fact, it doesn’t 🙂 And I actually use Chrome for my everyday dev. Moreover, they are using the same engine.

    However, depending on the device, the screen resolution and density, the @2x might not be used, and in the pixel density is really high, the browser might pick even a bigger image than the proposed @2x files.

    For you, the images on Chrome looks worse than on Safari? Based on what I said, in all cases, it should look fine. If it doesn’t, indeed, something is off.

    I actually checked your page, and should have done that before: Chrome supports WebP, and in your case, WebP images are used instead of the Retina files. And for some reason, those WebP images aren’t in a good enough quality. Which plugin are you using for this?

    Thread Starter THP Studio

    (@thpstock)

    5 years ago

    Hey thanks for the response and clarifying that for me.

    So, to make sure I understand, when webp are present, retina images won’t be displayed, webp will be?

    Shortpixel are creating the webp and litespeed are serving them

    Plugin Author Jordy Meow

    (@tigroumeow)

    5 years ago

    It’s a bit weird but it seems like it’s what happening; or maybe ShortPixel is not well optimized for SRC-SET usage? Ideally, it would let the browser picks the most adequate image, and then ShortPixel would propose an alternative to that image (the WebP).

    In Perfect Images, I have added optimization through EasyIO, WebP are delivered this way actually (and through a CDN). So I am not sure why they wouldn’t be able to support it. You could give a try to EasyIO too 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Chrome Question’ is closed to new replies.