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:
This one uses 7 sizes in the srcset with smart breakpoints in the sizes:
This one uses 2 densities with a more realistic image:
This one uses 3 sizes with a more realistic image:
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 |