이미지 및 애니메이션 처리된 GIF에 대한 최적화 옵션

웹 그래픽 포맷에는 비트맵(래스터) 또는 벡터가 있습니다. 비트맵 포맷(GIF, JPEG 및 WBMP)은 해상도의 영향을 받는 포맷입니다. 즉, 비트맵 이미지의 크기와 이미지 품질이 모니터 해상도에 따라 변합니다. 벡터 형식(SVG 및 SWF)은 해상도의 영향을 받지 않는 형식이므로 크기를 늘리거나 줄여도 이미지 품질이 저하되지 않습니다. 벡터 형식에 래스터 데이터가 포함될 수도 있습니다. 

JPEG 최적화 옵션

JPEG는 사진과 같은 연속적인 톤의 이미지를 압축하는 표준 형식입니다. 이미지를 JPEG 형식으로 최적화하면 데이터를 선택적으로 버리는 손실 압축을 활용합니다.

압축 수준을 결정합니다. [품질] 설정이 높을수록 압축 알고리즘이 세부 정보를 더 많이 보존합니다. 그러나 높은 [품질] 설정을 사용하면 낮은 [품질] 설정을 사용할 때보다 파일 크기가 커집니다. 최적화된 이미지를 여러 품질 설정에서 보고 품질과 파일 크기의 가장 적절한 균형을 찾는 것이 좋습니다.

파일 크기가 약간 작은 향상된 JPEG를 만듭니다. 파일을 최대한 압축하려면 [최적화된 JPEG] 형식을 사용하는 것이 좋지만 일부 이전 버전의 브라우저에서는 이 기능을 지원하지 않습니다.

웹 브라우저에서 점진적으로 이미지를 표시합니다. 이미지가 일련의 오버레이로 나타나므로 이미지가 완전히 다운로드되기 전에 저해상도 버전을 확인할 수 있습니다. [점진적] 옵션을 사용하려면 [최적화된 JPEG] 형식을 사용해야 합니다.

 점진적 JPEG를 표시하는 데는 RAM이 더 많이 필요하며 점진적 JPEG를 지원하지 않는 브라우저도 있습니다.

이미지에 적용할 흐림의 양을 지정합니다. 이 옵션을 사용하면 [가우시안 흐림 효과] 필터와 동일한 효과가 적용되며, 파일을 더 많이 압축할 수 있어 파일 크기가 더 작아집니다. 0.1에서 0.5 사이로 설정하는 것이 좋습니다.

최적화된 파일의 색상 프로필을 유지합니다. 일부 브라우저에서는 색상 교정에 색상 프로필을 사용합니다.

원본 이미지에서 투명했던 픽셀의 칠 색상을 지정합니다. [매트] 색상 견본을 클릭하여 색상 피커에서 색상을 선택하거나, [매트] 메뉴에서 [스포이드 색상](스포이드 샘플 상자의 색상을 사용하려는 경우), [전경색], [배경색], [흰색], [검정] 또는 [기타](색상 피커를 사용하려는 경우) 옵션 중 하나를 선택합니다.

원본 이미지에서 완전히 투명한 픽셀은 선택한 색상으로 칠해지고, 원본 이미지에서 부분적으로 투명한 픽셀은 선택한 색상과 혼합됩니다.

GIF 및 PNG-8 최적화 옵션

GIF는 선화, 로고 또는 문자를 사용한 일러스트와 같이 밋밋한 색상과 선명한 디테일이 있는 이미지를 압축하는 표준 형식입니다. PNG-8 형식은 GIF 형식과 마찬가지로 선명한 세부 묘사를 유지하면서 단색 영역을 효율적으로 압축합니다.

PNG-8 및 GIF 파일은 8비트 색상을 지원하므로 최대 256가지 색상을 표시할 수 있습니다. 사용할 색상을 결정하는 과정을 색인화라고 하므로 GIF 및 PNG-8 형식의 이미지를 때때로 색인화 색상 이미지라고 부릅니다. 이미지를 색인화 색상으로 변환하려면 이미지의 색상을 저장하고 색인화하는 색상 검색 테이블이 만들어져야 합니다. 원본 이미지의 색상이 색상 검색 테이블에 나타나지 않으면 애플리케이션이 테이블에서 가장 가까운 색상을 선택하거나 사용 가능한 색상 조합을 사용하여 색상을 시뮬레이션합니다.

