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

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

Image quality: 40

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

Image element: 400 x 225px

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

Quality: 80 (pre-set default in prImages)

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

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)

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

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

Image quality: 40

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

Image element: 300 x 450px

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

Quality: 80 (pre-set default in prImages)

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

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)

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

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

Image quality: 40

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

Image element: variable x 400px

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

Quality: 80 (pre-set default in prImages)

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

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)