Reducing image file size is crucial for website performance, faster loading times, and better user experience. Large image files can significantly slow down your website, impacting SEO and user engagement. Whether you’re a photographer, blogger, or business owner, understanding How Do You Make A File Size Smaller For Photos is an essential skill for the digital age. This guide will walk you through the best methods to compress your images effectively, ensuring they load quickly without sacrificing visual quality.
The primary method to decrease the file size of a photo is by increasing compression. Image editing software typically offers this option during the “Save As” or “Export As” process for common formats like PNG, JPG, and GIF. Higher compression results in a smaller file size, which translates to faster loading on web pages.
Before you begin compressing, it’s important to choose the right file format for your image. JPEG is generally the best option for photographs with many colors or illustrations with gradients when file size reduction is a priority. PNG-24 is necessary for similar photos requiring lossless compression or transparent backgrounds. For simple graphics with limited colors and solid areas, GIF or PNG-8 formats are ideal. Let’s explore how to achieve optimal compression for each of these file types, starting with JPEG. Details on compressing PNGs and GIFs are provided further down.
Compressing JPEGs: Balancing Quality and File Size
Compressing a JPEG (or JPG) is straightforward, primarily involving adjusting the image quality. When exporting a JPEG from an image editor, you’ll encounter quality settings. These may be presented as presets like low, medium, high, and maximum, a numerical range (e.g., 0-12), or a percentage scale (0-100%). The key is to select the lowest quality setting that still meets your visual requirements.
A practical approach to finding the ideal quality level is to start with a relatively high setting. If the image looks acceptable, gradually reduce the quality and re-examine. Continue reducing quality until you notice an unacceptable level of degradation. Then, revert to the immediately preceding quality setting, which represents the best balance between quality and file size for your needs. Always consider the intended use of the image. For a detailed botanical encyclopedia, high quality is essential to preserve fine details. However, for a casual social media post celebrating spring flowers, lower quality is often perfectly adequate.
Let’s examine a section of a flower photograph exported at six different JPEG quality settings to illustrate this concept.
100% Quality, 103 KB File Size
Exporting at 100% quality results in the largest file size. This setting is rarely necessary for web use.
Daylily flower and buds at 100% quality
80% Quality, 48 KB File Size
The 80% quality setting is nearly indistinguishable from 100% quality to the naked eye, yet the file size is significantly reduced.
Daylily flower and buds at 80% quality
60% Quality, 28 KB File Size
At 60% quality, most viewers would not perceive any difference compared to the 100% version. The file size is a quarter of the original, leading to four times faster loading.
Daylily flower and buds at 60% quality
40% Quality, 17 KB File Size
For many general purposes, a 40% quality image remains acceptable, loading five times faster than the original.
Daylily flower and buds at 40% quality
20% Quality, 12 KB File Size
At 20% quality, noticeable image degradation begins to appear.
Daylily flower and buds at 20% quality
0% Quality, 7 KB File Size
Extreme JPEG compression at 0% quality results in significant blockiness and poor image quality.
Daylily flower and buds at 0% quality
Sample photo from FCIT’s plant photo collection on ClipPix ETC website.
Another effective technique to reduce JPEG file size is to slightly blur the image before compression. Images with fewer sharp edges and intricate details compress more efficiently. Blurring is particularly useful for background images. You can selectively blur parts of an image to achieve file size savings. Consider a day lily photo with a busy background. At 60% quality, the file size is 77 KB.
Day lily with sharp background
By blurring the background in an image editor like Photoshop, while keeping the flower sharp, and exporting at the same 60% quality, the file size reduces to 54 KB, approximately 30% smaller. This not only decreases file size and improves loading speed but can also artistically enhance the photo by emphasizing the subject.
Day lily with blurred background
A crucial point to remember about JPEGs is their lossy compression. Each time you save an image as a JPEG, you lose some image quality. For archival purposes or future editing, always save your original photo in a lossless format like TIFF or PSD. Export to JPEG only for web use. Avoid repeatedly saving a JPEG over itself, as this degrades quality with each save, similar to making photocopies of photocopies. Always revert to your original, uncompressed file for editing.
Compressing GIFs: Color Depth and Dithering
GIF was traditionally favored for graphics with simple areas and few colors. While PNG-8 now offers similar results with potentially smaller file sizes, GIF compression techniques remain relevant.
GIF images are limited to 256 colors. Reducing the color depth significantly decreases file size. Aim for color palettes close to powers of 2: 256, 128, 64, 32, 16, 8, 4, or 2 colors. Reducing a 33-color image to 32 colors yields substantial file size reduction, whereas reducing from 32 to 31 colors provides minimal benefit.
For more detailed information and visual examples, refer to resources explaining bit depth.
When saving or exporting as a GIF, first, specify the desired number of colors. Second, if you observe “banding” in gradient areas, consider using a dither pattern, typically “diffusion,” to minimize banding artifacts. Third, if your image includes transparency, ensure the “transparent” option is selected.
Settings like “Web snap” can generally be ignored, as they are remnants from older display technologies. The “Matte” setting, once used to blend transparent GIF edges, is less critical now, and PNG often provides a better solution for transparency issues.
GIFs remain popular for animated images, although PNG is increasingly becoming a viable alternative in this domain as well.
Dancing robot GIF animation
Sample graphic from FCIT’s robot illustrations collection on TIM website.
Compressing PNGs: PNG-8 vs. PNG-24
PNG has gained significant popularity, combining features of both JPG and GIF. It’s essential to understand the nuances of PNG compression for web graphics.
The first decision is whether to use PNG-8 or PNG-24. PNG-8 is analogous to GIF, best suited for graphics with limited colors and solid shapes like logos. PNG-8 files are generally smaller than equivalent GIFs. PNG-24, similar to JPEG, is designed for continuous-tone images such as photographs or images with more than 256 colors. PNG-24 employs lossless compression, resulting in larger file sizes than JPEGs but with superior image quality.
Exporting as PNG-8: The export interface for PNG-8 resembles that of GIF. You’ll select the number of colors (2, 4, 8, 16, 32, 64, 128, or 256), choose whether to apply dithering, and specify transparency if needed. The primary advantage of PNG-8 over GIF is typically a smaller file size.
Consider a cartoon exported as a 32-color GIF with a file size of 13.6 KB.
Cartoon saved as GIF format
The same cartoon exported as a 32-color PNG with identical settings results in a file size of only 10.2 KB, representing a 25% reduction in file size.
Cartoon saved as PNG format
Sample graphic from FCIT’s tech cartoons collection on TIM website.
Exporting as PNG-24: As a lossless format, PNG-24 offers minimal quality options during export. Unlike JPEG, no image data is discarded. This lossless nature leads to potentially larger file sizes.
A photograph of macaws exported as PNG-24 yields a large file size of 400 KB.
Photo saved as PNG-24 format
The same photo exported as a maximum quality (100%) JPEG results in a smaller file size of 259 KB.
Photo saved as maximum quality JPEG
And at a high quality (60%) JPEG setting, the file size is significantly reduced to just 69 KB.
Photo saved as high quality JPEG
Sample photo from FCIT’s animal photo collection on ClipPix ETC website.
Why Choose PNG-24 Over JPEG Despite Larger File Sizes? Several compelling reasons justify using PNG-24 even with its larger file size compared to a “serviceable” JPEG:
- Transparency: PNG is essential when image transparency is required, as JPEGs do not support transparency.
- Lossless Quality: For scenarios demanding lossless quality, PNG is necessary. Even “maximum quality” JPEGs inherently involve data loss and image degradation, albeit sometimes imperceptible.
- Preserving Sharp Details: PNG excels at maintaining crispness, especially crucial for screenshots containing small text. JPEG compression can “smudge” text, reducing readability. PNG reproduces text pixel-perfectly, preserving original clarity.
By understanding these compression techniques and file format characteristics, you can effectively make a file size smaller for photos while maintaining acceptable image quality, ensuring optimal website performance and user experience.
Related Resources:
- What is the difference between bitmap and vector images?
- What is bit depth?
