6장. 김프에서 이미지 내보내기

차례

1. 웹용 이미지 만들기
1.1. 이미지의 최적 크기 및 화질 비율
1.2. 파일 크기 조금 더 줄이기
1.3. 투명한 부분이 있는 이미지 저장하기
<xi:include></xi:include>

1. 웹용 이미지 만들기

One of the most common uses for GIMP, is to prepare images for web sites. This means that images should look as nice as possible while keeping the file size as small as possible. This step-by-step guide demonstrates how to create small files with minimal loss of image quality.

1.1. 이미지의 최적 크기 및 화질 비율

An optimal image for the web depends upon the image type and the file format. Use JPEG for Photographs because they usually have many colors and great detail. An image with fewer colors, such as a button, icon, or screenshot, is better suited to the PNG format.

  1. 먼저 이미지를 엽니다. 여기서는 윌버 그림을 예제로 사용하였습니다.

    그림 6.1. RGBA 모드로 열린 윌버 그림

    RGBA 모드로 열린 윌버 그림

  2. 위 이미지는 알파 채널이 추가된 RGB 모드(RGBA)로 되어 있습니다. 하지만 일반적으로 웹이미지에는 알파채널이 필요 없습니다. 따라서 배경으로 합치기를 통해 알파채널을 없애도 됩니다.

    A photograph rarely has an alpha channel, so the image will open in RGB mode rather than RGBA mode; and you won't have to remove the alpha channel.

    [참고] 참고

    If the image has a soft transition into the transparent areas, you should not remove the alpha channel, since the information used for the transition is not be saved in the file. To save an image with transparent areas that do not have a soft transition, (similar to GIF), remove the alpha channel.

  3. After you have flattened the image, save the image in the PNG format for your web site.

[참고] 참고

You can save your image in the PNG format with the default settings. Always using maximum compression when creating the image. Maximum compression has no affect on image quality or the time required to display the image, but it does take longer to save. A JPEG image, however, loses quality as the compression is increased. If your image is a photograph with lots of colors, you should use jpeg. The main thing is to find the best tradeoff between quality and compression. You can find more information about this topic in ???.

1.2. 파일 크기 조금 더 줄이기

If you want to reduce the size of your image a bit more, you could convert your image to Indexed mode. That means that all of the colors will be reduced to only 256 values. Do not convert images with smooth color transitions or gradients to indexed mode, because the original smooth gradients are typically converted into a series of bands. Indexed mode is not recommended for photographs because after the conversion, they typically look coarse and grainy.

그림 6.2. 인덱스 이미지

인덱스 이미지

An indexed image can look a bit grainy. The left image is Wilber in its original size, the right image is zoomed in by 300 percent.


  1. Use the command described in 6.3절. “Mode” to convert an RGB image to indexed mode.

  2. After you convert an image to indexed mode, you are once again able to save the image in PNG format.

1.3. 투명한 부분이 있는 이미지 저장하기

There are two different approaches used by graphic file formats for supporting transparent image areas: simple binary transparency and alpha transparency. Simple binary transparency is supported in the GIF format; one color from the indexed color palette is marked as the transparent color. Alpha transparency is supported in the PNG format; the transparency information is stored in a separate channel, the Alpha channel.

[참고] 참고

The GIF format is rarely used because PNG supports all the features of GIF with additional features (e.g., alpha transparency). Nevertheless, GIF is still used for animations.

절차 6.1. 알파 투명도를 가진 이미지 만들기

  1. 여기에서도 전 과정과 마찬가지로 김프 마스코트인 윌버 이미지를 예제로 사용합니다.

    그림 6.3. RGBA 모드로 열린 윌버 그림

    RGBA 모드로 열린 윌버 그림

  2. To save an image with alpha transparency, you must have an alpha channel. To check if the image has an alpha channel, go to the channel dialog and verify that an entry for Alpha exists, besides Red, Green and Blue. If this is not the case, add a new alpha channel from the layers menu; Layer+TransparencyAdd Alpha Channel.

  3. The original XCF file contains background layers that you can remove. GIMP comes with standard filters that supports creating gradients; look under Filters+Light and Shadow. You are only limited by your imagination. To demonstrate the capabilities of alpha transparency, a soft glow in the background around Wilber is shown.

  4. 모든 작업을 완료하였으면 PNG 포맷 으로 저장합니다.

그림 6.4. 투명한 부분이 포함된 윌버 그림

투명한 부분이 포함된 윌버 그림

배경 레이어에 있는 회색의 체크 무늬는 이미지의 투명한 영역을 표시하며, 김프로 작업하는 동안에 보여집니다.