以前、 Explorer(Explorer) の組み込みの電子メールオプションを使用するか、 Image Resizer for Windowsと呼ばれるデスクトッププログラムを使用して、画像ファイルのサイズを縮小する方法についての記事を書きました。これらは良いオプションですが、画像を最適化する方法は他にもいくつかあります。また、多くのWebサイトでペイント(Paint)を使用するように指示されていますが、画像がかなり悪く見えるため、これは適切な方法ではないことがわかりました。
まず、画像のサイズを縮小するために使用されるいくつかの方法では、画像の品質が低下することを理解することが重要です。これは、Webサイトでは問題ない場合がありますが、印刷では問題ありません。これは通常、画像の解像度を2560×1440から1920×1080に変更した場合に発生します。
画像のサイズを縮小する別の方法は、画像を圧縮することです。圧縮には、可逆圧縮と非可逆圧縮の2つのタイプがあります。可逆(Lossless)圧縮は、元のファイルの1ピクセルを失うことなく、画像のサイズを縮小します。非可逆(Lossy)とは、一部のデータが失われることを意味します。
最後に、画像形式もファイルのサイズに大きな違いをもたらします。カメラから撮影する通常の写真は、圧縮の観点からうまく機能するため、おそらくJPG画像になります。(JPG)ただし、 GIF(GIF)を使用すると、色が少ない（256色以下）画像はかなり小さくなります。PNGは、高度に圧縮できるロスレス形式です。Webグラフィックや複雑な写真に適しています。
この記事では、サイズと品質の違いを確認できるように、複数の形式を使用して画像を圧縮するスクリーンショットを使用していくつかの例を示します。
画像サイズを縮小する方法
品質を損なうことなく画像のサイズを縮小する方法について説明することから始めましょう。これにより、画像の元の品質を維持しながら、最小のファイルが得られます。明らかに、非可逆圧縮を使用すると、以下の例に示すように、ファイルがはるかに小さくなりますが、品質がいくらか失われます。
フォーマットと圧縮
まず、フラットカラーのグラフィックから始めましょう。例として、HDG Webサイト（600×319）のスクリーンショットを撮りました。色が少なく、複雑ではないためです。圧縮なしのさまざまな形式のファイルサイズは次のとおりです。
元のGIF：27 KB
元のJPEG：67 KB
元のPNG：68 KB
ご覧のとおり、PNGファイルとGIFファイルは(GIF)JPEGよりも確実に鮮明です。前述のように、JPEGは写真撮影に適しています。GIFは、 (GIF)PNG（68 KB）と比較してわずか27 KBであるため、ここでうまく機能します。ただし、私の経験では、非可逆圧縮であり、画質が非常に良好である場合、 PNGははるかに圧縮率が高くなります。(PNGs)
3つを可逆圧縮すると、JPG画像とPNG画像だけがサイズが縮小されましたが、それほど大きくはなりませんでした。PNGは45KBになり、JPGは58KBになりました。非可逆圧縮を行ったとき、PNGの数値が最も印象的でした。
不可逆GIF：22 KB
ロッシーJPEG：50 KB
不可逆PNG：23 KB
ご覧のとおり、PNGは見栄えがよく、 (PNG)GIFよりもわずか1KB大きいだけです。そのため、ほとんどのスクリーンショットにこのWebサイトのPNG画像を使用しています。(PNG)JPEGは通常、色の多い写真画像に適しています。ただし、JPGは16ビットのみであるのに対し、PNGは24ビットであるため、JPGは数百万色をサポートしますが、PNGは無制限の色をサポートします。
GIFは5KBしか減少しませんでしたが、同時に多くの品質が失われました。JPGはあまり圧縮されませんでしたが、JPGは(JPGs)通常、PNGほど圧縮されませ(PNGs)ん。
写真アプリを使用して画像の形式を変更し、どのサイズが最小かを確認できます。圧縮については、オンラインツールを使用することをお勧めします。私は個人的に自分のWebサイトにKraken.ioを使用していますが、 (Kraken.io)TinyPNG やOptimilla(Optimizilla)などの他の優れたWebサイトもあります。
画像の解像度を変更する
画像を縮小する主な方法は、画像の解像度を下げることです。4000×2500のファイルがある場合、サイズを2000×1250に減らすと、ファイルのサイズは半分になります。データ内の元の画像の大部分が失われることは明らかですが、目的によっては問題にならない場合があります。
すべての画像編集プログラムには、画像を変更またはサイズ変更する方法があります。ここで、幅/高さまたは解像度を変更できます。これは通常、1インチあたりのドット数（DPI）または1インチあたりのピクセル数（PPI）です。DPIとPPIの違い(difference between DPI and PPI)に関するこのすばらしい記事を読んでください。Web上のあらゆるものについて、ドットではなくピクセルについてのみ心配する必要があります。ドット(Dots)は印刷された画像にのみ影響します。
したがって、たとえば、私のWebサイトには、幅680ピクセルまでの画像しか含めることができません。したがって(Therefore)、アップロードする前に常に画像のサイズを680ピクセル以下に変更します。そうしないと、WordPressによって画像のサイズが680ピクセルに変更されますが、ファイルサイズは必要以上に大きくなります。
72ピクセル/インチの数値とリサンプルオプションについて詳しく知りたい場合は、この優れた投稿(excellent post)をチェックしてください。
色深度/モードの変更
上記の例では、色数が少ない画像の場合、数百万色をサポートする画像形式を使用する必要はありません。私のWebページの例では、GIFは(GIF)インデックス(Indexed)カラーと8ビット/チャネルのみをサポートする必要があります。
RGBカラーと16ビット/チャネルを選択できますが、画像はまったく同じように見えますが、ファイルサイズが大きくなります。これらのカラーモード(colors modes)の詳細については、AdobeのWebサイトを参照してください。Photoshopに加えて、ほとんどの画像エディタでは、画像の色深度/モードを変更することもできます。
クロップ画像
画像のサイズを小さくするもう1つの簡単な方法は、画像を切り抜くことです。切り抜かれたものはすべて画像から完全に削除されます。どんな画像を持っていても、通常は少なくとも少しトリミングすることができます。これは間違いなくサイズを小さくするのに役立ちます。
また、作物は、上/下または左/右から切り取る典型的な作物である必要はないことに注意してください。私のお気に入りの1つであるSnagItEditor(SnagIt Editor)には、画像の中央から水平方向または垂直方向に画像の一部を切り取ることができる切り取りツールがあります。これは、あなたが思っているよりも頻繁に便利です。これは、コマンドの入力中に[スタート(Start)]メニューのスクリーンショットを含める必要がある例です。
上記のファイルサイズは元々22KBでした。それを使う代わりに、下図のように不要だった真ん中の部分を切り取りました。
新しいファイルサイズはわずか9KBです。圧縮を行ったり、ファイル形式を変更したりすることなく、これらすべてを実行できます。圧縮すると、4.4KBになりました。したがって、トリミングは画像のサイズを縮小するための重要な方法です。
うまくいけば、画像のサイズを小さくして、デジタル画像がどのように機能するかについて少し学びました。ご不明な点がございましたら、お気軽にコメントください。楽しみ！
How to Reduce the Size on an Image File
Prevіously, I wrote an artіcle on how to reduce the size of an image fіle using thе built-іn email optiоn in Explorer or by using a deѕktop program called Image Resizer for Windows. These are good options, but there are several other waуs to go about optimizing an image. Also, a lot of websites will tell you to use Paint, bυt I havе found іt’s not a good method because the images look 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!
