I previously wrote an article on how to reduce the size of an image file using the built-in email feature in File Explorer or using a desktop program called Image Resizer for Windows. These are good options, but there are several other ways to optimize your image. Also, many websites recommend that you use Paint, but I found that this is not the best method because the images look worse.
First, it is important to understand that some of the techniques used to reduce image size result in degraded image quality, which may work for a website, but not for printing. This usually happens when you change the image resolution from, say, 2560 × 1440 to 1920 × 1080.
Another way to reduce image size is to compress the image. There are two types of compression: lossless and lossy. Lossless compression will reduce the size of the image without losing a single pixel of the original file. Lossy means that some data will be lost.
Finally, the aspect ratio also matters a lot for the file size. The normal image you take from the camera will probably be a JPG image because it works well in terms of compression. However, images with few colors (256 colors or less) will be much smaller if you are using GIFs. PNG is a lossless format that can be highly compressed. It works well for web graphics and complex photographs.
In this article, I will provide some examples with screenshots of image compression using multiple formats so that you can see the difference in size and quality.
– /
How to reduce the size of the image
Let’s start by talking about how to reduce image size without losing quality. This will give you the smallest file while maintaining the original image quality. Obviously, using lossy compression will give you much smaller files, as you will see in the examples below, but you will lose some quality.
Format and Compression
Coordination and pressure
First, let’s start with a flat color image. As an example, I just took a screenshot of the HDG website (600 × 319) as it has few colors and is not complex. Here are the file sizes in different formats without compression:
Original GIF: 27KB
Original GIF: 27 KB
Original JPEG: 67 KB
Original JPEG: 67 KB
Original PNG: 68KB
Original PNG: 68 KB
As you can see, PNG and GIF files are definitely sharper than JPEGs. As mentioned earlier, JPEG is better for photography. GIF is good here as it is only 27KB compared to PNG, which is 68KB. However, in my experience, PNGs are compressed much better if it is lossy and the image quality remains very good.
When I did a lossless compression of the three, only the JPG and PNG images were downsized, but not much. PNG has grown to 45KB and JPG has grown to 58KB. When I did the lossy compression, the numbers for PNG were the most impressive.
Lossy GIF: 22KB
Lost GIF: 22 KB
JPEG lossy: 50 KB
JPEG loss: 50 KB
PNG Lossy: 23KB
Lossy PNG: 23 KB
As you can see, PNG looks the best and is only 1KB larger than GIF! This is why I use PNG images on this website for most of my screenshots. JPEG is always better for photos with a lot of colors. But remember that JPG is only 16-bit and PNG is 24-bit, so JPG supports millions of colors and PNG supports unlimited colors.
GIF was reduced by only 5KB, but at the same time it lost a lot of quality. JPG doesn’t compress much, but JPG doesn’t usually compress as much as PNG does.
You can use your photo app to change the aspect ratio to find out which size is the smallest. For compression, I recommend using the online tools as they do their job well. I personally use Kraken.io for my sites, but there are other good ones like TinyPNG and Optimizilla
Change image resolution
Change the image resolution
The main way to reduce the image is to reduce the image resolution. If you have a 4000 × 2500 file, then reducing the size to 2000 × 1250 will halve it. Obviously, you will lose most of the original image in the data, but depending on your purpose, this may not matter.
Every image editing program has the ability to resize or resize an image. Here you can change the width / height or resolution, which is usually dots per inch (DPI) or pixels per inch (PPI). Read this great article on the difference between DPI and PPI For anything on the web, you only need to worry about pixels, not dots. Dots only affect printed images.
So, for example, my website can only have images up to 680px wide. So I always resize the image to 680px or lower before uploading it, because otherwise WordPress will resize it to 680px for me, but the file size will be larger than necessary.
If you want to know more about 72 ppi and resampling options, check out this excellent post that goes into great detail.
Change color depth / mode
Change color depth / mode
In the example above, if you have an image with few colors, you don’t need to use an image format that supports millions of colors. In my example webpage, GIF should only support indexed color and 8 bits per channel.
You can choose RGB color and 16 bpc, but the image will look exactly the same, but with a larger file size. You can learn more about these color modes on the Adobe website. Besides Photoshop, most image editors also allow you to change the depth / color mode of an image.
Crop image
Cut the picture
Another easy way to reduce the size of an image is to simply crop it! Anything that is cropped will be completely removed from the image. Whatever image you have, you can crop it a bit, which will definitely help reduce the size.
And note that cropping doesn’t have to be typical, where you cut material from the top / bottom or left / right. SnagIt Editor, one of my favorites, has a cutout tool that lets you cut out parts of an image from the middle of an image, horizontally or vertically. This may come in handy more often than you think. Here’s an example where I need to add a screenshot of the Start menu when I enter a command.
The original size of the specified file was 22KB. Instead, I cut out the middle part, which I don’t need, as shown below.
The new file size is only 9 KB! And all this without even compressing or changing the file format. After compressing, I shrunk it down to 4.4KB. So cropping is an important way to reduce image size.
Hopefully you’ve reduced the size of the image and learned a little about how digital images work! If you have any questions, do not hesitate to comment. Enjoy!
–