Grow your CSS skills. Land your dream job.

Responsive Images: HiSRC

  • # July 16, 2013 at 3:30 am

    Hi,

    I’m trying out HiSRC as a responsive images solution but it doesn’t seem to work. The speed test doesn’t detect when I’m on 3g.
    When I test on my iphone 4s, I get the x1 image on 3g and the x2 on wifi. But never the mobile version. The TEST.html in the TEST folder always shows the high resolution version, on 3g and wifi.

    Anyone knows what’s going on?

    # July 16, 2013 at 4:47 am

    Do you have a link or example code?

    How are you detecting 3g / Wifi?

    # July 16, 2013 at 4:56 am

    I’m using the demo.html that comes with the code: https://github.com/teleject/hisrc
    I didn’t change anything.

    # July 16, 2013 at 4:58 am

    Then perhaps a link so we could test it for ourselves?

    As you will appreciate, we cannot debug what we can’t see.

    # July 16, 2013 at 5:03 am

    Sorry, didn’t think it was necessary as I’m using the default code, but here you go: http://sirzwoep.be/tests/hisrc2/DEMO.html

    # July 16, 2013 at 5:05 am

    I know bandwidth detection is hard and unreliable but a working test for 3g or wifi would be nice. 3g: low res, wifi: high res. People on slow wifi would still get the high res image, but that’s ok.

    # July 16, 2013 at 5:15 am

    Something is wrong, I think.

    There is only one image in the HTML and you have two bg images.

    That doesn’t seem to follow this: https://github.com/teleject/hisrc#setting-up

    Perhaps I am missing something though.

    # July 16, 2013 at 5:24 am

    I haven’t changed anything in the code.

    On my iphone 4s on 3g I sometimes get the x1 and sometimes the x2 but never the mobile-first image: http://sirzwoep.be/tests/hisrc2/TEST/halloween-mobile-1st.png

    # July 16, 2013 at 5:38 am

    With this implementation:

    data-1x=”TEST/halloween-x1.png”
    data-2x=”TEST/halloween-x2.jpg”
    alt=”Celebrating Halloween in style” />

    I’m pretty sure the mobile first will always get downloaded, because JS can only change the `src` after it’s parsed and as soon as it’s parsed it gets downloaded. Just saying in case you want to reconsider your options, as this results in an extra image being downloaded for nothing when you just want the x1 or x2 versions.

    Another thing, if I’m on mobile and I’m on 3G I would still want high resolution images. But maybe that’s just me :P

    # July 16, 2013 at 5:59 am

    Yeah, the more I read about it the more I think I should stick to picturefill.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".