다음 옵션을 사용할 수 있을 뿐 아니라 이미지 색상표의 색상 수를 조정할 수도 있습니다.

선택적으로 데이터를 삭제하여 파일 크기를 줄입니다. 손실 설정이 높을수록 더 많은 데이터가 삭제됩니다. 이미지 품질 저하 없이 손실 값을 5-10까지 적용할 수도 있고 최대 50까지 적용할 수도 있습니다. 손실 옵션을 사용하면 파일 크기를 5%에서 40%까지 줄일 수 있습니다.

 [손실] 옵션은 [인터레이스] 옵션이나 [노이즈] 또는 [패턴 디더] 알고리즘과 함께 사용할 수 없습니다.

색상 검색 테이블을 생성하는 방법과 색상 검색 테이블에서 사용할 색상 수를 지정합니다. 다음 색상 감소 방법 중 하나를 선택할 수 있습니다.

가시 범위 사람의 눈으로 감지하기 쉬운 색상을 우선하여 사용자 정의 색상표를 만듭니다.

고감도 [가시 범위] 색상표와 비슷하지만 넓은 색상 영역을 포괄하고 웹 색상을 유지하는 색상표를 만듭니다. 이 색상표는 일반적으로 색상 무결성이 가장 뛰어난 이미지를 생성합니다. 선택적 옵션이 기본값입니다.

주 색상 해당 이미지에 가장 흔히 나타나는 스펙트럼에서 색상을 샘플링하여 사용자 정의 색상표를 만듭니다. 예를 들어 녹색과 청색만 있는 이미지는 주로 녹색과 청색으로 구성된 색상표가 생성됩니다. 대부분의 이미지는 스펙트럼의 특정 영역에서 색상을 집중시킵니다.

제한 범위(웹) Windows와 Mac OS 8비트(256색) 팔레트에 일반적으로 사용하는 표준 216색 색상표를 사용합니다. 이 옵션을 사용하면 8비트 색상을 사용하여 이미지를 표시할 때 색상에 브라우저 디더가 적용되지 않습니다. 이 팔레트는 웹 적합 팔레트라고도 합니다. 웹 팔레트를 사용하면 더 큰 파일을 만들 수 있으므로, 브라우저 디더를 피하는 것이 최우선 순위일 때만 사용하는 것이 좋습니다.

사용자 정의 사용자가 만들거나 수정한 색상 팔레트를 사용합니다. 기존의 GIF 또는 PNG-8 파일을 열면 사용자 정의 색상 팔레트가 나타납니다.

 [웹 및 디바이스용으로 저장] 대화 상자의 [색상표] 팔레트를 사용하여 색상 검색표를 사용자 정의할 수 있습니다.

흑백, 회색 음영, Mac OS, Windows 색상 팔레트를 사용합니다.

애플리케이션 디더링의 방법과 양을 결정합니다. 디더링은 컴퓨터의 색상 표시 시스템에서 사용할 수 없는 색상을 시뮬레이트하는 방법을 말합니다. 디더링 비율이 높을수록 이미지에 더 많은 색상과 세부 묘사가 만들어지지만 파일 크기가 커질 수 있습니다. 최적의 압축을 위해 필요한 색상 세부 사항을 제공하는 가장 낮은 비율의 디더를 사용합니다. 단색이 주가 되는 이미지는 디더가 없어도 잘 작동합니다. 연속 톤 색상(특히 색상 그레이디언트)이 있는 이미지는 색상 밴딩을 방지하기 위해 디더링이 필요할 수 있습니다.

다음 디더링 방법 중 하나를 선택할 수 있습니다.

확산 일반적으로 [패턴] 디더보다 눈에 잘 띄지 않는 임의 패턴을 적용하며 디더 효과가 인접 픽셀로 확산됩니다.

패턴 하프톤과 비슷한 정사각형 패턴을 적용하여 색상표에 없는 모든 색상을 시뮬레이트합니다.

