Images account for more than half the data transferred on most webpages. A product photo that is 4 MB when it comes off a camera might be 40 KB after compression, with no visible difference to the human eye. That difference is enormous when multiplied across every image on every page of a website. Faster pages rank higher in search results, keep visitors from leaving, and cost less to serve.
This guide explains what image compression is, how different compression methods work, and how to compress images online for free using the DevHexLab Image Compressor.
What Is Image Compression?
Image compression is the process of reducing the file size of an image by removing or encoding data more efficiently. The goal is to make the file as small as possible while keeping the image looking good enough for its intended use.
There are two fundamental types of compression.
Lossy compression permanently removes some image data. The removed data is chosen to be the information that human vision is least sensitive to, such as subtle colour variations in large flat areas. JPEG is the most common lossy format. After lossy compression, the original image cannot be perfectly reconstructed. Each time you save over a JPEG with additional compression, a small amount of quality is lost again.
Lossless compression reorganises the data more efficiently without discarding anything. The decompressed result is bit-for-bit identical to the original. PNG uses lossless compression. A lossless compressed file is always larger than an equivalent lossy compressed file, but the quality is preserved perfectly. This matters for screenshots, icons, logos with sharp edges, and anything with text.
WebP supports both lossy and lossless modes and generally produces smaller files than JPEG or PNG at equivalent quality.
How JPEG Compression Works
JPEG compression works by dividing the image into 8x8 pixel blocks and applying a mathematical transform (the discrete cosine transform, or DCT) that expresses each block as a combination of frequency components. High-frequency components (fine detail) carry less visual weight than low-frequency components (broad shapes and gradual colour changes). JPEG discards a controlled amount of high-frequency data and then uses lossless encoding (Huffman coding) on the remaining values.
The quality slider in most image editors and compressors controls how aggressively the high-frequency components are reduced. Quality 100 means almost no reduction and produces the largest file. Quality 75 is the commonly recommended default for photographs on websites. Quality 50 produces noticeably softer edges and is suitable only for thumbnail images or backgrounds.
How PNG Compression Works
PNG compression uses a combination of a prediction filter and the DEFLATE algorithm. The prediction filter looks at each pixel and records the difference from a neighbouring pixel rather than the absolute value, which produces more compressible data. DEFLATE then compresses that data without any loss.
Because PNG compression is lossless, reducing the file size of a PNG means choosing a better compression level (at the cost of more time to encode) or reducing the number of colours in the image. An image editor tool like pngquant can reduce a 24-bit PNG to an 8-bit palette (256 colours) with very little visible change for many types of images.
What Quality Setting Should You Use?
For photographs, a JPEG quality of 75 to 85 is the sweet spot for most websites. The files are 5 to 15 times smaller than the uncompressed original and look identical on screen.
For images with transparent backgrounds, sharp lines, or text (logos, icons, screenshots), use PNG. Lossless PNG compression with a reduced palette often achieves file sizes comparable to a medium-quality JPEG.
For modern websites targeting recent browsers, WebP is worth considering. WebP at quality 80 typically produces files 25 to 35 percent smaller than JPEG at equivalent visual quality.
For photos on landing pages where quality is critical, stay at 85 to 90. For thumbnails, social media previews, and background images, 70 is fine.
Why Not Just Use Photoshop?
Adobe Photoshop has excellent image compression controls in its Save for Web dialog. However, not every person who needs to compress an image has Photoshop installed or knows how to use it. The DevHexLab Image Compressor runs entirely in your browser, requires no installation, supports batch processing, and is completely free.
Other alternatives include command-line tools like ImageMagick or FFmpeg, which are powerful but require technical knowledge and are not accessible to non-developers.
How to Compress Images Using DevHexLab
Open the tool at /tools/image/image-compressor. Drag and drop one or more image files onto the upload zone, or click to browse. The tool supports JPEG, PNG, and WebP images.
Use the quality slider to choose your compression level. The default is set to a value that works well for most images.
The tool shows a side-by-side comparison of the original file size and the compressed file size along with the percentage reduction. Check the preview to make sure the compressed image looks acceptable for your use case.
Click Download to save the compressed image, or Download All to get a ZIP file containing all compressed images if you uploaded multiple files.
The tool runs entirely in your browser. Your images are never sent to a server.
What About Resizing?
Compression and resizing are related but different things. Compression reduces the file size of an image at its current pixel dimensions. Resizing (downscaling) reduces the number of pixels in the image, which also reduces the file size but in a fundamentally different way.
An image that is 4000 pixels wide and displayed at 400 pixels wide on a webpage is sending 10 times more pixel data than the browser actually needs. Resizing to 800 pixels (a bit wider than the display size for high-density screens) combined with compression produces by far the smallest file with the best visual quality.
The DevHexLab Image Resizer at /tools/image/image-resizer handles resizing. For maximum benefit, resize the image to the right dimensions first, then compress it.
Common Mistakes When Compressing Images
Re-compressing a JPEG. Every time you apply lossy compression to a JPEG that was already compressed, you introduce additional artefacts. Keep original high-quality versions of images and only compress when exporting the final version for web use.
Using PNG for photographs. PNG losslessly compresses photographs to files that are much larger than an equivalent JPEG. Use JPEG for photographs and PNG for graphics, logos, and screenshots.
Using JPEG for graphics with text or sharp edges. JPEG compression introduces noticeable blurring and ringing artefacts around sharp edges and high-contrast text. Use PNG for anything with text or logos.
Compressing images that are already compressed. If an image was downloaded from a social media platform or another website, it has likely already been compressed. Re-compressing it usually achieves very little reduction and may introduce additional quality loss.
Image Compression and SEO
Search engine ranking factors explicitly include page speed. Google's PageSpeed Insights and Core Web Vitals metrics reward pages that load quickly. Images are almost always the largest assets on a page.
Serving correctly sized and compressed images can move a page from a poor performance score to a good one. In practical terms, this can mean the difference between ranking on the first page of search results and ranking on the second or third.
Frequently Asked Questions
Does compressing an image reduce its resolution?
Lossy compression does not reduce the pixel dimensions (resolution) of an image. It reduces the file size by discarding some detail within those pixels. The image still has exactly the same width and height in pixels.
Is there any way to compress an image without losing quality?
Lossless compression (PNG, lossless WebP) reduces file size without any quality loss. For JPEG images, any reduction in file size through compression involves some quality reduction, though at high quality settings it is invisible to the eye.
How small can I compress a JPEG before the quality becomes unacceptable?
This depends on the image and the use case. A quality of 60 to 70 produces visible artefacts in photographs with smooth gradients. Quality 75 to 85 is generally considered the threshold of invisible loss for typical photographs. Below 60, artefacts become obvious on most images.
What is the best image format for web?
For photographs, JPEG or WebP. For graphics, logos, and screenshots, PNG or WebP lossless. For animated images, GIF (legacy) or WebP animated (modern). WebP generally outperforms both JPEG and PNG in file size at equivalent quality.
Make Every Image Web-Ready
Compressing images is one of the highest-impact, lowest-effort web performance improvements you can make. A few clicks can cut page load times significantly, improve your search ranking, reduce bandwidth costs, and give every visitor a better experience. Open the DevHexLab Image Compressor, drop in your images, and save the compressed versions. Your pages will thank you.