7 ms·
Recently learnt in more depth around this, and did a really fun project to automate this in an ASP.net control. Input is: <Controls:ResponsiveImageFixedSi
by Scirra_Tom 9y ago
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!