노이즈 [확산] 디더 방법과 유사한 임의 패턴을 적용하지만 인접 픽셀로 패턴이 확산되지 않습니다. [노이즈] 디더 방법을 사용하면 경계가 나타나지 않고 매끄럽게 연결됩니다.

이미지의 투명한 픽셀을 최적화하는 방법을 결정합니다.

• 완전히 투명한 픽셀을 투명하게 만들고 부분적으로 투명한 픽셀을 색상과 혼합하려면 [투명도]를 선택하고 매트 색상을 선택합니다.

• 완전히 투명한 픽셀을 색상으로 칠하고 부분적으로 투명한 픽셀을 동일한 색상과 혼합하려면 매트 색상을 선택하고 [투명도]의 선택을 해제합니다.

• 매트 색상을 선택하려면 [매트] 색상 견본을 클릭하고 색상 피커에서 색상을 선택합니다. 또는 [매트] 메뉴에서 [스포이드 색상](스포이드 샘플 상자의 색상을 사용하려는 경우), [전경색], [배경색], [흰색], [검정] 또는 [기타](색상 피커를 사용하려는 경우) 옵션 중 하나를 선택합니다.

 [전경색] 및 [배경색] 옵션은 Photoshop에서만 사용할 수 있습니다.

A. 원본 이미지 B. 매트 색상과 투명도 함께 선택 C. 매트 없이 투명도 선택 D. 매트가 있고 투명도는 선택 해제

[투명도] 옵션을 선택하면 부분적으로 투명한 픽셀을 디더링할 방법을 선택할 수 있습니다.

• [투명 디더 없음]은 이미지의 부분적으로 투명한 픽셀에 디더를 적용하지 않습니다.

• [확산 투명 디더]는 일반적으로 [패턴] 디더보다 눈에 잘 띄지 않는 임의 패턴을 적용하며 디더 효과가 인접 픽셀로 확산됩니다. 이 알고리즘을 선택하는 경우, 이미지에 적용되는 디더링의 양을 제어하기 위해 [디더] 비율을 지정합니다.

• [패턴 투명 디더]는 부분적으로 투명한 픽셀에 하프톤과 비슷한 정사각형 패턴을 적용합니다.

• [노이즈 투명도 디더]는 [확산] 알고리즘과 유사한 무작위 패턴을 적용하지만 인접 픽셀로 패턴이 확산되지 않습니다. [노이즈] 알고리즘을 사용하면 경계가 나타나지 않고 매끄럽게 연결됩니다.

전체 이미지 파일이 다운로드되는 동안 브라우저에 저해상도로 표시합니다. 인터레이스를 사용하면 다운로드 시간이 단축된 느낌을 주고 보는 사람이 다운로드가 진행되고 있다는 것을 알 수 있습니다. 그러나 인터레이스는 파일 크기를 증가시키기도 합니다.

색상을 가장 근접한 웹 팔레트 색상으로 이동하기 위한 허용치 레벨을 지정하고 브라우저에서 색상이 디더링되지 않도록 합니다. 값이 높을수록 더 많은 색상이 변경됩니다.

GIF 및 PNG 이미지에서 투명도 최적화

투명도를 이용해 웹용으로 사각형이 아닌 이미지를 만들 수 있습니다. 배경 투명도는 이미지의 투명 픽셀을 보존합니다.

이 경우 이미지의 투명 영역을 통해 웹 페이지의 배경을 볼 수 있습니다. 배경 매트는 웹 페이지 배경과 일치될 수 있는 매트 색상으로 투명 픽셀을 칠하거나 혼합하여 투명도를 시뮬레이트합니다. 웹 페이지 배경이 단색이고 해당 색상이 무엇인지 알고 있는 경우 배경 매트가 가장 적합합니다.

[웹 및 디바이스용으로 저장] 대화 상자에서 [투명도] 및 [매트] 옵션을 사용하여 GIF 및 PNG 이미지의 투명한 픽셀이 최적화되는 방식을 지정합니다.

