What Is Photo Compression?
Imagine you have a huge wardrobe full of clothes, but you need to move to a smaller flat. Photo compression works in a similar way – it helps to ‘pack’ the information contained in a photo into a smaller space, so that it still looks good but takes up less space.
The aim of compression is to find the golden mean between a small file size and good image quality. This is particularly important where we have limited data space or a slow internet connection.
Websites with a lot of uncompressed images will load slowly, which can discourage visitors and adversely affect our visibility in search engines.
Why Is Image Compression Important?
Image compression is extremely important for several reasons:
- Space saving – compressed images take up less space on your hard drive or in the cloud.
- Faster transfer – smaller files load and transfer faster over the internet.
- Better page performance – pages with compressed photos run faster and smoother.
- Mobile data savings – smartphone users use less data when browsing pages with compressed photos.
- Lower costs – smaller files mean lower storage and data transfer costs.
Types of Photo Compression
There are two main types of photo compression, each with its own benefits and uses:
1. Lossless Compression
Lossless photo compression reduces the file size without losing image quality. It’s like folding clothes in a way that takes up less space but doesn’t destroy them. When you ‘uncompress’ such an image, it will be exactly the same as the original.
Advantages of lossless compression:
- Retains 100% of the original quality
- Ideal for graphics, logos and images with sharp edges
- Good for images that will be further edited
Disadvantages of lossless compression:
- Less reduction in file size compared to lossy compression
- Not always cost-effective for images with a lot of detail
Popular formats using this method are:
- TIFF (Tagged Image File Format) – used in professional photography and for archiving
2. Lossy Compression
Lossy image compression allows for a larger reduction in file size, but at the cost of a small loss of quality. It is like packing a suitcase by discarding some of the less necessary items. The image after such compression will not be identical to the original, but the differences may not be noticeable to the human eye.
Advantages of lossy compression:
- Significantly greater reduction in file size
- Ideal for photos and images with many colours
- Allows a balance between quality and size
Disadvantages of lossy compression:
- Some loss of quality, which may be apparent at high compression levels
- Not suitable for images that will be further edited
- Multiple compression may significantly reduce quality
The most common lossy formats are:
- JPEG (Joint Photographic Experts Group) – the most popular format for digital photos
- WebP – a newer format from Google offering better compression than JPEG
- HEIF (High Efficiency Image Format) – used in newer iPhones, offers better compression than JPEG
How Does Photo Compression Work?
Photo compression uses a variety of clever ways to reduce file size. Here are a few of them explained in simpler terms:
1. Simplifying Colours
Imagine you have a huge box of crayons with thousands of shades. Photo compression works by converting this box into a smaller one, with fewer crayons, but selected in such a way that you can still draw an almost identical image.
In practice: Instead of describing each pixel with an exact colour (which requires a lot of data), the software groups similar colours together. For example, instead of 50 shades of blue in the sea, it will use the 10 most important shades. The human eye often does not notice this difference, and the file becomes much smaller.
2. Grouping Similar Areas
Think of an image as a jigsaw puzzle. Instead of describing each piece separately, the programme looks for similar pieces and describes them together.
In practice: Instead of describing each pixel of a blue sky separately, the programme says “this whole large area is more or less the same blue colour”. This significantly reduces the amount of information needed to describe the image.
3. Removing Details That Are Not Visible to the Eye
Imagine that you are painting a picture. Up close you can see every brushstroke, but from a distance many small details blend together.
In practice: Compression works similarly, removing details so fine that the human eye wouldn’t notice them anyway from a normal viewing distance. This significantly reduces the file size with no apparent loss of quality for most observers.
4. Using Repeating Patterns
Imagine describing a wallpaper to someone. Instead of describing each element separately, you would say “this is a floral pattern that repeats every 10 cm”.
In practice: Compression software looks for repeating patterns in the image. Instead of saving the same pattern many times, they save it once and the information where it repeats. This is a very effective way to reduce file size, especially in images with regular patterns.
Popular Image Formats
Different file formats use different compression methods. Here are the most popular ones:
JPEG (joint Photographic Experts Group)
JPEG is the most popular format for photos. It uses lossy compression, which means that you can set the level of compression – the higher the compression, the smaller the file, but also the lower the quality.
JPEG advantages:
- Very small file sizes while maintaining good quality
- Great for photos and images with multiple colours
- Supported by virtually all devices and programs
JPEG disadvantages:
- At high compression, visible artefacts may appear
- Does not support transparency
- Not suitable for graphics with sharp edges
PNG (portable Network Graphics)
PNG uses lossless compression and is ideal for graphics with sharp edges, text or logos. It also supports transparent backgrounds, making it a popular choice for web graphics.
Advantages of PNG:
- Lossless compression – can retain 100% quality
- Supports transparency
- Great for graphics, logos and screenshots
Disadvantages of PNG:
- Larger file size than JPEG for photos
- Does not support animation (except in APNG format)
WebP
This is a newer format created by Google. It often produces smaller files than JPEG or PNG while maintaining similar quality, but long-updated browsers may not support it.
Advantages of WebP:
- Better compression than JPEG and PNG
- Supports both lossy and lossless compression
- Supports transparency and animation
Disadvantages of WebP:
- Not supported by all browsers (especially older versions)
- Less popular than JPEG or PNG, which can cause compatibility problems
Effect of Compression on Image Quality
Compression, especially lossy compression, can affect image quality. Here’s what to look out for:
- Blurring – Loss of sharpness and detail. It’s like looking through slightly dirty glass – the overall image is visible, but fine details are less clear.
- Artefacts – Strange patterns or spots, especially visible on solid surfaces. They look like small ‘distortions’ in the image, often visible around sharp edges or in large, uniform areas.
- Posterisation – Smooth colour transitions turn into distinct stripes. It’s like turning an image with millions of colours into one with only a few hundred – the transitions between colours become sharper and more visible.
- Block effect – The image looks like it is divided into small squares. This is often seen in heavily compressed JPEG files, especially on solid surfaces.
The more you compress an image, the more visible these effects can be. It is therefore important to find a balance between file size and acceptable quality. What is ‘acceptable’ depends on the specific application – for example, an image for a magazine cover will require higher quality than a thumbnail on a website.
Image Compression Tools
There are many easy-to-use photo compression tools. Here are some of the most popular:
Online Tools
- TinyPNG – A simple tool for PNG and JPEG compression. Despite the name, it also works with JPEG files. It’s very easy to use – just drag and drop images onto the page.
- Compressor.io – Easy to use for a variety of formats. Allows you to choose between lossy and lossless compression.
- Squoosh – An advanced but friendly tool from Google. Offers multiple compression options and allows real-time ‘before and after’ comparison.
- JPEG-Optimizer – Focuses on JPEG files and allows you to accurately control the level of compression.
- Kraken – Offers both an online version and an API for developers. Supports multiple formats and has optimisation options for web pages.
Applications
- Adobe Photoshop – A professional programme with many options. Has a ‘Save for Web’ feature to help optimise photos for online publication.
- GIMP – A free alternative to Photoshop. Offers advanced compression options and is great for people who don’t want to pay for professional software.
- ImageOptim (for Mac) – Automatically optimises images. Just drag your images into the program and it takes care of the rest.
- FileOptimizer (for Windows) – Supports many file formats, not just images. It is very effective at reducing file size.
- XnView – A comprehensive photo viewing and editing program that also offers compression options.
Tools for Developers
- ImageMagick – A powerful command line tool for manipulating images. Popular with developers for automating image processing.
- MozJPEG – JPEG optimiser from Mozilla. Offers better compression than standard JPEG tools.
- pngquant – Specialises in PNG compression with transparency. Often used in conjunction with other tools.
- sharp – Node.js library for fast image processing, popular for web projects.
Image Compression and Web Speed
Image compression has a huge impact on the speed of websites. Smaller files load faster, which affects many aspects:
- Satisfaction – Nobody likes to wait for a page to load. Studies show that users often abandon a page if it takes longer than a few seconds to load.
- SEO – Google and other search engines take page load speed into account in their ranking algorithms. Faster pages tend to appear higher in search results.
- Conversion – Faster pages often have a higher conversion rate, meaning that more visitors take the desired action (e.g. purchases, newsletter sign-ups).
- Hosting costs – Smaller files mean lower storage and upload costs, which can be significant for sites with high traffic.
- UX of mobile users – For mobile users, especially those with limited data packages, compressed images mean faster loading and less data consumption.
Compression of Images in Practice
Image compression is important in many areas, but how it is applied can vary from industry to industry:
Photography
Photographers have to balance quality and file size. They often use lossless compression for archiving and working on images, and lossy compression for sharing images online or with clients for previewing. The key is to keep the quality as high as possible while creating files that are the right size for their intended use.
E-Commerce
In online shops, product photos need to load quickly but also present them well. Different versions of the same image are often used:
- Small, highly compressed thumbnails for product listings
- Medium versions for the main product view
- Large, less compressed versions for the zoom function
The balance between quality and speed is key to increasing sales.
Graphics and Design
Graphic designers and designers often work on large, uncompressed files to maintain maximum quality during editing. Compression is used at the final stage when a design is being prepared for publication, such as in print or on a website.
10 Good Practices
Here are some tips on how best to compress images:
- Start with good quality – It is impossible to improve the quality of an already compressed image. Always start with the best version available.
- Choose the right format – JPEG for photos, PNG for graphics with sharp edges or transparency, WebP as a modern alternative (if supported).
- Adjust image size – There is no point in uploading a huge image if it will be displayed in a small window. Reduce the image size before compression.
- Experiment with different levels of compression – Find the balance between size and quality. Often a small loss of quality can give a significant reduction in size.
- Use page analysis tools – Tools such as Google PageSpeed Insights can help identify images that are slowing down your site.
- Consider progressive JPEGs – Make the image appearprogressively, which can improve the perception of page load speed.
- Use a CDN (Content Delivery Network) – A CDN can help deliver images faster to users from different locations.
- Automate the compression process – If you have a lot of images, consider using automatic optimisation tools.
- Be mindful of mobile devices – Test how your compressed images look on different devices and internet speeds.
- Review new technologies regularly – The field of image compression is constantly evolving. Keep up to date with new formats and tools.
Remember that image compression is not only a technical matter, but also a bit of a flair. It requires an understanding of both the technical aspects and what looks good to the human eye. With time and practice you will learn to find the perfect balance for your needs.
Implementing effective strategies for image compression, including both lossy and lossy techniques, can significantly enhance the user experience on websites by improving load times and reducing bandwidth usage. By selecting the appropriate compression method based on the context and desired image quality, businesses can ensure that the visual appeal of their content remains intact while optimising performance. As we move forward with technological advancements, staying informed about new formats like WebP or changes in compression practices will further enable efficient image compression. Continuous adaptation not only helps accommodate evolving web standards but also supports maintaining competitive advantages in user engagement and search engine visibility. By prioritising image compression, companies can create more responsive and accessible digital environments for their audiences.
