I previously wrote an article about reducing image file size using Explorer’s built-in email option 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 will tell you to use Paint, but I’ve found that’s not a good method because the images look a lot worse.
First, it’s important to understand that some of the methods used to reduce image size will result in a degradation of image quality, which may be good for a web page but not for print. This usually happens when you change the image resolution from 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 image size without losing a single pixel of the original file. Loss means that some data will be lost.
Finally, the image format also has a big impact on the file size. A normal photo taken by the camera will probably be a JPG image because it does well in terms of compression. However, images with few colors (256 colors or less) will be much smaller if you use GIF. PNG is a lossless format that can be highly compressed. It works well for web graphics and complex photos.
In this article, I provide some examples with screenshots of compressing an image in multiple formats, so you can see the differences in size and quality.
How to reduce image size
Let’s start with how you can reduce the image size without losing quality. This will give you the smallest file while maintaining the original image quality. Of course, using lossy compression will give you much smaller files as you’ll see in the examples below, but you’ll lose some quality.
format and compression
First, let’s start with a flat, colorful graphic. As an example, I just took a screenshot of the HDG website (600×319) because it has several colors and is not complicated. These are the file sizes in various uncompressed formats:
Original GIF: 27KB
Original JPEG: 67KB
Original PNG: 68 KB
As you can see, PNG and GIF files are definitely sharper than JPEG files. As mentioned earlier, JPEG is better for photography. GIF is good here because it is only 27KB compared to PNG which is 68KB. However, in my experience, PNG compresses much better if the compression is lossy, and the image quality is still very good.
When I did a lossless compression of three, only the JPG and PNG images were reduced in size, but not by much. PNG was 45 KB and JPG 58 KB. When I did lossy compression, the PNG numbers were the most impressive.
Lossy GIF: 22 KB
Lossy JPEG: 50 KB
Lossy PNG: 23 KB
As you can see, the PNG file looks the best and is only 1 KB larger than the GIF! That’s why I use PNG images on this page for most of my screenshots. JPEG will always be better for images with lots of colors. But remember, JPG is only 16-bit while PNG is 24-bit, so JPG supports millions of colors, but PNG supports an unlimited number of colors.
The GIF shrunk by only 5 KB, but at the same time lost a lot of quality. The JPG didn’t compress much, but JPGs tend not to compress as well as PNGs.
You can use photo apps to resize the image to see which size is the smallest. For compression I recommend using online tools as they do a great job. I personally use Kraken.io for my websites, but there are other good ones like TinyPNG and Optimizilla.
Change the image resolution
The main way to reduce image size is to reduce the image resolution. If you have a 4000×2500 file, downsizing to 2000×1250 will make the file half the size. Of course, you’ll lose a lot of the original image in the data, but depending on your purpose, that might not matter.
Any image editing program will have a way to resize or resize an image. Here you can change the width/height or the resolution, which is usually in dots per inch (DPI) or pixels per inch (PPI). Read this great article on the difference between DPI and PPI. Anything on the web, you have to worry about pixels, not dots. Dots will only print images.
For example, my page can only have images with a maximum width of 680 pixels. That’s why I always resize the image to 680px or smaller before I upload it because otherwise WordPress will resize it to 680px but the file size will be larger than it should be.
If you want to learn more about the 72 ppi number and resampling options, check out this great post that goes into more detail.
Change color depth/mode
In the example above, if you have an image that contains only a few colors, you don’t need to use an image format that supports millions of colors. In my example page, the GIF should only support indexed color and 8 bits per channel.
You can choose RGB color and 16 bit/channel, but the image will look exactly the same but have a larger file size. You can read more about these color modes on the Adobe website. Along with Photoshop, most image editors also allow you to change the depth/color mode of an image.
Cut out the photo
Another easy way to reduce image size is simply cropping! Anything that is cropped will be removed from the image. Whatever image you have, you can at least crop it, which will certainly help reduce its size.
Note that the cropping does not have to be typical when cutting up/down or left/right. SnagIt Editor, one of my favorites, has a crop tool that allows you to crop parts of images from the center of the image horizontally or vertically. This is useful much more often than you think. Here is an example where I need to include a screenshot of the start menu while typing a command.
The upper file size was originally 22 KB. Instead, I cut out the center section that I didn’t need as shown below.
The new file size is only 9KB! All without compressing or changing the file format. When I compressed it, I only got 4.4 KB. So, cropping is an important way to reduce image size.
Hopefully you’ve shrunk your image and learned something about how digital images work along the way! If you have questions, you can comment them. To enjoy!