Hacker News new | comments | show | ask | jobs | submit login

Recently learnt in more depth around this, and did a really fun project to automate this in an ASP.net control.

Input is:

    <Controls:ResponsiveImageFixedSize runat="server"
        Alt="Logo"
        ImagePath="/global/construct-3-logo.png"
        Width="43"
        DisableLazyLoading="True"
    />	
Renders as:

    <img width="43" height="44" srcset="https://s2.construct.net/images/v173/r/global/construct-3-logo_v43.png 1x, https://s2.construct.net/images/v173/r/global/construct-3-logo_v64.png 1.5x, https://s2.construct.net/images/v173/r/global/construct-3-logo_v90.png 2x, https://s3.construct.net/images/v173/r/global/construct-3-logo_v110.png 2.5x, https://s3.construct.net/images/v173/r/global/construct-3-logo_v130.png 3x" src="https://s2.construct.net/images/v173/r/global/construct-3-logo_v43.png" alt="Logo"/>
Works and looks great on high dpi displays. Lazy loading enabled renders something like:

    <img class="jsEnabled" data-src="https://s1.construct.net/images/v173/r/home/monster_v350.png" width="350" height="367" data-srcset="https://s1.construct.net/images/v173/r/home/monster_v350.png 1x, https://s1.construct.net/images/v173/r/home/monster_v550.png 1.5x, https://s3.construct.net/images/v173/home/monster.png 2x" src="https://s1.construct.net/images/v173/1.gif" alt="Monster"/>
    <noscript>
        <img width="350" height="367" srcset="https://s1.construct.net/images/v173/r/home/monster_v350.png 1x, https://s1.construct.net/images/v173/r/home/monster_v550.png 1.5x, https://s3.construct.net/images/v173/home/monster.png 2x" src="https://s1.construct.net/images/v173/r/home/monster_v350.png" alt="Monster"/>
    </noscript>
At this point I was thinking that's actually a fair old chunk of text to display an image, but still worth doing.

It can be quite fiddly doing this, but it's nice when it's done and works as expected!




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: