Foresight.js Demos using image-set() CSS

Its best to view the demos using a high resolution display because currently most desktop and laptop displays do not have a device pixel ratio greater than one. Additionally, each demo has full debugging information included so you can see how the images have adjusted for each device.

Demo 1: Basic Image Comparison

This demo displays images which have a browser width set at 320 pixels, but the image's requested dimensions adjusts according to the device pixel ratio. Compare the high-resolution images to the standard-resolution (you can only see the difference on a hi-res display).

Demo 2: Static Image URI Template Examples

This example only uses static images and they cannot be dynamically resized by the server. Common examples includes hi-res image filenames ending with "@2x" or "-high-res".

Demo 3: Dynamic Image URI Template Examples

This demo uses images which can be dynamically resized by requesting specific dimensions directly within the image request. Common examples includes a directory with dimension values, such as /images/640x480/awesomeness.jpg, or querystring values, such as /images/sweetness.png?w=640&h=480.

Demo 4: Static Image URI Replacement Examples

This demo replaces existing scale factors and values within static image request URIs.

Demo 5: Dynamic Image URI Replacement Examples

This demo replaces existing dimensions and scale factors within dynamic image request URIs.

Demo 6: Assigning High-Resolution Src in Img Attribute

Aside from all of the CSS options, this example assigns the hi-res version of the image file as an attribute directly in the img element.

Demo 7: Dynamically Resized Responsive Image

This demo expands the image browser pixels to 100% of its parent element's width, and scales the image adjusted to the device pixel ratio. This example uses dynamically resized images.

Demo 8: Smooth Scaling Static Responsive Image using Media Queries (Conditional CSS)

This demo has primary content on the left side and an image on the right side. The image scales its size according to the available width of the side menu. This example uses static image files and requests different images using media queries, but has the browser scale the given image.

Demo 9: Block Scaling Static Responsive Image using Media Queries (Conditional CSS)

This demo has primary content on the left side and an image on the right side. The image adjusts its size according to the available width of the side menu. This example uses static image files and requests different images using media queries, but until demo 8 it doesn't let the browser scale the image to the available width.

Demo 10: Parent Percentage with unknown Image Width

This demo shows image-set() CSS can work with percentage css width and an unknown aspect ratio. Obviously this will not allow you to specify the height on the URL for dynamic images so your server side component should determine the aspect ratio or you should set the aspect ratio not to auto.

Demo 11: jQuery Mobile Pages

This demo shows how foresight.js can be integrated with jQuery mobile. You can use existing jQuery Mobile functionality to help adjust images when a device is rotated. Additionally, jQuery Mobile pages can use ajax calls to retrieve the next page which updates the DOM, not refresh the entire page. This demo shows how foresight.js is updated after page transitions.

Demo 12: Parent Known Dimension and Aspect Ratio

This demo shows image-set() CSS can work with pixel css width and an known aspect ratio. Obviously this will not allow you to specify the height on the URL for dynamic images so you should set the aspect ratio not to auto.

foresight.resolve() Public Method

Testing page shows how the public foresight.resolve() method can be used. Also useful for testing various scenarios.


Hard Coded src Comparison

This image comparison page is hard coded with two resolutions. No javascript added.


Don't kill me, but the QR code is here just to make it easier to open this page on a mobile device

(For debugging purposes)