The People page is going to be a photo gallery, and there might be other pages like it. The problem with always providing the same static picture as it is done currently is three-fold: people are bound to submit unoptimized images, we can not provide the images in multiple formats, we can not provide the pictures in multiple resolutions. Using <picture> and <source> together with <img> allows us to serve images that are appropriately sized for the user's display and in the most fitting image file format (see for example this html from my website).
For example, the current picture of Alexis is ~600kb, similar images of a whole team (~15 people) would amount to ~9mb. A noticeable download even on a reasonably good internet connection. However, the same image compressed in avif format and resized for 300 image-pixels (to support the current 150 CSS pixels width at a device pixel ratio of 2) is only ~10kb. See the picture below created with squoosh (left: original, right: resized avif):
I don't think it is reasonable to have people provide all versions of the image by themselves, so I would propose to add a pipeline which automatically resizes the given picture to widths of 150, 300, and 450 pixels in avif, webp, and jpg formats. That should be sufficiently optimized for just about any device/browser. I am planning a similar pipeline for my own website, so I could add this when I finish it there. Until then we can keep the current workflow, but might prefer to ask for a 450 pixels wide image.
The People page is going to be a photo gallery, and there might be other pages like it. The problem with always providing the same static picture as it is done currently is three-fold: people are bound to submit unoptimized images, we can not provide the images in multiple formats, we can not provide the pictures in multiple resolutions. Using
<picture>and<source>together with<img>allows us to serve images that are appropriately sized for the user's display and in the most fitting image file format (see for example this html from my website).For example, the current picture of Alexis is ~600kb, similar images of a whole team (~15 people) would amount to ~9mb. A noticeable download even on a reasonably good internet connection. However, the same image compressed in avif format and resized for 300 image-pixels (to support the current 150 CSS pixels width at a device pixel ratio of 2) is only ~10kb. See the picture below created with squoosh (left: original, right: resized avif):
I don't think it is reasonable to have people provide all versions of the image by themselves, so I would propose to add a pipeline which automatically resizes the given picture to widths of 150, 300, and 450 pixels in avif, webp, and jpg formats. That should be sufficiently optimized for just about any device/browser. I am planning a similar pipeline for my own website, so I could add this when I finish it there. Until then we can keep the current workflow, but might prefer to ask for a 450 pixels wide image.