이전에 Explorer(Explorer) 의 기본 제공 이메일 옵션을 사용하거나 Windows 용 Image Resizer 라는 데스크톱 프로그램을 사용 하여 이미지 파일의 크기를 줄이는 방법 에 대한 기사를 작성했습니다 . 이것들은 좋은 옵션이지만 이미지를 최적화하는 몇 가지 다른 방법이 있습니다. 또한 많은 웹 사이트에서 Paint 를 사용하도록 지시 하지만 이미지가 더 나빠 보이기 때문에 좋은 방법이 아니라는 것을 알았습니다.
첫째, 이미지 크기를 줄이는 데 사용되는 몇 가지 방법으로 인해 사진 품질이 낮아져 웹사이트에는 문제가 없지만 인쇄에는 적합하지 않다는 점을 이해하는 것이 중요합니다. 이것은 일반적으로 사진의 해상도를 2560×1440에서 1920×1080으로 변경할 때 발생합니다.
이미지의 크기를 줄이는 또 다른 방법은 이미지를 압축하는 것입니다. 압축에는 무손실 및 손실의 두 가지 유형이 있습니다. 무손실(Lossless) 압축은 원본 파일의 단일 픽셀을 잃지 않고 이미지 크기를 줄입니다. Lossy 는 일부 데이터가 손실됨을 의미합니다.
마지막으로 그림 형식도 파일 크기에 큰 차이를 만듭니다. 카메라에서 찍은 일반 사진 은 압축 측면에서 잘 작동하기 때문에 아마도 JPG 이미지일 것입니다. (JPG)그러나 GIF(GIF) 를 사용하면 색상이 적은(256색 이하) 이미지가 훨씬 작아집니다 . PNG 는 고도로 압축할 수 있는 무손실 형식입니다. 웹 그래픽 및 복잡한 사진에 적합합니다.
이 기사에서는 크기와 품질 차이를 확인할 수 있도록 여러 형식을 사용하여 이미지를 압축하는 스크린샷과 함께 몇 가지 예를 제공합니다.
이미지 크기를 줄이는 방법
품질을 잃지 않고 이미지 크기를 줄이는 방법에 대해 이야기하면서 시작하겠습니다. 이렇게 하면 이미지의 원본 품질을 유지하면서 가장 작은 파일을 얻을 수 있습니다. 분명히 손실 압축을 사용하면 아래 예에서 볼 수 있듯이 훨씬 작은 파일을 얻을 수 있지만 품질은 약간 떨어집니다.
형식 및 압축
먼저 플랫 컬러 그래픽부터 시작하겠습니다. 예를 들어 HDG(HDG) 웹사이트(600×319)는 색상이 적고 복잡하지 않기 때문에 스크린샷을 찍었습니다 . 압축하지 않은 다양한 형식의 파일 크기는 다음과 같습니다.
원본 GIF: 27KB
원본 JPEG: 67KB
원본 PNG: 68KB
보시다시피 PNG 및 GIF 파일은 JPEG 보다 확실히 선명합니다 . 앞서 언급했듯이 JPEG 는 사진에 더 좋습니다. GIF 는 68KB인 (GIF)PNG 에 비해 27KB에 불과하기 때문에 여기에서 잘 작동합니다 . 그러나 내 경험상 PNG(PNGs) 는 손실 압축이고 이미지 품질이 여전히 매우 좋은 경우 훨씬 더 잘 압축됩니다.
세 가지의 무손실 압축을 수행했을 때 JPG 및 PNG 이미지만 크기가 줄어들었지만 많이 줄어들지는 않았습니다. PNG 는 45KB , JPG 는 58KB로 이동했습니다. 손실 압축을 수행했을 때 PNG 의 숫자 가 가장 인상적이었습니다.
손실 GIF: 22KB
손실 JPEG: 50KB
손실 PNG: 23KB
보시다시피 PNG 가 가장 잘 보이고 (PNG)GIF 보다 1KB만 더 큽니다 ! 그래서 이 웹사이트에서 대부분의 스크린샷에 PNG 이미지를 사용합니다. (PNG)JPEG 는 일반적으로 색상이 많은 사진 이미지에 더 좋습니다. 그러나 JPG 는 16비트인 반면 PNG 는 24비트이므로 JPG 는 수백만 가지 색상을 지원하지만 PNG 는 무제한 색상을 지원합니다.
GIF 는 5KB만 줄어들었지만 동시에 품질이 많이 떨어졌습니다. JPG 는 많이 압축되지 않았지만 JPG(JPGs) 는 일반적으로 PNG(PNGs) 만큼 압축되지 않습니다 .
사진 앱을 사용하여 이미지 형식을 변경하여 어떤 크기가 가장 작은지 확인할 수 있습니다. 압축의 경우 온라인 도구가 훌륭하게 수행되므로 사용하는 것이 좋습니다. 저는 개인적으로 웹사이트에 Kraken.io 를 사용하지만 (Kraken.io)TinyPNG 및 Optimizilla 와 같은 다른 좋은 것들이 있습니다 .
이미지 해상도 변경
이미지를 축소하는 주요 방법은 이미지 해상도를 낮추는 것입니다. 파일 크기가 4000×2500인 경우 크기를 2000×1250으로 줄이면 파일 크기가 절반이 됩니다. 분명히 데이터에서 원본 이미지의 많은 부분이 손실되지만 목적에 따라 중요하지 않을 수 있습니다.
모든 이미지 편집 프로그램에는 이미지를 변경하거나 크기를 조정할 수 있는 방법이 있습니다. 여기에서 일반적으로 인치당 도트 수( DPI(DPI) ) 또는 인치당 픽셀 수( PPI ) 인 너비/높이 또는 해상도를 변경할 수 있습니다 . DPI와 PPI의 차이점(difference between DPI and PPI) 에 대한 이 훌륭한 기사를 읽으십시오 . 웹상의 모든 것에서는 점이 아니라 픽셀에 대해서만 걱정하면 됩니다. 점(Dots) 은 인쇄된 이미지에만 영향을 미칩니다.
예를 들어, 내 웹사이트는 최대 680픽셀 너비의 이미지만 가질 수 있습니다. 따라서(Therefore) 업로드하기 전에 항상 680픽셀 이하로 이미지 크기를 조정합니다. 그렇지 않으면 WordPress 에서 680픽셀 로 크기를 조정하지만 파일 크기는 필요한 것보다 커질 것이기 때문입니다.
72픽셀/인치 수와 리샘플링 옵션에 대해 더 자세히 알고 싶다면 이 훌륭한 게시물(excellent post) 에서 자세히 살펴보세요.
색 농도/모드 변경
위의 예에서 몇 가지 색상만 있는 이미지가 있는 경우 수백만 가지 색상을 지원하는 이미지 형식을 사용할 필요가 없습니다. 내 웹 페이지 예에서 GIF 는 (GIF)인덱스(Indexed) 색상과 8비트/채널 만 지원하면 됩니다 .
RGB 색상과 16비트/채널 을 선택할 수 있지만 이미지는 완전히 동일하게 보이지만 파일 크기는 더 큽니다. 이러한 색상 모드(colors modes) 에 대한 자세한 내용은 Adobe 웹 사이트에서 확인할 수 있습니다. Photoshop 외에도 대부분의 이미지 편집기를 사용하여 이미지의 색상 깊이/모드를 변경할 수 있습니다.
이미지 자르기
이미지 크기를 줄이는 또 다른 쉬운 방법은 단순히 자르는 것입니다! 잘려진 모든 것은 이미지에서 완전히 제거됩니다. 어떤 이미지를 가지고 있든 일반적으로 최소한 약간 자를 수 있습니다. 그러면 크기를 줄이는 데 확실히 도움이 됩니다.
그리고 자르기는 위/아래 또는 왼쪽/오른쪽에서 물건을 잘라내는 일반적인 작물일 필요는 없습니다. 내가 즐겨 사용하는 것 중 하나인 SnagIt Editor(SnagIt Editor) 에는 이미지 중간에서 가로 또는 세로로 이미지의 일부를 잘라낼 수 있는 잘라내기 도구가 있습니다. 이것은 당신이 생각하는 것보다 더 자주 편리한 방법으로 옵니다. 다음은 명령을 입력하는 동안 시작(Start) 메뉴 의 스크린샷을 포함해야 하는 예 입니다.
위의 파일 크기는 원래 22KB였습니다. 그것을 사용하는 대신 아래 그림과 같이 필요하지 않은 중간 부분을 잘라 냈습니다.
새 파일 크기는 9KB입니다! 압축을 하거나 파일 형식을 변경하지 않고도 이 모든 작업을 수행할 수 있습니다. 압축을 하면 겨우 4.4KB로 줄어들었습니다. 따라서 자르기는 이미지 크기를 줄이는 중요한 방법입니다.
이미지 크기를 줄이고 디지털 이미지가 작동하는 방식에 대해 조금 배웠기를 바랍니다! 질문이 있으시면 언제든지 댓글을 남겨주세요. 즐기다!
How to Reduce the Size on an Image File
Previously, I wrоte an article on how to reduce thе size of an imаge file using the built-in emaіl option in Explorer or by using a desktop program cаlled Image Resizer for Windоws. These аre good options, but there arе several other ways to go about optimizing an image. Also, a lot of websites will tell you to use Paint, bυt I have found it’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!
