Retina, the lazy way?

Question

I plan on building a simple static site using Bootstrap, which, to my knowledge, does not have built-in support for retina images like Foundation does. I'm curious, what's stopping me from just making all the imagery for the site double the intended size (e.g. 600x300) and then shrinking it when placing it in the code?

<img src="myImage.png" width="300" height="150">

The only problem I can think of is for images that are quite large in file size. In that case, I may need to find a good retina JS lib that works well with Bootstrap. And continuing on the theme of laziness, would hopefully work well with bower and grunt as far as injecting itself into the code.

score 0 · Answer 1 · answered Nov 25 '14 at 19:34

0

You can try lazySizes in conjunction with respimage. Your code would look like this:

<img
    data-sizes="auto"
    src="lqip-src.jpg"
    data-srcset="lqip-src.jpg 100w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload" />

answered Nov 25 '14 at 19:34

alexander farkas

13,754
4
40
41

Retina, the lazy way?

1 Answers1