Image file size is determined by five variables: the format used, the compression quality setting, the pixel dimensions, the colour depth, and the amount of embedded metadata. Every technique for reducing image file size acts on one or more of these variables. Understanding which variable has the largest impact for a given image type makes the difference between reducing a file by 10 percent and reducing it by 70 percent.
Large image files are one of the most common causes of poor page load performance. Images account for the majority of total byte weight on most web pages. According to HTTP Archive data from 2024, the median total image weight on a desktop web page is approximately 1,000 KB, making images the largest single contributor to page weight ahead of JavaScript, fonts, and CSS. Reducing image weight is consistently the highest-return optimisation available on image-heavy pages.
The Five Levers That Control File Size
| Lever | Typical impact | Quality effect | Best for |
|---|---|---|---|
| Format selection | 25% to 80% reduction | None (format-appropriate use) | Any image not yet in WebP |
| Quality / compression level | 10% to 60% reduction | Minimal above Q75; visible below Q60 | Photographs and lossy-compressed images |
| Pixel dimensions (resize) | 50% to 95% reduction | None (if served at display size) | Images larger than their display size |
| Colour depth reduction | 30% to 70% reduction | Visible banding possible | Simple graphics with few colours |
| Metadata removal | 1% to 15% reduction | None | All images, especially from cameras |
Format Selection: The Biggest Single Impact
Choosing the correct format for an image’s content type is the highest-impact single decision in image optimisation. A photograph served as PNG instead of JPG can be three to five times larger with no quality benefit. The same photograph served as WebP instead of JPG at equivalent visual quality is 25 to 34 percent smaller. For a site delivering photographs, switching from PNG to WebP is a potential 75 to 80 percent file size reduction with no change in visual quality.
The format selection rules are straightforward. Photographs and images with continuous colour gradients belong in JPG or WebP lossy. Images requiring transparency belong in PNG or WebP. For any image delivered on a modern web property, WebP is the smaller option in every category. The JPG to WebP converter converts photographs to WebP in the browser without any server upload. The PNG to WebP converter handles transparent images.
| Current format | Image type | Better format | Typical size saving |
|---|---|---|---|
| PNG | Photograph | WebP lossy | 70% to 85% |
| PNG | Logo or icon with transparency | WebP lossless | 20% to 35% |
| JPG | Photograph | WebP lossy | 25% to 34% |
| JPG | Screenshot with text | WebP lossy or PNG | 20% to 50% |
| GIF | Simple animation | Animated WebP | 50% to 70% |
| BMP | Any | JPG or PNG or WebP | 80% to 95% |
Compression Quality: Where the Tradeoff Lives
For lossy formats (JPG and WebP lossy), the quality setting controls how aggressively the compression algorithm discards image data. Higher quality settings preserve more data and produce larger files. Lower quality settings discard more data and produce smaller files with visible compression artifacts. The relationship between quality setting and file size is non-linear: reducing quality from 100 to 85 saves significantly more bytes than reducing from 85 to 70, and the visible quality difference is the reverse.
The practical finding from image quality research is that most viewers cannot distinguish a JPG at quality 85 from a JPG at quality 95 when viewed on a normal screen at typical viewing distances. The file size difference between Q85 and Q95 on a photograph is typically 40 to 60 percent of file size. Delivering at Q85 instead of Q95 represents a 40 to 60 percent file size reduction with no perceptible quality change for the vast majority of viewers on standard displays.
| Quality setting | Approximate file size (2MP photo) | Visual quality | Recommended for |
|---|---|---|---|
| JPG Q95 to Q100 | 1.2 MB to 4 MB | Near-lossless | Archive copies only |
| JPG Q85 to Q92 | 450 KB to 700 KB | Excellent, artifacts invisible | High-quality web delivery |
| JPG Q75 to Q84 | 280 KB to 450 KB | Good, slight artifacts on close inspection | Standard web delivery |
| JPG Q60 to Q74 | 150 KB to 280 KB | Acceptable, artifacts visible on sharp edges | Thumbnails and previews |
| JPG below Q60 | Under 150 KB | Poor, block artifacts clearly visible | Not recommended for web use |
| WebP Q80 | 310 KB | Equivalent to JPG Q85 to Q90 | Standard web delivery |
| WebP Q60 | 180 KB | Equivalent to JPG Q75 | Lower-priority images |
Pixel Dimensions: The Most Underutilised Lever
Image file size scales approximately with the number of pixels it contains. An image at 4000×3000 pixels contains 12 million pixels. The same image resized to 2000×1500 pixels contains 3 million pixels, one quarter of the original count. The file size of the resized image will be approximately 75 percent smaller than the original (assuming the same format and quality setting), because there is simply one quarter as much data to store.
Many images are served at dimensions far larger than their display size. A hero image on a page that displays at 1400 pixels wide should be delivered at 1400 pixels wide (or 2800 pixels for high-density displays). Delivering it at the camera’s native 6000 pixel width means the browser downloads approximately 18 times more data than needed, then scales it down. The 18x excess data consumes bandwidth, delays page load, and increases LCP time without providing any visible quality benefit at the 1400-pixel display size.
The correct workflow is to resize images to their display dimensions before saving, not to rely on the browser’s CSS resizing. A CSS rule of max-width: 100% resizes an image visually but does not reduce the amount of data the browser must download. The image must be saved at the correct dimensions at the source for the file size reduction to take effect. The image cropper can resize images to exact pixel dimensions in the browser before downloading.
Colour Depth: Significant for Graphics, Irrelevant for Photos
Colour depth refers to the number of bits used to store colour information per pixel. A 24-bit image stores 8 bits per colour channel (red, green, blue), providing 256 values per channel and approximately 16.7 million possible colours. An 8-bit indexed image stores the image colours in a palette of up to 256 colours and uses 8 bits per pixel to index into that palette, requiring one third the data of a 24-bit image when the palette is sufficient.
For photographs and images with continuous colour variation, reducing colour depth below 24-bit introduces visible colour banding where smooth gradients step visibly between palette entries. Colour depth reduction is not appropriate for photographic content. For simple graphics with flat colours, icons, and illustrations using fewer than 256 distinct colours, reducing to 8-bit indexed colour can achieve 40 to 70 percent file size reduction with no visible quality change. PNG and WebP both support 8-bit palette mode for this use case.
Metadata Removal: Small Gains, Always Worth Doing
Digital cameras embed significant metadata inside image files. EXIF data records the camera model, lens focal length, aperture, shutter speed, ISO, GPS coordinates (if location was enabled), shooting date and time, and thumbnail previews of the image. For a photograph shot on a modern DSLR or smartphone, EXIF data can add 30 to 100 KB to the file size. For a small icon or graphic, the same metadata overhead represents a disproportionately large percentage of the total file size.
EXIF data is not visible to website visitors and serves no purpose in delivery images. Removing it has no effect on image appearance and reduces file size by 1 to 15 percent depending on how much metadata the original file contained. As a privacy consideration, GPS coordinates embedded in photographs taken on smartphones record the precise location where the photograph was taken. Removing EXIF data before publishing images prevents location information from being extracted from the delivered files.
Most image editing applications include an option to strip metadata on export. Some format converters, including browser-based tools, strip metadata automatically as part of the conversion process. Check whether metadata is removed by examining the output file’s EXIF data before publishing at scale.
Which Lever to Apply First
For most images on most websites, the priority order is: resize to display dimensions first (the highest-impact lever for oversized images), then convert to the correct format (WebP for web delivery), then set the quality to the appropriate level for the content type. Metadata removal can happen at any point in the workflow and requires no quality tradeoff.
Colour depth reduction applies only to a specific category of simple graphic content and should not be applied to photographic images. When an image is already in WebP at the correct dimensions, the remaining optimisation leverage is the quality setting. For images that must stay in JPG for platform compatibility, the quality lever is the primary tool after ensuring dimensions are correct.
Serving Different Sizes to Different Devices
A single image at one fixed size is never optimal for all devices. A desktop visitor viewing a 1400-pixel-wide layout and a mobile visitor viewing a 390-pixel-wide layout should not receive the same image file. The HTML srcset and sizes attributes enable responsive images: the browser selects the smallest image from the srcset list that is at least as large as the element’s display size on the viewer’s screen and device pixel ratio.
A complete responsive image implementation provides multiple image sizes (for example: 400, 800, 1200, and 1600 pixel widths) and lets the browser pick the correct one. A mobile visitor on a 390-pixel-wide screen at 2x device pixel ratio will select the 800-pixel image (390 x 2 = 780, rounded up to the next available size). A desktop visitor on a 1400-pixel layout at 1x will select the 1600-pixel image. Without srcset, the same 1600-pixel image is delivered to the mobile visitor who needs only the 800-pixel version, downloading twice the data for no visible improvement.
Use the JPG cropper to produce each size variant from the full-resolution source image, the JPG to WebP converter to convert each variant to WebP, and the WebP to JPG converter to produce JPG fallback versions for older browser compatibility.
Frequently Asked Questions
Convert to WebP. For photographs, switching from JPG to WebP at an equivalent quality setting reduces file size by 25 to 34 percent with no visible quality change. For PNG images, switching to WebP lossless reduces size by approximately 26 percent. Format selection is the single highest-impact lever available for image file size reduction because it requires no quality tradeoff when the correct format is chosen for the image content type.
Quality 80 to 92 for web delivery. The range between 80 and 92 produces files where compression artifacts are invisible at normal screen viewing distances. Below quality 75, artifacts become visible on edges and in high-contrast areas. Above quality 92, file size increases steeply with negligible visible improvement. Quality 85 is a widely-used default that balances file size and visual fidelity for most photographic content.
Yes, significantly. File size scales approximately with pixel count. Halving an image's width and height (for example, from 4000x3000 to 2000x1500) reduces the pixel count to one quarter of the original, which reduces the file size by approximately 75 percent at the same format and quality setting. This is why serving images at their display dimensions rather than at the camera's native resolution is one of the highest-impact optimisations available. An image displayed at 1400 pixels wide should be saved at 1400 pixels wide, not at the camera's 6000 pixel native width.
Yes, typically by 1 to 15 percent. Digital cameras embed EXIF metadata including camera model, lens, exposure settings, GPS coordinates, and a thumbnail preview. For a photograph from a modern DSLR or smartphone, this metadata can add 30 to 100 KB to the file. Removing it has no effect on image appearance. As a privacy consideration, GPS coordinates embedded in smartphone photographs record the precise location where the photograph was taken. Stripping EXIF data before publishing prevents this information from being extracted from the delivered files.
Resizing changes the pixel dimensions of an image while keeping the same aspect ratio and all parts of the composition visible, scaling the entire image up or down. Cropping removes pixels from one or more edges of the image, changing both the dimensions and the aspect ratio, and permanently discarding the removed portion of the composition. Both operations reduce file size, but cropping also changes what is visible in the image.
The most common cause is incorrect format choice. A photograph saved as PNG will be two to five times larger than the same photograph in JPG or WebP, because PNG's lossless compression cannot efficiently compress natural photographic detail. The second most common cause is that the pixel dimensions are much larger than the display size. An image saved at 4000 pixels wide and displayed at 1000 pixels wide contains 16 times the pixel data needed. Address format first, then dimensions, then quality setting.
No. CSS resizing (using max-width, width, or height properties) scales the image visually in the browser layout but does not reduce the amount of data the browser must download. The browser still downloads the full-size file and then scales it down for display. The file must be saved at the correct pixel dimensions at the source for the file size reduction to take effect. Serving a 4000-pixel image with CSS that displays it at 1000 pixels downloads four times the necessary data.