Jon Allured

Computer Programmer, Whiskey Drinker, Comic Book Reader

Image Tester

This page helps me test various image scenarios and then I can view it on my fleet of devices to see how each ends up rendering the page.

This one uses 5 densities in the srcset:

Example image with density label
Such a creative example image - good job Jon!!

This one uses 7 sizes in the srcset with smart breakpoints in the sizes:

Example image with size label
There are so many options!

This one uses 2 densities with a more realistic image:

Screenshot of homepage
I can't wait to ship a better homepage!

This one uses 3 sizes with a more realistic image:

Screenshot of post page
What great blog post content!

In case the file details are interesting here's where things stand:

Filename Dimensions Size
density-example@1x.png 900x675 9k
density-example@2x.png 1800x1350 32k
density-example@3x.png 2700x2025 55k
density-example@4x.png 3600x2700 64k
density-example@5x.png 4500x3375 93k
size-example-600.png 600x450 8k
size-example-900.png 900x675 12k
size-example-1200.png 1200x900 20k
size-example-1800.png 1800x1350 36k
size-example-2400.png 2400x1800 50k
size-example-3000.png 3000x2250 76k
size-example-4000.png 4000x3000 91k
homepage@1x.png 900x675 151k
homepage@2x.png 1800x1350 354k
homepage@full.png 2400x1800 262k
post-900.png 900x675 141k
post-1200.png 1200x900 171k
post-1800.png 1800x1350 293k