之前,我写了一篇关于如何使用资源管理器(Explorer) 中的内置电子邮件选项或使用名为Image Resizer for Windows的桌面程序(Windows)来减小图像文件大小的文章。这些都是不错的选择,但还有其他几种方法可以优化图像。此外,很多网站会告诉你使用Paint,但我发现这不是一个好方法,因为图像看起来更糟。
首先,重要的是要了解一些用于减小图像大小的方法会导致图片质量降低,这对于网站来说可能很好,但不适合打印。这通常发生在您更改图片的分辨率时,例如从 2560×1440 更改为 1920×1080。
减小图像大小的另一种方法是压缩图像。有两种类型的压缩:无损和有损。无损(Lossless)压缩将减小图像的大小,而不会丢失原始文件的单个像素。有损(Lossy)意味着一些数据会丢失。
最后,图片格式对文件大小也有很大影响。您从相机拍摄的普通照片可能是JPG图像,因为它在压缩方面效果很好。但是,如果您使用GIF(GIF),颜色较少(256 色或更少)的图像会小很多。PNG是一种可以高度压缩的无损格式。它适用于网络图形和复杂的照片。
在本文中,我给出了一些使用多种格式压缩图像的屏幕截图示例,以便您查看大小和质量差异。
如何减小图像尺寸
让我们首先讨论如何在不损失质量的情况下减小图像的大小。这将为您提供最小的文件,同时保持图像的原始质量。显然,使用有损压缩会给您提供更小的文件,正如您将在下面的示例中看到的那样,但您会损失一些质量。
格式和压缩
首先,让我们从平面彩色图形开始。作为一个例子,我只是截取了HDG网站(600×319)的截图,因为它的颜色很少,并不复杂。以下是未经任何压缩的不同格式的文件大小:
原始 GIF:27 KB
原始 JPEG:67 KB
原始 PNG:68 KB
如您所见,PNG和GIF文件绝对比JPEG更清晰。如前所述,JPEG更适合摄影。GIF在这里做得很好,因为它只有 27 KB,而PNG是 68 KB。但是,根据我的经验,如果PNG(PNGs)是有损压缩并且图像质量仍然非常好,那么它的压缩效果会更好。
当我对这三者进行无损压缩时,只有JPG和PNG图像的尺寸减小了,但幅度不大。PNG达到 45 KB,而JPG达到(JPG)58 KB。当我进行有损压缩时,PNG的数字是最令人印象深刻的。
有损 GIF:22 KB
有损 JPEG:50 KB
有损 PNG:23 KB
如您所见,PNG看起来最好,它只比GIF大 1 KB !这就是为什么我在这个网站上使用PNG图像来制作我的大部分屏幕截图。JPEG通常总是更适合具有大量颜色的摄影图像。但请记住,JPG只有 16 位,而PNG是 24 位,所以JPG支持数百万种颜色,但PNG支持无限颜色。
GIF只减少了5 KB,但同时质量下降了很多。JPG压缩得不多,但JPG通常(JPGs)不会像PNG(PNGs)那样压缩。
您可以使用照片应用程序更改图像的格式,以查看哪个尺寸最小。对于压缩,我建议使用在线工具,因为它们做得很好。我个人将Kraken.io用于我的网站,但还有其他不错的网站,例如TinyPNG 和Optimizilla。
更改图像分辨率
缩小图像的主要方法是降低图像分辨率。如果您有一个 4000×2500 的文件,那么将大小减小到 2000×1250 将使文件大小减半。您显然会丢失数据中的大量原始图像,但根据您的目的,这可能无关紧要。
每个图像编辑程序都可以让您更改或调整图像大小。您可以在此处更改宽度/高度或分辨率,通常为每英寸点数 ( DPI ) 或每英寸像素数 ( PPI )。阅读这篇关于DPI 和 PPI 之间区别(difference between DPI and PPI)的精彩文章。对于网络上的任何东西,您只需要担心像素,而不是点。点(Dots)只会影响打印的图像。
因此,例如,我的网站最多只能包含 680 像素宽的图像。因此(Therefore),我总是在上传之前将图像的大小调整为 680 像素或更低,否则WordPress会为我将其调整为 680 像素,但文件大小会比它需要的大。
如果您想了解更多关于 72 像素/英寸数字和重采样选项的信息,请查看这篇非常详细的优秀帖子(excellent post)。
更改颜色深度/模式
在上面的示例中,如果您的图像只有几种颜色,那么您不需要使用支持数百万种颜色的图像格式。在我的网页示例中,GIF只需要支持索引(Indexed)颜色和 8 位/通道。
您可以选择RGB颜色和 16 位/通道,但图像看起来完全相同,但文件大小更大。您可以在 Adobe 的网站上阅读有关这些颜色模式的更多信息。(colors modes)除了Photoshop之外,大多数图像编辑器还允许您更改图像的颜色深度/模式。
裁剪图像
另一种减小图像大小的简单方法是简单地裁剪它!任何被裁剪掉的东西都将从图像中完全删除。不管你有什么图像,你通常至少可以裁剪一点,这肯定有助于减小尺寸。
请注意,作物不仅仅必须是从顶部/底部或左侧/右侧切出东西的典型作物。SnagIt Editor是我的最爱之一,它有一个剪切工具,可让您从图像中间水平或垂直剪切部分图像。这比您想象的更方便。这是一个示例,我必须在键入命令时包含“开始”菜单的屏幕截图。(Start)
上述文件大小最初为 22 KB。我没有使用它,而是剪掉了我不需要的中间部分,如下所示。
新文件大小仅为 9 KB!所有这些甚至无需进行任何压缩或更改文件格式。压缩后,我将其压缩到只有 4.4 KB。所以裁剪是减小图像尺寸的重要方式。
希望您减小了图像的大小,并在此过程中了解了数字图像的工作原理!如果您有任何问题,请随时发表评论。享受!
How to Reduce the Size on an Image File
Previously, I wrote an article on how to reduce the size of an image file using the built-in email option in Explorer or by using a desktop program called Image Resizer for Windows. These arе gоod options, but there are several other wаys to go about optіmizing an image. Also, a lot of websites will tell you to use Paint, but I have found it’s not a good method because the images loоk way worse.
Firstly, it’s important to understand that some methods used to reduce the size of an image will result in a lower quality picture, which may be fine for a website, but not for printing. This usually occurs when you change the resolution of a picture, say from 2560×1440 to 1920×1080.
Another way to reduce the size of an image 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 picture format also makes a big difference in the size of the file. A normal picture you take from your camera will probably be a JPG image because that works well in terms of compression. However, images with few colors (256 colors or less) will be a lot smaller if you use GIF. PNG is a lossless format that can be highly compressed. It works well for web graphics and complex photographs.
In this article, I give a few examples with screenshots of compressing an image using multiple formats so you can see the size and quality differences.
How to Reduce Image Size
Let’s start off by talking about how you can reduce the size of the image without losing quality. This will give you the smallest file while keeping the original quality of the image. Obviously, using lossy compression will give you much smaller files, as you’ll see in the examples below, but you’ll lose some quality.
Format & Compression
First, let’s start with a flat color graphic. As an example, I just took a screenshot of the HDG website (600×319) since it has few colors and isn’t complex. Here are the files sizes in the different formats without any compression:
Original GIF: 27 KB
Original JPEG: 67 KB
Original PNG: 68 KB
As you can see, the PNG and GIF files are definitely sharper than the JPEG. As mentioned earlier, JPEG is better for photography. GIF does well here as it’s only 27 KB compared to the PNG, which is 68 KB. However, in my experience, PNGs compress much better if it’s a lossy compression and the image quality is still very good.
When I did a lossless compression of the three, only the JPG and PNG images got reduced in size, but not by much. The PNG went to 45 KB and the JPG went to 58 KB. When I did a lossy compression, the numbers for PNG were the most impressive.
Lossy GIF: 22 KB
Lossy JPEG: 50 KB
Lossy PNG: 23 KB
As you can see, the PNG looks the best and it’s only 1 KB bigger than the GIF! That’s why I use PNG images on this website for most of my screenshots. JPEG will always normally be better for photography images with lots of colors. But remember, JPG is only 16-bit, whereas PNG is 24-bit, so JPG supports millions of colors, but PNG supports unlimited colors.
The GIF only reduced by 5 KB, but at the same time lost a lot of quality. The JPG didn’t compress much, but JPGs normally don’t compress as well as PNGs do.
You can use your photo app to change the format for an image to see which size is 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 out there like TinyPNG and Optimizilla.
Change Image Resolution
The main way to shrink an image is to lower the picture resolution. If you have a file that is 4000×2500, then reducing the size to 2000×1250 will make the file half the size. You’ll obviously be losing a large chunk of the original image in the data, but depending on your purpose, it may not matter.
Every image editing program will have a way for you to change or resize the image. Here you can change the width/height or the resolution, which is normally 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 have to worry about pixels, not dots. Dots will only effect printed images.
So, for example, my website can only have images up to 680 pixels wide. Therefore, I always resize an image to 680 pixels or lower before uploading it because otherwise WordPress will resize it to 680px for me, but the file size will be larger than it needs to be.
If you want to understand more about the 72 pixels/inch number and the resample option, check out this excellent post that goes into great detail.
Change Color Depth/Mode
In the example above, if you have an image with only few colors, then you don’t need to use an image format that supports millions of colors. In my webpage example, the GIF only needs to support Indexed color and 8 bits/channel.
You can choose RGB color and 16 bits/channel, but the image would look exactly the same, but have a larger file size. You can read more about these colors modes on Adobe’s website. In addition to Photoshop, most image editors also let you change the color depth/mode for an image.
Crop Image
Another easy way to reduce the size of an image is to simply crop it! Anything that is cropped out will be completed removed from the image. No matter what image you have, you can normally crop it a little bit at least, which will definitely help reduce the size.
And note that a crop doesn’t just have to be the typical one where you cut out stuff from the the top/bottom or left/right. SnagIt Editor, one of my favorites, has a cut out tool that lets you cut out parts of images from the middle of an image horizontally or vertically. This comes in handy way more often than you would think. Here’s an example where I have to include a screenshot of the Start menu while typing a command.
The above file size was originally 22 KB in size. Instead of using that, I cut out the middle portion, which I didn’t need as shown below.
The new file size is just 9 KB! All that without even doing any compression or changing the file format. Once I compressed it, I got it down to only 4.4 KB. So cropping is an important way to reduce the size of an image.
Hopefully, you reduced the size of your image and learned a little bit about how digital images work along the way! If you have any questions, feel free to comment. Enjoy!