• (GIF 및 PNG‑8) 완전히 투명한 픽셀을 투명하게 만들고 부분적으로 투명한 픽셀을 색상과 혼합하려면 [투명도]를 선택하고 매트 색상을 선택합니다.
• 완전히 투명한 픽셀을 색상으로 칠하고 부분적으로 투명한 픽셀을 동일한 색상과 혼합하려면 매트 색상을 선택하고 [투명도]의 선택을 해제합니다.
• (GIF 및 PNG-8) 투명도가 50%를 초과하는 모든 픽셀은 완전히 투명하고 투명도가 50% 이하인 모든 픽셀은 완전히 불투명하게 하려면 [매트] 메뉴에서 [투명도]를 선택하고 [없음]을 선택합니다.
• (PNG-24) 다중 레벨 투명도(최대 256레벨)로 이미지를 저장하려면 [투명도]를 선택합니다. 다증 레벨 투명도를 적용하면 이미지를 모든 배경색과 혼합할 수 있으므로 [매트] 옵션은 비활성화됩니다.

 PNG-24 투명도를 지원하지 않는 브라우저에서는 회색과 같은 기본 배경색 위에 투명한 픽셀이 표시될 수 있습니다.

매트 색상을 선택하려면 [매트] 색상 견본을 클릭하고 색상 피커에서 색상을 선택합니다. 또는 [매트] 메뉴에서 [스포이드 색상](스포이드 샘플 상자의 색상을 사용하려는 경우), [전경색], [배경색], [흰색], [검정] 또는 [기타](색상 피커를 사용하려는 경우) 옵션 중 하나를 선택합니다.

 Photoshop에서는 [전경색] 및 [배경색] 옵션만 사용할 수 있습니다.

최적화된 분할 영역의 색상표 보기

분할 영역의 색상표는 [웹 및 장치용으로 저장] 대화 상자의 [색상표] 패널에 나타납니다.

GIF 또는 PNG-8 형식으로 최적화된 분할 영역을 선택합니다. 선택한 분할 영역의 색상표는 [웹 및 장치용으로 저장] 색상표에 나타납니다.

이미지에 여러 개의 분할 영역이 있는 경우 색상 테이블의 색상이 분할 영역 간에 다를 수 있습니다. 이러한 문제가 발생하지 않도록 먼저 분할 영역을 연결할 수 있습니다. 서로 다른 색상 테이블을 사용하는 여러 개의 분할 영역을 선택하면 색상 테이블은 비어 있고 상태 표시줄에 "혼합"이라는 메시지가 표시됩니다.

GIF 및 PNG-8 이미지의 색상표 사용자 정의를 참조하십시오

[웹 및 장치용으로 저장] 대화 상자의 색상표를 사용하여 최적화된 GIF 및 PNG-8 이미지의 색상을 사용자 정의합니다. 색상 수를 줄이면 이미지의 파일 크기는 줄어들지만 이미지 품질은 그대로 유지되는 경우가 많습니다.

색상 테이블의 색상을 추가 및 삭제하고, 선택한 색상을 웹에 적합한 색상으로 변경하고, 선택한 색상을 잠가 팔레트에서 해당 색상이 누락되지 않도록 할 수 있습니다.

색상 테이블 정렬

색상 테이블 팔레트 메뉴에서 정렬 순서를 선택합니다.

• [정렬하지 않음]을 선택하면 원래 정렬 순서가 복원됩니다.
• [색조별 정렬]을 선택하면 표준 색상환에서 색상의 위치(0에서 360 사이의 값으로 표시됨)에 따라 정렬됩니다. 중간색에는 0의 색조가 지정되고 빨간색으로 배치됩니다.
• [광도별 정렬]을 선택하면 색상의 밝기 또는 명도를 기준으로 정렬됩니다.
• [인기순 정렬]을 선택하면 이미지의 색상 발생 빈도별로 정렬됩니다.

색상 테이블에 새 색상 추가

색상 테이블 작성 시 제외된 색상을 추가할 수 있습니다. 동적 테이블에 색상을 추가하면 새 색상에 가장 가까운 팔레트의 색상이 이동합니다. 고정 또는 [사용자 정의] 테이블에 색상을 추가하면 팔레트에 색상이 추가됩니다.

색상표에서 색상 선택

색상 테이블에서 선택한 색상 주변에는 흰색 테두리가 나타납니다.

