Earlier today, after sharing a link to elixirconf.eu, I noticed that the images were loading very slowly. Inspector shows some multi-megabyte profile images, and the page came in at 23.85MB:
That started me on a campaign to reduce the page size by:
[x] Convert all speaker images to jpg (some larger ones were png)
[x] Optimize all speaker images (use vipsthumbnail to shrink all images to 384x384, 2x display size)
[x] Lazy load speaker images (switch to an img tag and set loading=lazy)
[x] Delete unused images (clear out unused and unreferenced images)
[x] Fix a broken speaker link (Manuel Camejo)
[x] Optimize all remaining images
That roughly outlines the commits in this PR, which turned out a bit larger than expected.
Results
The size on initial page load dropped to 1.18MB, about 5% the original size. The assets/images directory also went from 113MB to 7MB.
Changes
Quoting a80145d77:
Speaker pictures use an <img> tag with lazy loading enabled to minimize data fetching on page load. As the image was no longer part of the background, the styling needed updates. As a bonus flourish we now apply filters to the image rather than swapping it out for a solid color.
The result is that images are grayscaled, lightly tinted, and sepia toned rather than swapping to a cyan background:
Earlier today, after sharing a link to elixirconf.eu, I noticed that the images were loading very slowly. Inspector shows some multi-megabyte profile images, and the page came in at 23.85MB:
That started me on a campaign to reduce the page size by:
vipsthumbnailto shrink all images to 384x384, 2x display size)That roughly outlines the commits in this PR, which turned out a bit larger than expected.
Results
The size on initial page load dropped to 1.18MB, about 5% the original size. The
assets/imagesdirectory also went from 113MB to 7MB.Changes
Quoting a80145d77:
The result is that images are grayscaled, lightly tinted, and sepia toned rather than swapping to a cyan background: