{
  "id": 45334,
  "title": "How I cut a 1.1 GB image gallery to 30 MB without touching a single database row",
  "url": "https://urgent.news/2026/08/02/how-i-cut-a-1-1-gb-image-gallery-to-30-mb-without-touching-a-single",
  "topic": "culture",
  "section": "Culture",
  "published": "2026-08-02T14:12:15.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/prompt_pin/how-i-cut-a-11-gb-image-gallery-to-30-mb-without-touching-a-single-database-row-1j59"
  },
  "original_language": "en",
  "account": "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.\n\nConverting 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.\n\nThe 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.\n\nThe 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.",
  "summary": "This brief summarizes a case study of how an individual reduced the size of a 1.1 GB image gallery to just 30 MB without altering any database rows. The writer initially believed that compressing JPEG images would be the solution but found that the majority of the image files were already in PNG format, which is a lossless format and tends to produce larger files. After converting the majority of the PNG images to WebP format at a quality setting of 82, the size reduced by 93%, saving a significant amount of data. The writer also shares a valuable lesson about the importance of using perceptual testing rather than relying solely on metrics like RMSE when dealing with lossy image compression. The article ends with the writer detailing their approach to serving the images via the HTML picture element, which allows for automatic fallback to the original image format for clients that do not support WebP, all without modifying any database records or URLs.",
  "key_points": [
    "1.1 GB gallery reduced to 30 MB by converting PNG to WebP with 82% quality",
    "58% PNG files contributed to 75% of total bytes, making conversion crucial",
    "\"picture\" element used for automatic WebP fallback, preserving original images"
  ],
  "editors_take": null,
  "illustration": "https://urgent.news/ill/45334.png",
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}