How I cut a 1.1 GB image gallery to 30 MB without touching a single database row

A small AI-photo-prompt gallery grew rapidly, with image files totaling 1.1 GB across 2,650 files. The primary issue was that a single gallery page shipped 2-3 MB of images to users on Indian mobile data connections. The initial instinct was to compress JPEGs, but this proved ineffective. Upon examining the data, it became clear that PNG files made up 58% of the gallery but contributed to 75% of the total bytes, as they were the default format generated for the images.

Converting PNG images to WebP with a quality setting of 82 resulted in a 93% reduction in file size—423.7 MB down to 29.8 MB. This conversion also improved the image quality on the actual gallery pages, reducing the hero image size from 668 KB to just 68 KB (89% reduction). However, a small error was discovered during this process: two images experienced a slight visual degradation due to high saturation graphic content.

To avoid this issue, a perceptual visual check was performed on the worst cases, which proved to be more reliable than relying solely on a single scalar metric.

The solution was to employ a "<picture>" element for serving the images, rather than replacing the original PNG files or updating the URLs in the database. This approach allowed for automatic fallback to the original format for clients that did not support WebP. Additionally, by adding width and height attributes to the images, layout shift (CLS) was minimized. The original images remained untouched, ensuring that there were no database changes that could affect the companion mobile app.

The operation was also found to be reversible at every layer, with the originals stored on disk and a complete backup kept for safety. This process proved to be 90% more efficient for the pages that mattered most. Several key lessons were learned throughout the process, including the importance of measuring format distribution before compression, serving images with the "<picture>" element instead of rewriting URLs, and thoroughly checking the rendered output to avoid issues caused by double-wrapping or missing CSS styles.