그래픽 프로그램에 이미지를 저장할 때 다양한 그래픽 형식이 제공됩니다. 하지만 웹사이트에 이미지를 통합할 때는 어떤 형식을 선택해야 할까요?
웹사이트에 이미지를 표시하려는 경우 세 가지 형식 중에서 선택할 수 있습니다.
- GIF
- JPEG
- PNG
하지만 어떤 목적에 따라 어떤 형식을 선택해야 할까요? 사진에 GIF 또는 PNG를 사용하는 것이 더 낫나요? 먼저 각 형식의 기능에 대한 간략한 개요를 살펴보겠습니다.
| 속성 | JPEG | GIF | PNG |
| 무손실 저장 | 아니요 | 예 | 예 |
| 색상 | 24비트 | 최대 256까지 인덱싱 | 인덱싱(최대 256), 24비트 또는 48비트 |
| 투명도 | 아니요 | 예, 한 가지 색상 | 예, 한 가지 색상 |
| 프로그레시브 로딩 또는 인터레이스 | 예 | 예 | 예 |
| 애니메이션 | 아니요 | 예 | 아니요 |
이 간략한 개요는 이미 포맷의 다양한 속성을 보여줍니다. 따라서 특정 포맷이 다른 포맷보다 특정 애플리케이션에 더 적합하다는 것은 놀라운 일이 아닙니다. 바로 이 점이 다음 섹션이 필요한 이유입니다. 어떤 형식을 사용하는 것이 가장 좋은지 설명합니다.
사진
사진에 JPEG를 사용하는 것은 의심의 여지가 없습니다. 이 형식에서는 이미지를 매우 잘 압축할 수 있어 화질을 다양하게 선택할 수 있기 때문입니다. 여기에서 화질과 압축률 사이의 적절한 균형을 찾을 수 있습니다.
스크린샷/도표
PNG 형식은 이러한 목적에 가장 적합합니다. PNG는 기술 도면, 평면도 등에도 유용합니다. 투명한 영역이 사용되는 이미지에도 PNG를 사용할 수 있습니다.
글꼴/로고
로고에 텍스트가 있거나 아예 텍스트를 표시하려면 GIF 또는 PNG를 사용해야 합니다. 그러나 일반적으로 PNG가 더 나은 성능으로 인해 사용됩니다. JPEG는 가장자리가 깨끗하지 않게 표시되므로 글꼴을 표시하는 데 적합하지 않습니다.
투명도
투명한 영역을 표시할 때 JPEG는 처음부터 배제됩니다. 따라서 GIF와 PNG가 남습니다. 하지만 투명도가 중요한 경우 이 두 가지 형식 중 어떤 형식을 사용해야 할까요? GIF는 원칙적으로 투명도를 처리할 수 있지만 일반적으로 결과가 깨끗하지 않습니다. GIF 형식에서는 픽셀이 완전히 보이거나 완전히 투명할 수 있습니다. PNG에서는 이러한 현상이 발생하지 않습니다. 이 형식에는 추가 알파 채널이 있어 더 미세한 투명도 결과를 얻을 수 있습니다.
이미지 통합하기
img 요소를 사용하여 그래픽을 통합할 수 있습니다. (이미지는 이제 CSS를 사용하여 통합하는 경우가 많다는 점에 유의하세요. 물론 CSS에 대한 자세한 정보는 다음에 이어집니다. 그러나 표시된 HTML 방식은 표준을 완벽하게 준수하며 HTML5에서도 주저 없이 사용할 수 있습니다).
<img src="logo.png" alt="PSD-Tutorials.de" />
img는 독립형 요소입니다. 이미지는 해당 속성을 사용하여 더 자세히 설명할 수 있습니다. 가장 중요한 속성은 의심할 여지 없이 src입니다. 포함할 이미지를 지정하는 데 사용되기 때문입니다. 표시된 예에서는 그래픽 로고.png가 img 요소가 정의된 HTML 파일과 동일한 디렉토리에 있다고 가정합니다.
이미지가 실제로 표시되도록 하려면 이미지의 경로를 올바르게 지정해야 합니다. HTML은 참조를 위한 다양한 옵션을 제공합니다.
- 절대 경로
- 기본 주소를 기준으로 한 절대 경로
- 기본 주소를 기준으로 한 상대 경로 사양
첫째, 절대 경로입니다. 이 변형은 일반적으로 이미지가 자체 서버에 위치하지 않을 때 사용됩니다. PSD-Tutorials.de에서 알려진 나비를 웹사이트에 임베드한다고 가정해 보겠습니다. 그러면 이론적으로 해당 이미지가 있는 서버에서 직접 로드할 수 있습니다. 먼저 이미지의 경로를 결정합니다. 가장 쉬운 방법은 브라우저에서 이미지를 마우스 오른쪽 버튼으로 클릭한 다음 이미지 URL 복사를 선택하는 것입니다.
클립보드에 로드된 내용은 다음과 같이 표시되어야 합니다:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
이것이 이미지의 전체 주소입니다. 이 정보만으로도 이미지를 임베드하기에 충분합니다.
<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />
따라서 src 속성에는 이미지의 전체 경로가 할당됩니다.
그러나 이러한 절대 경로의 문제점은 궁극적으로 임베드된 콘텐츠를 실제로 제어할 수 없다는 것입니다. 참조된 그래픽이 서버에서 삭제되거나 다른 디렉토리로 이동하면 표시 오류가 발생합니다.
따라서 이 절대 참조는 예외가 되어야 합니다.
기본 주소를 기준으로 한 절대 경로 정보
이 변형은 그래픽이 HTML 파일과 동일한 컴퓨터/서버에 있고 현재 프로토콜을 통해 액세스할 수 있는 경우에 항상 적합합니다. 복잡하게 들리지만 그렇지 않습니다.
다음은 예시입니다:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
이것이 전체 주소입니다. 다음 부분은 절대 경로입니다.
wp-content/uploads/2013/01/logo-psd-tutorials.jpg
이 절대 경로 사양은 기본 주소 http://4eck-media.de 에 대한 상대 경로입니다 .
기본 주소를 기준으로 한 상대 경로 정보
여기에 제시된 변형이 가장 일반적입니다. 현재 경로는 항상 주소 지정이 최종적으로 수행되는 기준점으로 사용됩니다. 다시 한 번 몇 가지 예를 들어보겠습니다. 이미지를 통합하려는 index.htm 파일이 있다고 가정해 보겠습니다. 또한 해당 이미지가 있는 디렉터리 이미지가 같은 레벨에 존재합니다.
index.htm 이미지 --logo.png
이 경우 src 속성의 호출은 다음과 같습니다:
src="images/logo.png"
하지만 이미지가 HTML 파일 위의 디렉토리에 있는 경우 전체가 어떻게 보일까요?
프로젝트 --이미지 -----logo.png --아카이브 -----index.htm
이 경우 index.htm은 포함할 logo.png 이미지의 한 디렉토리 아래에 위치합니다.
src="../images/logo.png"
여기서 구문은 한 단계 위로 이동하여 이미지 디렉터리로 변경하고 logo.png를 표시한다는 의미입니다.
project --images ----logo.png ----2013 ------januar --------index.htm
여기서 구문은 다음과 같습니다:
src="../../images/logo.png"
이 경우 logo.png 이미지는 이미지 디렉터리에서 index.htm보다 두 단계 위에 위치합니다.
상대 경로 사양의 장점은 유연성입니다. 예를 들어 프로젝트를 로컬에서 개발한 다음 "실제" 서버로 복사할 수 있습니다. 그러면 경로는 변경되지 않습니다.
