Responsive Image Example
Having a "responsive image" means serving different images under different circumstances. Let's take a look at two ways to switch out images based on the end users device.
Loaded as a background image
The image in the header of this document is three different photos loaded through css and media queries. No javascript is required.
Loaded using javascript (Same Crop)
The image below is loaded in the html using picturefill.js and controlled using CSS. Notice that the small colored box in the top left corner changes. This allows you to see when a different car images is loaded.
Small
Small image has a width of 480px. The colored box is red.
Medium
Medium image has a width of 600px. The colored box is green.
Large
Large image has a width of 1140px. The colored box is yellow.
Loaded using javascript (Different Crop)
Responsive image in the flow of the body text. In this case I have provided a different crop of the image for phone, tablet and desktop.
Et etiam mauris, porta, elit adipiscing amet aliquet enim sagittis, nunc purus tempor porta lectus odio aenean nunc. Pellentesque elementum turpis penatibus? A dapibus cum, turpis, risus eros enim sagittis nunc sed turpis tincidunt. Tristique odio? Aliquam augue, parturient, lectus? Vut ut integer tincidunt! Dis.
Et ultrices arcu? Mattis lundium turpis rhoncus nisi nec. Rhoncus diam tristique, cras purus. Odio vel pid auctor dictumst magna placerat turpis non, penatibus dapibus arcu, enim in turpis, hac lundium lacus, pellentesque et sed, urna elit augue parturient massa rhoncus, et integer, porttitor? Dolor augue ultrices dapibus enim purus augue! Cursus mauris. Cras tortor dolor magnis et? In? Nunc magna. Ac lorem tortor augue? Vel aliquam, montes, phasellus velit tincidunt tristique dictumst magna? Integer, pellentesque platea, tempor in integer eros, vel tempor! Ac amet tincidunt magnis! Tristique velit, pellentesque? Et lectus sit etiam magna. In? Integer lorem amet. Vel ultrices tincidunt eu! Duis! Ridiculus adipiscing adipiscing! Lorem integer velit? Ac lundium nascetur, velit, turpis proin risus turpis diam. Et ultrices arcu? Mattis lundium turpis rhoncus nisi nec. Rhoncus diam tristique, cras purus. Odio vel pid auctor dictumst magna placerat turpis non, penatibus dapibus arcu, enim in turpis, hac lundium lacus, pellentesque et sed, urna elit augue parturient massa rhoncus, et integer, porttitor? Dolor augue ultrices dapibus enim purus augue!