Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Warning: file_exists(): open_basedir restriction in effect. File(../../../../http://code.hnldesign.nl/img/demoimgs/stalenhag/15.jpg) is not within the allowed path(s): (/sites/hnldesign.nl/www/:/sites/hnldesign.nl/www/:/sites/hnldesign.nl/subdomains/:/sites/hnldesign.nl/private/:/sites/hnldesign.nl/logs/:/sites/hnldesign.nl/backups/:/sites/hnldesign.nl/lib/php_include/cacert.pem:/sites/hnldesign.nl/tmp/:/tmp/) in /subdomains/code/php/prImages.php on line 86
Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Warning: file_exists(): open_basedir restriction in effect. File(../../../../http://code.hnldesign.nl/img/logos/primages.png) is not within the allowed path(s): (/sites/hnldesign.nl/www/:/sites/hnldesign.nl/www/:/sites/hnldesign.nl/subdomains/:/sites/hnldesign.nl/private/:/sites/hnldesign.nl/logs/:/sites/hnldesign.nl/backups/:/sites/hnldesign.nl/lib/php_include/cacert.pem:/sites/hnldesign.nl/tmp/:/tmp/) in /subdomains/code/php/prImages.php on line 86

progressive-responsive images

Example 1 - Landscape

Initial state

Initial state

Result

Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Warning: file_exists(): open_basedir restriction in effect. File(../../../../http://code.hnldesign.nl/img/demoimgs/stalenhag/02.jpg) is not within the allowed path(s): (/sites/hnldesign.nl/www/:/sites/hnldesign.nl/www/:/sites/hnldesign.nl/subdomains/:/sites/hnldesign.nl/private/:/sites/hnldesign.nl/logs/:/sites/hnldesign.nl/backups/:/sites/hnldesign.nl/lib/php_include/cacert.pem:/sites/hnldesign.nl/tmp/:/tmp/) in /subdomains/code/php/prImages.php on line 86

Info

Image element: <img> at width="400", height not set

Image src: 240px wide (60% of dimensions)

Image quality: 40

data attributes for prImages

Image aspect ratio: 0,5625 (height/width) - set via data-ratio

Image max width: 1920px - set via data-srcwidth

Image cropping: 0 (false) - set via data-crop

Calculations

Image element: 400 x 225px

Required dimensions: 400px (no cropping, no height required)

Quality: 80 (pre-set default in prImages)

Match to breakpoints

Required dimensions: 400 x 225px

Breakpoints: 160, 320, 480, 768, 1024, 1224, 1824, 1920 (image's original width)

Match if: 400 <= breakpoint

Matches: 160, 320, 480, 768, 1024, 1224, 1824, 1920

Result: 480 x (480 * ratio)px = 480 x 270px

Preload

  1. Generate url (schema can be customized)
  2. Load Required dimensions url into a New image(); 'mule'
  3. Wait for load event on mule
  4. On success, set loaded image as src of target element, on fail do nothing (keeps current image)

Example 2 - Portrait

Initial state

Initial state

Result

Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Warning: file_exists(): open_basedir restriction in effect. File(../../../../http://code.hnldesign.nl/img/demoimgs/stalenhag/02.jpg) is not within the allowed path(s): (/sites/hnldesign.nl/www/:/sites/hnldesign.nl/www/:/sites/hnldesign.nl/subdomains/:/sites/hnldesign.nl/private/:/sites/hnldesign.nl/logs/:/sites/hnldesign.nl/backups/:/sites/hnldesign.nl/lib/php_include/cacert.pem:/sites/hnldesign.nl/tmp/:/tmp/) in /subdomains/code/php/prImages.php on line 86

Original

Image element: <img> at width="300", height="450"

Image src: 180px wide, 270px tall (60% of dimensions)

Image quality: 40

data attributes for prImages

Image aspect ratio: 1.5 (height/width) - set via data-ratio

Image max width: 1920px - set via data-srcwidth

Image cropping: 1 (true) - set via data-crop

Calculations

Image element: 300 x 450px

Required dimensions: 300 x (300 * ratio)px = 300 x 450px

Quality: 80 (pre-set default in prImages)

Match to breakpoints

Required dimensions: 300 x 450px

Breakpoints: 160, 320, 480, 768, 1024, 1224, 1824, 1920 (image's original width)

Match if: 300 <= breakpoint and breakpoint * ratio >= 450

Matches: 160, 320, 480, 768, 1024, 1224, 1824, 1920

Result: 480 x (480 * ratio)px = 480 x 720px

Preload

  1. Generate url (schema can be customized)
  2. Load Required dimensions url into a New image(); 'mule'
  3. Wait for load event on mule
  4. On success, set loaded image as src of target element, on fail do nothing (keeps current image)

Example 3 - Using a DIV - Portrait

Initial state

Result

Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /subdomains/code/php/findRelative.php on line 32 Warning: file_exists(): open_basedir restriction in effect. File(../../../../http://code.hnldesign.nl/img/demoimgs/stalenhag/02.jpg) is not within the allowed path(s): (/sites/hnldesign.nl/www/:/sites/hnldesign.nl/www/:/sites/hnldesign.nl/subdomains/:/sites/hnldesign.nl/private/:/sites/hnldesign.nl/logs/:/sites/hnldesign.nl/backups/:/sites/hnldesign.nl/lib/php_include/cacert.pem:/sites/hnldesign.nl/tmp/:/tmp/) in /subdomains/code/php/prImages.php on line 86

Initial

Image element: <div> at height:400px; (no width)

Background-image: 240px wide, no width (60% of dimensions)

Image quality: 40

Data attributes for prImages

Image aspect ratio: 0,56 (height/width) - set via data-ratio

Image max width: 1920px - set via data-srcwidth

Image cropping: 0 (false) - set via data-crop

Calculations

Image element: variable x 400px

Required dimensions: (400 / ratio)px x 400px = 715 x 400px

Quality: 80 (pre-set default in prImages)

Match to breakpoints

Required dimensions: 715 x 400px

Breakpoints: 160, 320, 480, 768, 1024, 1224, 1824, 1920 (image's original width)

Match if: 200 <= breakpoint and breakpoint * ratio >= 960

Matches: 160, 320, 768, 1024, 1224, 1824, 1920

Result: 768 x (768 * ratio)px = 768 x 430px

Preload

  1. Generate url (schema can be customized)
  2. Load Required dimensions url into a New image(); 'mule'
  3. Wait for load event on mule
  4. On success, set loaded image as src of target element, on fail do nothing (keeps current image)