• 색상을 선택하려면 [색상표]에서 해당 색상을 클릭합니다.
• 색상 테이블에서 여러 색상을 선택하려면 다른 색상을 Shift+클릭합니다. 선택한 첫 번째 색상과 두 번째 색상 사이에 있는 행의 모든 색상이 선택됩니다. 인접하지 않은 색상 그룹을 선택하려면 Ctrl 키(Windows) 또는 Command 키(Mac OS)를 누른 채 선택하려는 각 색상을 클릭합니다. [색상표] 팔레트 메뉴에 있는 색상 선택 명령을 사용할 수도 있습니다.
• 미리 보기 이미지의 색상을 선택하려면 [웹 및 장치용으로 저장]에서 [스포이드 도구]로 미리 보기를 클릭합니다. 다른 색상을 더 선택하려면 Shift 키를 누른 채 클릭합니다.
• 모든 색상의 선택을 취소하려면 [색상표] 팔레트 메뉴에서 [모든 색상 선택 해제]를 선택합니다.

색상 이동

색상 테이블에서 선택한 색상을 다른 RGB 색상 값으로 변경할 수 있습니다. 최적화된 이미지를 다시 생성하면 선택한 색상이 이미지에 표시될 때마다 새 색상으로 변경됩니다.

가장 비슷한 웹 팔레트 색상으로 색상 바꾸기

브라우저에서 색상이 디더링되지 않도록 하려면 색상을 웹 팔레트에서 가장 가까운 색상으로 이동할 수 있습니다. 이렇게 하면 색상이 256색만 표시할 수 있는 Windows 또는 Macintosh 운영 체제의 브라우저에서 표시될 때 디더링되지 않습니다.

투명도에 색상 매핑

기존 색상을 투명도에 매핑하여 최적화된 이미지에 투명도를 추가할 수 있습니다.

색상 잠금 또는 잠금 해제

색상표에서 선택한 색상을 잠그면 색상 수가 감소하는 경우 해당 색상이 누락되지 않도록 할 수 있으며 응용 프로그램에서 해당 색상이 디더링되는 것도 방지할 수 있습니다.

 색상을 잠그더라도 브라우저에서는 해당 색상이 디더링될 수 있습니다.

선택한 색상 삭제

색상 테이블에서 선택한 색상을 삭제하여 이미지 파일 크기를 줄일 수 있습니다. 색상을 삭제하면 이전에 해당 색상이 포함되었던 최적화 이미지의 영역이 팔레트에 남아 있는 가장 가까운 색상을 사용하여 다시 렌더링됩니다.

색상을 삭제하면 색상 테이블은 자동으로 [사용자 정의] 팔레트로 변경됩니다. 이는 [적응형], [가시 범위], [선택] 팔레트의 경우 이미지를 다시 최적화할 때 삭제된 색상을 자동으로 팔레트에 다시 추가하기 때문입니다. [사용자 정의] 팔레트는 이미지를 다시 최적화할 때 변경되지 않습니다.

색상표 저장

최적화된 이미지의 색상 테이블을 저장해 다른 이미지와 함께 사용하고 다른 애플리케이션에서 만든 색상 테이블을 로드할 수 있습니다. 새 색상 테이블을 이미지로 로드하면 최적화된 이미지의 색상이 새 색상 테이블의 색상을 반영하여 변경됩니다.

색상 테이블 로드

PNG-24 최적화 옵션

PNG-24는 연속되는 톤의 이미지를 압축하는 데 적합하지만 JPEG 형식보다 훨씬 큰 파일을 생성합니다. PNG-24를 사용하면 이미지의 투명도를 최대 256레벨까지 유지할 수 있다는 장점이 있습니다.

이미지의 투명 픽셀이 최적화되는 방식을 결정합니다.

전체 이미지 파일이 다운로드되는 동안 브라우저에 저해상도로 표시합니다. 인터레이스를 사용하면 다운로드 시간이 단축된 느낌을 주고 보는 사람이 다운로드가 진행되고 있다는 것을 알 수 있습니다. 그러나 인터레이스는 파일 크기를 증가시키기도 합니다.