progressive-responsive images

Example 1 - Landscape

Initial state

Initial state

Result

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

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

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)