Image scroll test page

Attempting resolution of issue seen in recent photo blog posts: scrolling down, or even back up, results in Chrome re-decoding images in CPU raster jobs, which takes time and leaves the viewer with a white screen.

This does not happen for at least one photo-heavy website I have visited. I do not understand why.

When does it happen?

Permalink to โ€œWhen does it happen?โ€
  • Happens if a bunch (~30) images are embedded normally
  • Does not happen if the same image is repeated (~50x)
  • Happens if images are all given fake widths + heights (e.g., 1000 x 1000).
  • Happens at first if images are all given small fake widths + heights (e.g., 100 x 100), then after several rounds of scrolling up and down, everything stays loaded
  • Happens if all widths and heights are provided, width capped and height used (imgs distorted)
  • Happens if all widths and heights are provided, width capped and height set to auto (imgs now undistorted)
  • Happens if images are all shrunk to 2/3 height (~50% size). It is alleviated, but I think the decoding simply finishes faster.
  • Happens if all widths and heights are provided, images allowed to be full size (no W or H cap), and theyโ€™re 50% size.
# when testing, embed images here w/
python scripts/image_size_test.py | pbcopy