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.
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).
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".
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.
This demo replaces existing scale factors and values within static image request URIs.
This demo replaces existing dimensions and scale factors within dynamic image request URIs.
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.
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.
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.
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.
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.
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.
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.
Testing page shows how the public foresight.resolve() method can be used. Also useful for testing various scenarios.
src
Comparison
This image comparison page is hard coded with two resolutions. No javascript added.