.

꼬리표 값이 이미지에 대한 절대 또는 상대 경로인 필수 속성 src가 있습니다.

태그용 다음 속성을 사용할 수 있습니다.

표 1. 태그 속성

기인하다	설명, 허용되는 값
대체	alt 속성은 이미지에 대체 텍스트를 추가합니다. 이미지가 로드되기 전이나 그래픽이 비활성화되었을 때 이미지가 나타나는 위치에 표시되며, 이미지 위에 마우스 커서를 올려 놓으면 툴팁으로도 표시됩니다. 구문: alt="(!LANG:이미지 설명" . !}
교차 출처	crossorigin 속성을 사용하면 CORS 요청을 사용하여 다른 도메인의 리소스에서 이미지를 로드할 수 있습니다. CORS 요청을 사용하여 캔버스에 업로드된 이미지를 재사용할 수 있습니다. 허용되는 값: 익명 - 교차 출처 요청이 HTTP 헤더를 사용하여 이루어지며 자격 증명이 전달되지 않습니다. 서버가 콘텐츠가 요청된 서버에 자격 증명을 제공하지 않으면 이미지가 손상되고 사용이 제한됩니다. use-credentials - 전달된 자격 증명으로 교차 출처 요청이 이루어집니다. 구문: crossorigin="anonymous" .
키	height 속성은 이미지의 높이를 px 단위로 지정합니다. 구문: 높이="300" .
이스맵	ismap 속성은 이미지가 서버에 있는 지도 이미지의 일부임을 나타냅니다(지도 이미지는 클릭 가능한 영역이 있는 이미지입니다). 지도 이미지를 클릭하면 좌표가 URL 쿼리 문자열로 서버에 전송됩니다. ismap 속성은 요소가 다음 경우에만 허용됩니다. 요소의 자식입니다. 유효한 href 속성이 있습니다. 구문: ismap .
longdesc	이미지의 확장된 설명 URL로, alt 속성을 채웁니다. 구문: longdesc="http://www.example.com/description.txt" .
src	src 속성은 이미지의 경로를 지정합니다. 구문: src="꽃.jpg" .
크기	디스플레이 설정에 따라 이미지 크기를 설정합니다. srcset 속성이 설정된 경우에만 작동합니다. 속성 값은 쉼표로 구분된 하나 이상의 문자열입니다.
srcset	화면 해상도에 따라 선택될 이미지 소스 목록을 만듭니다. src 속성과 함께 또는 대신 사용할 수 있습니다. 속성 값은 하나 이상의 쉼표로 구분된 문자열입니다.
유즈맵	usemap 속성은 이미지를 이미지 맵으로 정의합니다. 값은 # 문자로 시작해야 합니다. 값은 태그의 name 또는 id 속성 값과 연결됩니다.
너비	width 속성은 이미지의 너비를 px 단위로 지정합니다. 구문: 너비="500" .

1.1. 이미지 URL

이미지 주소는 다음과 같이 전체(절대 URL)로 지정할 수 있습니다.
url(http://anysite.ru/images/anyphoto.png)

또는 상대 경로를 통해 문서또는 루트 디렉토리대지:
url(../images/anyphoto.png) — 문서의 상대 경로,
url(/images/anyphoto.png)은 루트 디렉토리의 상대 경로입니다.

이것은 다음과 같이 해석됩니다.
../ - 루트 디렉토리로 한 단계 올라가는 것을 의미합니다.
images/ - 이미지가 있는 폴더로 이동,
anyphoto.png - 이미지 파일을 가리킵니다.

1.2. 이미지 치수

이미지 치수를 설정하지 않으면 도면이 실제 크기로 페이지에 표시됩니다. 너비 및 높이 속성을 사용하여 이미지의 크기를 편집할 수 있습니다. 속성 중 하나만 설정하면 두 번째 속성이 자동으로 계산되어 그림의 비율을 유지합니다.

1.3. 그래픽 파일 형식

JPEG 형식 (공동 사진 전문가 그룹). JPEG 이미지는 사진에 이상적이며 수백만 가지 색상을 포함할 수 있습니다. 이미지는 GIF보다 압축률이 더 높지만 텍스트와 단색의 넓은 영역이 얼룩질 수 있습니다.

GIF 형식 (그래픽 교환 형식). 로고와 같이 단색 영역이 있는 이미지를 압축하는 데 이상적입니다. GIF를 사용하면 색상 중 하나를 투명하게 설정하여 웹 페이지의 배경이 이미지의 일부를 통해 표시되도록 할 수 있습니다. GIF에는 간단한 애니메이션도 포함될 수 있습니다. GIF에는 256개의 음영만 포함되어 있어 이미지가 포스터처럼 얼룩지고 비현실적으로 보입니다.

PNG 형식 (휴대용 네트워크 그래픽). GIF 및 JPEG 형식의 최고의 기능을 포함합니다. 256가지 색상이 포함되어 있으며 색상 중 하나를 투명하게 만들고 이미지를 GIF 파일보다 작은 크기로 압축할 수 있습니다.

APNG 형식 (애니메이션 휴대용 네트워크 그래픽). PNG 형식을 기반으로 하는 이미지 형식입니다. 애니메이션을 저장할 수 있으며 투명도도 지원합니다.

SVG 형식 (확장 가능한 벡터 그래픽). SVG 도면은 선, 타원, 다각형 등 XML 형식으로 설명된 일련의 기하학적 모양으로 구성됩니다. 정적 및 애니메이션 그래픽이 모두 지원됩니다. 기능 세트에는 다양한 변형, 알파 마스크, 필터 효과, 템플릿 사용 기능이 포함됩니다. SVG 이미지는 품질을 잃지 않고 크기를 조정할 수 있습니다.

BMP 형식 (비트맵 그림). 템플릿이 픽셀의 직사각형 격자인 압축되지 않은(원래) 비트맵을 나타냅니다. 비트맵 파일은 헤더, 팔레트 및 그래픽 데이터로 구성됩니다. 헤더는 그래픽 이미지와 파일에 대한 정보(픽셀 깊이, 높이, 너비 및 색상 수)를 저장합니다. 팔레트는 팔레트 이미지(8비트 이하)를 포함하고 256개 이하의 요소로 구성된 비트맵 파일에서만 지정됩니다. 그래픽 데이터는 그림 자체를 나타냅니다. 이 형식의 색 농도는 픽셀당 1, 2, 4, 8, 16, 24, 32, 48비트일 수 있습니다.

ICO 형식 (윈도우 아이콘). Microsoft Windows의 파일 아이콘 저장 형식. 또한 Windows 아이콘은 인터넷상의 웹사이트에서 아이콘으로 사용됩니다. 브라우저에서 사이트 주소나 책갈피 옆에 표시되는 형식의 사진입니다. 하나의 ICO 파일에는 하나 이상의 아이콘이 포함되며 각 아이콘의 크기와 색상은 별도로 설정됩니다. 아이콘의 크기는 제한이 없지만 가장 일반적인 아이콘은 측면이 16, 32, 48픽셀인 정사각형 아이콘입니다.

2. 태그

꼬리표

name 속성은 지도의 이름을 지정하는 태그에 사용할 수 있습니다. 태그의 이름 속성 값

요소

3. 태그

꼬리표 클라이언트 측 이미지 맵 내에서 단 하나의 핫스팟을 설명합니다. 요소에 닫는 태그가 없습니다. 하나의 핫스팟이 다른 핫스팟과 겹치면 핫스팟 목록의 첫 번째 링크가 구현됩니다.

표 2. 태그 속성

기인하다	간단한 설명
대체	지도의 활성 영역에 대한 대체 텍스트를 지정합니다.
좌표	화면에서 영역의 위치를 ​​지정합니다. 좌표는 길이 단위로 지정되고 쉼표로 구분됩니다. ~을 위한 원- 중심의 좌표와 원의 반경; ~을 위한 직사각형- 왼쪽 위 모서리와 오른쪽 아래 모서리의 좌표 ~을 위한 다각형— 올바른 순서로 다각형 정점의 좌표, 그림의 논리적 완성을 위해 마지막 좌표를 첫 번째 좌표와 동일하게 지정하는 것이 좋습니다.
다운로드	href 속성을 보완하고 사용자가 링크를 클릭하는 순간에 리소스가 로드되어야 한다고 브라우저에 알려줍니다. 속성에 이름을 부여함으로써 우리는 로드된 객체에 이름을 부여합니다. 값을 지정하지 않고 속성을 사용할 수 있습니다.
href	링크의 URL을 지정합니다. 절대 또는 상대 링크 주소를 지정할 수 있습니다.
hreflang	연결된 웹 문서의 언어를 지정합니다. href 속성과 함께만 사용됩니다. 허용되는 값은 언어 코드를 나타내는 한 쌍의 문자로 구성된 약어입니다.
미디어	파일이 최적화될 장치 유형을 지정합니다. 값은 모든 미디어 쿼리가 될 수 있습니다.
상대	현재 문서와 링크된 문서 간의 관계에 대한 정보로 href 속성을 채웁니다. 허용되는 값: 대체 - 문서의 대체 버전(예: 인쇄 가능한 페이지, 번역 또는 미러)에 대한 링크입니다. 작성자 - 문서 작성자에 대한 링크입니다. 책갈피는 책갈피에 사용되는 영구 URL입니다. help — 도움말 링크. license - 이 웹 문서에 대한 저작권 정보에 대한 링크입니다. next/prev - 개별 URL 간의 관계를 나타냅니다. 이 마크업을 통해 Google은 이러한 페이지의 콘텐츠가 논리적 순서로 연결되어 있는지 확인할 수 있습니다. nofollow - 검색 엔진이 이 페이지 또는 특정 링크의 링크를 따라가지 못하도록 합니다. noreferrer - 링크를 따라갈 때 브라우저가 사이트 방문자가 어느 페이지에서 왔는지에 대한 정보가 포함된 HTTP 요청 헤더(Referrer)를 보내지 않아야 함을 나타냅니다. prefetch - 대상 문서가 캐시되어야 함을 나타냅니다. 백그라운드의 브라우저는 페이지의 콘텐츠를 캐시로 로드합니다. search 대상 문서에 검색 도구가 포함되어 있음을 나타냅니다. tag - 현재 문서의 키워드를 지정합니다.
모양	지도에서 핫스팟의 모양과 좌표를 지정합니다. 다음 값을 사용할 수 있습니다. rect는 직사각형 활성 영역입니다. 원 - 원 형태의 활동 영역; 폴리 - 다각형 형태의 활성 영역. 기본값 — 핫스팟은 이미지의 전체 영역을 차지합니다.
표적	링크를 클릭할 때 문서가 로드될 위치를 지정합니다. 다음 값을 사용합니다. _self - 페이지가 현재 창에 로드됩니다. _blank - 페이지가 새 브라우저 창에서 열립니다. _parent - 페이지가 부모 프레임에 로드됩니다. _top - 페이지가 전체 브라우저 창에서 로드됩니다.
유형	링크 파일의 MIME 유형을 지정합니다. 파일 확장자.

4. 이미지 맵 생성 예시

1) 소스 이미지를 원하는 모양의 활성 영역에 표시합니다. 영역 좌표는 사진 처리 프로그램을 사용하여 계산할 수 있습니다. 예를 들면, 어도비 포토샵또는 페인트.

쌀. 1. 지도 생성을 위한 이미지 마크업 예시

2) 지도명을 태그에 추가하여 설정

Jpg" alt="(!LANG:꽃_사진" width="680" height="383" usemap="#flowers"> !}
쌀. 2. 이미지맵 생성 예시, 꽃을 클릭하면 설명이 있는 페이지로 이동합니다.

이 튜토리얼에서는 웹 페이지에 그래픽을 추가하여 웹 페이지를 장식하는 방법을 살펴봅니다. 가장 일반적인 이미지 형식에 대해 알아보고 페이지에 이미지를 추가하는 데 사용되는 태그를 찾고 대체 캡션과 텍스트 및 그래픽 정렬을 처리합니다. 또한 이미지의 주요 속성에 대해 알아보고 이미지의 너비와 높이를 조정하는 방법을 배웁니다. 다음으로 이미지를 링크로 사용하는 방법과 이미지 썸네일이 무엇인지에 대한 몇 마디입니다. 웹 페이지에서 그래픽을 사용하기 위한 몇 가지 일반적인 팁으로 결론을 내립니다.

웹 페이지에 이미지 추가
웹 페이지에 텍스트 정보 외에는 아무것도 포함되어 있지 않은 경우 해당 정보로 인해 누군가에게는 흥미로워 보일 수 있지만 누군가가 이를 매력적이라고 ​​부르기 위해 혀를 돌리지는 않을 것입니다. 웹 페이지에 이미지를 추가하는 것은 매우 쉽습니다. 페이지에 전문적인 느낌을 줄 수 있는 그래픽을 추가하려면 약간의 지식이 필요합니다. 사실, 오늘 수업의 주제는 무엇입니까?

인터넷에서 가장 일반적으로 사용되는 두 가지 이미지 형식은 GIF와 JPEG입니다. JPEG(Joint Photographic Experts Group) 그룹에서 개발하고 명명한 이 파일은 일반적으로 사진과 같이 부드러운 색상 전환으로 이미지를 저장하는 데 사용됩니다.

다른 거의 모든 그래픽 요소는 그래픽 데이터 교환 형식인 GIF(Graphics Interchange Format) 형식으로 저장됩니다. 이제 인기를 얻고 있는 또 다른 새로운 그래픽 형식인 PNG(Portable Network Graphics)가 있습니다. 시간이 지남에 따라 GIF 형식을 대체할 것으로 예상됩니다. 그러나 모든 그래픽 파일을 이 형식으로 다시 저장하기 위해 서두르지 마십시오. 여전히 모든 브라우저에서 지원되지는 않습니다.

모든 이미지는 이미지 소스 태그라고 하는 동일한 태그를 사용하여 웹 페이지에 추가됩니다. . 아마도 이제 이 항목이 실제 태그로 구성되어 있음을 스스로 결정할 수 있습니다. , 속성(scr) 및 이 속성의 값(위치). 그러나 scr 속성을 사용해야 하므로 이 항목을 단일 일반 태그로 참조하는 것이 더 편리합니다. 또한 이미지 소스 태그에 해당하는 종료 태그가 없다는 것도 알아차렸을 것입니다. 이것은 별도의 자체 포함 태그이므로 끝에 슬래시를 추가하는 것을 잊지 마십시오. .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1/transitional.dtd"> 첫 번째 이미지 e> 이 그래픽은 내 첫 번째 웹 페이지에 추가되었습니다. 피 >

대체 레이블 추가
인터넷을 서핑하는 동안 웹 페이지의 일부 그래픽 요소 위에 마우스 포인터를 올리면 여러 번 표시되는 다양한 문구를 보았을 것입니다. 이러한 비문은 일반적으로 이미지 자체 또는 이미지가 차지하는 페이지 영역에 대한 몇 가지 추가 정보를 제공합니다.

다음 HTML 코드 예제는 태그 내부에 alt 속성이 추가되는 방법을 보여줍니다. . src 속성과 마찬가지로 alt 속성은 웹 브라우저에 이미지에 대한 추가 정보를 알려주고 항상 태그와 함께 사용할 수도 있습니다. .

alt 속성은 웹 페이지에 추가된 그래픽의 대체 텍스트를 정의합니다. 이 텍스트는 이미지 자체의 대안으로 화면에 표시될 수 있기 때문에 대체 텍스트라고 합니다. alt 속성에는 또 다른 매우 중요한 목적이 있습니다. 낮은 데이터 속도 액세스 채널을 사용하는 많은 인터넷 방문자는 그래픽 정보를 다운로드하거나 표시하지 않도록 브라우저에 지시할 수 있습니다. 이를 통해 컴퓨터에서 웹 페이지를 로드하는 속도를 높일 수 있습니다.

또한 모든 브라우저가 창에 그래픽을 표시할 수 있는 것은 아닙니다. 예를 들어, Lynx 브라우저는 이 기능을 전혀 지원하지 않습니다. 따라서 alt 속성을 사용하면 웹 디자이너가 웹 페이지 방문자가 화면에서 이미지를 볼 수 없는 경우 적어도 이 이미지에 추가된 텍스트 정보를 읽을 수 있는지 확인할 수 있습니다.

각 태그에 대해 alt 속성을 정의할 수 있지만 , 일부 그래픽 요소에 부적절한 문자 메시지를 할당하지 않도록 주의하십시오. 예를 들어, 웹 페이지 외부 디자인의 다양한 요소에 대체 텍스트 레이블을 추가하는 것은 이치에 맞지 않습니다. 이러한 오류를 방지하기 위해 해당 요소의 alt 속성을 빈 값(alt=" ")으로 설정할 수 있습니다. 다른 속성 값을 설정하지 않으면 브라우저는 이미지의 위쪽 가장자리를 인접한 텍스트 문자열의 위쪽 가장자리와 정렬하여 이미지를 원래 크기로 렌더링합니다. 스타일 시트 태그를 사용하여 이 두 설정을 모두 변경할 수 있습니다.

이미지 속성
태그용 이미지의 크기를 변경할 수 있는 속성이 제공됩니다. 이러한 속성 중 일부는 아래에 나열되어 있습니다.
키- 픽셀 또는 백분율로 지정 - 이미지의 높이를 지정합니다
너비— 픽셀 또는 백분율로 지정 — 이미지의 너비를 지정합니다.

이미지 높이 및 너비 조정
웹 페이지에 배치된 이미지의 크기는 height 및 width 속성을 사용하여 지정할 수 있습니다. 이러한 속성의 3값은 고정된 픽셀 수 또는 페이지 크기의 백분율로 지정됩니다. 아래 HTML 코드를 살펴보십시오. 첫 번째 태그에서는 이 단원의 이전 이미지에서 이미 본 원본 이미지의 크기가 세로로 60픽셀, 가로로 60픽셀로 설정되어 있습니다. 두 번째 태그에서 동일한 이미지의 너비는 페이지 너비의 6%로, 높이는 페이지 높이의 10%로 설정됩니다. 그림은 이 두 이미지가 브라우저 창에서 어떻게 보이는지 보여줍니다.

브라우저는 창에 이미지를 표시할 때 픽셀과 백분율 값을 동등하게 잘 처리하지만 웹 페이지 방문자의 컴퓨터는 모니터에 설정된 것과 다른 화면 해상도로 설정될 수 있습니다. 이것으로부터 다음은 무엇입니까? 예를 들어 모니터 해상도는 800x600으로 설정되어 있습니다. 이전 예에서 웹 페이지에 추가된 그래픽은 페이지 너비의 6% 너비로 설정되었으며, 이는 해당 해상도에서 48픽셀이 됩니다. 1024x800 해상도의 모니터에서 동일한 이미지를 보는 경우 페이지 너비의 지정된 6%는 이미 너비 61픽셀에 해당합니다.

이미지의 크기를 조정할 때 높이와 너비에 맞게 두 값을 모두 설정해야 합니다. 이 값 중 하나만 변경하면 이미지 자체가 화면에서 세로 또는 가로로 늘어납니다. 다른 옵션은 그래픽 편집기를 사용하여 이미지 크기를 조정하는 것입니다.

더 빠른 이미지 로드의 환상을 만들 수 있습니다. 이미지 크기가 조정되었는지 여부에 관계없이 항상 height 및 width 속성 값을 지정하십시오. 이는 주어진 이미지를 수용하기 위해 페이지에 얼마나 많은 공간을 할당해야 하는지에 대한 중요한 정보를 브라우저에 알려줄 것이기 때문입니다. 이 경우 브라우저는 이미지에 필요한 공간을 표시하고 이미지 자체 로드를 중지하지 않고 페이지의 다른 요소를 계속 빌드할 수 있습니다. 이렇게 하면 방문자가 페이지에 표시된 다른 정보를 보기 위해 이미지가 완전히 로드될 때까지 기다릴 필요가 없기 때문에 페이지가 더 빨리 로드되는 것처럼 보입니다.

이미지가 페이지 너비에 걸쳐 일정량의 공간을 차지하도록 하려면 백분율을 사용하십시오. 이 경우 모든 모니터의 화면에서 이미지는 화면과 동일한 페이지 부분을 차지합니다. 그림 자체의 해상도(픽셀 단위의 크기)를 일정하게 유지하려면 픽셀로 표시된 값을 사용하십시오.

텍스트 및 그래픽 정렬
태그의 align 속성 이미지를 텍스트 문자열의 오른쪽(오른쪽 값) 또는 왼쪽(왼쪽 값) 가장자리에 정렬할 수 있습니다. 이 속성을 사용하는 방법의 예가 그림에 나와 있습니다.

동일한 속성을 사용하여 이미지를 세로로 정렬할 수도 있습니다(다시 텍스트 줄을 기준으로). top, bottom 및 center의 다른 세 가지 값을 취할 수 있습니다. align 속성이 top으로 설정되면 이미지의 상단이 주변 텍스트의 상단과 정렬됩니다. align 속성이 아래쪽으로 설정되면 이미지의 아래쪽 가장자리가 주변 텍스트의 아래쪽 가장자리와 정렬됩니다. align 속성이 center로 설정되면 이미지의 중심이 텍스트 문자열의 중심에 맞춰집니다.

이미지를 링크로 사용
이미지는 웹 페이지 디자인 이상으로 좋습니다. 다른 문서에 대한 하이퍼링크로 성공적으로 사용할 수 있습니다. HTML에서는 이미지가 레이블과 똑같은 방식으로 하이퍼링크로 변환되기 때문에 이 작업이 쉽습니다. 이렇게 하려면 다른 문서에 대한 링크가 되어야 하는 웹 페이지의 요소를 포함하는 태그도 적용해야 합니다. 따라서 일부 이미지를 클릭한 후 하이퍼링크를 따라야 하는 경우 이 이미지의 태그에 태그를 묶어야 합니다.

>

이 경우 웹 페이지 방문자가 이 이미지 위로 마우스를 가져가면 "이것은 내 자화상입니다!"라는 텍스트 메시지가 커서 옆에 표시됩니다. 이미지를 클릭하면 하이퍼링크가 가리키는 DOC2.htm 문서가 열립니다.

이미지 축소판
HTML의 하이퍼링크 기능을 사용하는 또 다른 일반적인 방법은 한 이미지를 사용하여 다른 이미지로 이동하는 것입니다. 무엇을 위한 것입니까? 사실 웹 페이지에 게시하려는 이미지의 크기가 너무 커서 방문자가 다운로드가 완료될 때까지 인내심을 가질 수 있다는 보장은 없습니다. 이러한 경우 축소판이라고 하는 원본 이미지의 더 작은 복사본이 만들어지며 브라우저에서 훨씬 빠르게 로드할 수 있습니다. 방문자가 이미지에 관심이 있고 전체 사본을 다운로드하려는 경우 이 축소판을 클릭하기만 하면 됩니다. 다음은 해당 HTML 코드의 모양입니다.

>

보시다시피, thumbnail.jpg 이미지를 클릭하면 다른 이미지 파일(image.jpg)이 열립니다. alt 속성의 값으로 주어진 텍스트 문자열은 방문자에게 기본 이미지를 여는 방법을 알려줍니다.

이미지의 성공적인 사용의 비밀
이미지는 흥미롭고 매력적이며 많은 시각적 정보를 포함하며 웹 페이지에 추가하기가 매우 쉽습니다. 그러나 인터넷 사용자들 사이에서 인기를 끌 사이트를 정말로 만들고 싶다면 따라야 할 몇 가지 규칙이 있습니다.

이미지 파일 크기가 클수록 사용자의 컴퓨터에 다운로드하는 데 시간이 오래 걸립니다. 대다수의 인터넷 사용자는 여전히 낮은 대역폭 연결을 사용하여 웹에 액세스하기 때문에 다운로드 크기는 여전히 그들에게 근본적으로 중요합니다. 이를 고려하고 웹 페이지에 이미지를 가능한 한 작게 배치하십시오.

개별 이미지의 파일 크기뿐만 아니라 전체 HTML 문서의 전체 파일 크기도 중요합니다. 웹 페이지에 추가되는 이미지가 많을수록 비록 작더라도 최종 문서의 파일 크기는 커집니다. 다른 브라우저에서 페이지를 미리 보고 각 브라우저에서 페이지를 로드하는 데 걸리는 시간을 예상합니다.

alt 속성은 매우 중요하기 때문에(각 태그에 대해 정의하는 것이 좋습니다. , 사용 시 주의하십시오. 문자 메시지의 내용이 항상 이미지 자체와 일치하는지 확인하십시오. 그렇지 않으면 페이지 방문자가 잘못 인도될 수 있습니다. 동일한 설명이 반대로 적용됩니다. 이미지가 웹 페이지에 제공된 텍스트 정보와 일치하는지 확인하십시오. 비행기 사진은 항공 여행 사이트에서는 적절하지만 야생 동물 사이트에서는 완전히 중복됩니다.

인터넷에서 많은 흥미로운 이미지를 찾아 쉽게 컴퓨터에 저장할 수 있습니다. 그러나 이러한 이미지 중 많은 부분이 저작권으로 보호됩니다. 상업 사이트에서 마음에 드는 이미지를 발견하면 거기에 저작권 표시가 있는지, 이미지가 무료로 사용 가능한지 확인하십시오.

웹 페이지에 표시되는 이미지가 저작권으로 보호되지 않는 경우 컴퓨터 메모리에 복사할 수 있습니다. 이렇게 하려면 이 이미지를 마우스 오른쪽 버튼으로 클릭하고 열리는 메뉴에서 다른 이름으로 이미지 저장 명령을 선택하기만 하면 됩니다. 이미지를 컴퓨터에 저장한 후에는 다른 그림과 마찬가지로 사용할 수 있습니다.

안녕하세요 블로그 독자 여러분! 이 기사에서는 HTML 페이지에 이미지를 삽입하는 방법. 페이지에 넣고 싶은 이미지가 있습니까, 아니면 사이트에 로고를 넣고 싶습니까? 이 모든 것이 쉽습니다. 이 기사를 읽은 후에는 어려움 없이 html 페이지에 이미지를 삽입할 수 있습니다. 이를 위해 우리는 다음에 대해 자세히 이야기 할 것입니다. 이미지 태그및 해당 속성, gif, jpeg 및 png와 같은 그래픽 파일 형식을 빠르게 살펴보고 사이트에 비디오 및 오디오를 쉽게 포함할 수 있게 해주는 새로운 HTML5 기능을 살펴보십시오.

그래픽과 html 텍스트는 하나의 파일에 결합할 수 없기 때문에 html 페이지의 다른 요소와 다른 방식으로 사이트에 표시됩니다. 우선 그래픽 이미지 및 기타 멀티미디어 데이터는 별도의 파일에 저장됩니다. 웹 페이지에 포함하기 위해 이러한 개별 파일에 대한 링크가 포함된 특수 태그가 사용됩니다. 특히 이 태그는 이미지 태그. 주소가 있는 이러한 태그를 만나면 브라우저는 먼저 웹 서버에서 해당 파일에 이미지, 오디오 또는 비디오를 요청한 다음 웹 페이지에 표시합니다.

모든 그래픽 이미지 및 일반적으로 웹 페이지와 별도의 파일에 저장된 모든 데이터는 구현페이지 요소.

그림을 삽입하고 "img" 태그를 자세히 살펴보기 전에 그래픽 형식에 대해 조금 배울 가치가 있습니다.

그래픽 이미지 형식.

다양한 그래픽 형식이 있지만 브라우저는 몇 가지만 지원합니다. 그 중 세 가지를 살펴보겠습니다.

1. JPEG 형식(공동 사진 전문가 그룹). 이미지를 저장하는 데 사용되는 상당히 인기 있는 형식입니다. 24비트 색상을 지원하고 사진의 모든 중간 색조를 그대로 유지합니다. 그러나 jpeg는 투명도를 지원하지 않으며 이미지의 미세한 디테일과 텍스트를 왜곡합니다. JPEG는 주로 사진을 저장하는 데 사용됩니다. 이 형식의 파일은 확장자가 jpg, jpe, jpeg입니다.

2. GIF 형식(그래픽 교환 형식). 이 형식의 주요 장점은 한 파일에 여러 이미지를 한 번에 저장할 수 있다는 것입니다. 전체 애니메이션 비디오를 만들 수 있습니다. 둘째, 투명성을 지원합니다. 가장 큰 단점은 256색만 지원하기 때문에 사진 저장에 좋지 않습니다. GIF는 주로 로고, 배너, 투명 영역이 있고 텍스트가 포함된 이미지를 저장하는 데 사용됩니다. 이 형식의 파일은 gif 확장자를 가집니다.

3. PNG 형식(휴대용 네트워크 그래픽). 이 형식은 더 이상 사용되지 않는 GIF와 어느 정도는 JPEG를 대체하기 위해 개발되었습니다. 투명도를 지원하지만 애니메이션은 허용하지 않습니다. 이 형식에는 png 확장자가 있습니다.

웹 사이트를 만들 때 일반적으로 JPEG 또는 GIF 형식의 이미지를 사용하지만 때로는 PNG를 사용합니다. 가장 중요한 것은 어떤 경우에 어떤 형식을 사용하는 것이 더 나은지 이해하는 것입니다. 요컨대, 다음:

JPEG는 텍스트가 포함되지 않은 사진이나 회색조 사진을 저장하는 데 가장 적합합니다.

• GIF는 주로 애니메이션에 사용됩니다.
• PNG는 다른 모든 것(아이콘, 버튼 등)의 형식입니다.

html 페이지에 이미지 삽입하기

그렇다면 웹 페이지에 이미지를 삽입하는 방법은 무엇입니까? 이미지 삽입은 단일 허용 이미지 태그. 브라우저는 웹 페이지에서 img 태그가 있는 위치에 이미지를 배치합니다.

HTML의 이미지 임베드 코드페이지는 다음과 같습니다.

이 html 코드는 웹 페이지와 동일한 폴더에 있는 image.jpg 파일에 저장된 이미지를 웹 페이지에 배치합니다. 눈치채셨겠지만, 이미지의 주소는 src 속성. 내가 이미 말한 것이 무엇입니까? 따라서 src 속성은 필수 속성으로 이미지 파일의 주소를 지정하는 역할을 합니다. src 속성이 없으면 img 태그는 의미가 없습니다..

이미지가 있는 파일의 주소를 지정하는 몇 가지 예를 더 드리겠습니다.

이 html 코드는 웹사이트 루트에 있는 이미지 폴더에 저장된 image.jpg라는 페이지에 이미지를 삽입합니다.

src 속성은 이미지에 대한 상대적 링크 이상을 포함할 수 있습니다. 이미지는 html 페이지와 함께 웹에 저장되기 때문에 각 이미지 파일에는 고유한 URL이 있습니다. 따라서 이미지의 url 주소를 src 속성에 삽입할 수 있습니다. 예를 들어:

이 코드는 mysite.ru의 이미지를 페이지에 삽입합니다. URL 주소는 일반적으로 다른 사이트에 있는 이미지를 가리키는 경우에 사용됩니다. 사이트에 저장된 이미지의 경우 상대 링크를 사용하는 것이 가장 좋습니다.

img 태그는 인라인 요소이므로 블록 요소 내부, 예를 들어 "P" 태그 내부에 배치하는 것이 좋습니다.

이전 html 기사의 이미지를 페이지에 삽입하는 연습을 해 봅시다. 내 페이지의 html 파일 옆에 "images" 폴더를 만들고 거기에 다음과 같은 이미지 파일 "bmw.jpg"를 넣습니다.

그러면 삽입된 이미지가 있는 페이지의 html 코드는 다음과 같습니다.

그리고 브라우저에 표시되는 결과를 살펴봅니다.

우리가 볼 수 있듯이 웹 페이지에 이미지를 배치하는 데 복잡한 것은 없습니다. 다음으로 "img" 태그의 몇 가지 다른 중요한 속성을 살펴보겠습니다.

alt 속성 - 대체

이미지 파일은 웹페이지와 별도로 저장되기 때문에 브라우저에서 따로 불러와야 한다. 하지만 페이지에 이미지가 많고 네트워크 연결 속도가 느리면 추가 파일을 다운로드하는 데 상당한 시간이 걸립니다. 그리고 사용자 모르게 서버에서 이미지가 제거된 경우에는 더욱 그렇습니다.

이러한 경우 웹 페이지 자체가 성공적으로 로드되고 이미지 대신 흰색 사각형만 표시됩니다. 따라서 이미지가 무엇인지에 대한 정보를 사용자에게 알리기 위해 . 이 속성을 사용하면 이미지가 로드될 때까지 빈 사각형에 표시되는 소위 대체 텍스트가 지정됩니다.

다음과 같이 보입니다.

이미지의 크기 설정

여전히 알아야 할 몇 가지 img 태그 속성이 있습니다. 이것은 한 쌍의 속성입니다. 너비그리고 키. 이를 사용하여 이미지의 크기를 지정할 수 있습니다.

두 속성 모두 크기를 나타냅니다. 픽셀. 너비 속성은 브라우저에 이미지의 너비와 높이 속성을 알려줍니다. 이 두 속성은 함께 또는 별도로 사용할 수 있습니다. 예를 들어 너비 속성만 지정하면 브라우저는 지정된 너비에 비례하여 높이를 자동으로 조정하며, 높이 속성만 사용하는 경우에도 마찬가지입니다. 이러한 속성을 전혀 지정하지 않으면 브라우저는 이미지를 화면에 표시하기 전에 이미지의 크기를 자동으로 결정합니다. 이미지 크기를 지정하면 페이지를 표시할 때 브라우저 속도가 약간 빨라집니다.

지금은 페이지에 이미지를 삽입하는 것이 전부입니다. 그런 다음 사이트에 오디오 또는 비디오를 삽입하는 방법을 살펴보겠습니다...

HTML 5로 비디오 및 오디오 포함

새로운 html5 사양에는 미디어 파일을 매우 쉽게 삽입할 수 있는 몇 가지 새로운 태그가 있습니다. 이것은 주로 비디오 및 오디오에 적용됩니다.

삽입용 오디오 HTML5는 쌍 태그를 제공합니다. 오디오. 오디오 클립이 저장된 파일의 주소는 이미 친숙한 src 속성을 사용하여 표시됩니다.

오디오 태그는 페이지에 블록 요소를 만듭니다. 기본적으로 브라우저는 오디오 클립을 재생하지 않습니다. 이렇게 하려면 오디오 태그에 특수 속성을 지정해야 합니다. 자동 재생. 중요하지 않기 때문에 특별합니다. 태그에 이 속성이 있는 것만으로도 효과가 충분합니다.

기본적으로 오디오 클립은 웹 페이지에 표시되지 않습니다. 하지만 "audio" 태그에 값이 없는 속성을 넣으면 통제 수단, 브라우저는 오디오 태그가 있는 웹 페이지 위치에 오디오 클립을 재생하기 위한 컨트롤을 표시합니다. 여기에는 재생 및 일시 중지 버튼, 재생 막대 및 볼륨 컨트롤이 포함됩니다.

그래픽 및 트래픽

웹 페이지 디자인의 아름다움과 표현력에 대한 요구 사항은 현대 웹 호스팅의 기술 기능과 끊임없이 충돌합니다. 따라서 사이트 디자이너는 디자이너와 사용자 사이의 중개자가 되어야 하며 시각적인 매력과 웹에서 정보 전달의 합리적인 속도 사이의 균형을 엄격하게 유지해야 합니다. 이 문제를 성공적으로 해결하려면 인터넷에서 사용되는 모든 그래픽 형식을 알고 이들 간의 차이점, 적용 영역 및 사용 패턴을 이해해야 합니다.

인터넷에서 채택된 수많은 형식과 프로토콜을 처리하고 자신의 페이지를 작성하려면 특정 목적에 가장 적합한 것을 선택해야 합니다. 일부 형식은 하나의 브라우저에만 적용되는 반면 다른 형식은 특별한 플러그인이 필요합니다. 다양한 형식 중에서 인기 있는 사이트의 작성자가 가장 자주 사용하고 사용자가 허용하는 형식만 선택했습니다.

GIF와 JPEG는 가장 널리 사용되는 이미지 형식이며 오랫동안 WWW에서 사용하기 위한 사실상의 표준이었습니다. 둘 다 상당히 다재다능하고 대부분의 브라우저에서 읽을 수 있으며 특별한 소프트웨어(또는 추가 기능)가 필요하지 않습니다. GIF 및 JPEG는 래스터 이미지 형식으로, 이러한 사진을 화면에 표시할 때 각각 고정 형식(해상도)을 결정합니다. 일부 브라우저에서 제공되는 크기를 조정하려고 하면 비트맵(픽셀) 이미지의 품질이 많이 떨어집니다. 또한 8비트(256색) GIF 형식의 경우 색상 팔레트 선택이 심각한 문제입니다.

벡터 그래픽 형식은 웹에서 사용하기에 훨씬 더 매력적입니다. 비트맵과 달리 벡터 그래픽은 데이터의 수학적(기하학적) 표현을 기반으로 합니다. 이러한 이미지는 저장/전송 측면에서 훨씬 작으며 쉽게 크기를 조정할 수 있으며 실제로 변환 중에 품질을 잃지 않습니다. 불행히도 벡터 형식은 여전히 ​​인터넷에서 거의 사용되지 않지만 표준은 이미 형성되었으며 디자이너가 관심을 가져야 합니다.

비교적 최근에 여러 벡터 표준이 제안되었으며 현재 W3C(World Wide Web Consortium)에서 PGML 및 VML 형식을 고려하고 있습니다. 그러나 VML을 홍보하는 Macromedia는 오랫동안 다른 개발자에게 Shockwave Flash 벡터 형식을 공개했으며 인기 있는 브라우저에서 이 형식의 그래픽을 보기 위한 추가 모듈을 구현했습니다.

그러나 새로운 도구가 반드시 모든 응용 프로그램에 가장 적합한 것은 아닙니다. 인터넷에 게시되는 가장 일반적인 이미지는 여전히 디지털 사진, 그림 및 스캔한 사진으로 매우 힘들고 벡터 형식으로 변환하는 것이 거의 권장되지 않습니다.

따라서 형식 선택은 궁극적으로 귀하의 작업에 달려 있으며 어떤 이미지가 대상 청중과 더 관련이 있는지 결정하는 것은 귀하에게 달려 있습니다.

GIF - 디자인 형식

CompuServe는 원래 개인용 컴퓨터에서 표준 그래픽의 제한된 용량으로 대화형 응용 프로그램을 위한 GIF 형식을 의도했습니다. 원래 4비트 이후에는 최대 256색을 지원하는 8비트 색상 매핑 비트맵 형식이었습니다. 이 형식의 중요한 장점 중 하나는 이미지를 특정 팔레트(색상 세트)로 인덱싱할 수 있는 반면 JPEG 이미지는 팔레트에 "연결"할 수 없고 "올바른" 표시가 항상 가능한 것은 아니라는 점입니다. 이 속성은 팔레트 인덱싱을 사용하여 이 시스템이 작동하는 색 농도에 관계없이 예외 없이 모든 플랫폼(PC, Mac, Web-TV 또는 기타)에 대해 이미지 렌더링을 최적화하는 개발자에게 특히 중요합니다. 이러한 다양성은 Windows와 MacOS에서 사용되는 모든 공통 색상을 포함하는 216가지 색상의 제한된 팔레트를 사용하여 달성할 수 있습니다. 범용 팔레트에서 사이트를 디자인하면 일관된 크로스 플랫폼 및 하드웨어 독립 디스플레이가 보장됩니다. 또한 GIF 형식은 무손실 압축 방식을 사용합니다(단순 반복 인코딩 알고리즘 사용: 동일한 색상의 바이트 시퀀스가 ​​2바이트의 단어로 대체되며 그 중 하나는 채우기 패턴을 포함하고 두 번째는 숫자를 결정합니다. 의 반복), 따라서 이 형식의 그래픽 데이터는 압축 및 복구 과정에서 정보를 잃지 않습니다.

그러나 이러한 내장된 색상 제한 때문에 GIF 형식은 흑백 구성표와 같이 제한된 수의 색상을 가진 이미지나 만화와 같이 한 가지 색상의 넓은 영역을 포함하는 이미지에만 사용할 수 있습니다. 단일 색상의 프레임 또는 디지털 그림 채우기. 물론, 색상 톤의 스무딩(디더링)을 적용하여 이미지를 GIF 형식으로 저장할 수 있으므로 적절한 품질을 얻을 수 있지만 이 경우 적용한 후 파일 크기가 크게 증가할 위험이 있습니다. 위에서 설명한 메모리 압축 반복(퇴화의 경우 이미지에 인접한 반복이 없을 때 압축되지 않은 원본에 비해 파일이 정확히 두 배 증가합니다).

따라서 GIF 형식의 주요 장점은 무손실 압축을 사용하고 경계가 명확하고 색상 전환이 엄격한 단색 색상 영역을 경제적으로 보존한다는 것입니다. JPEG 형식은 압축 수준에 따라 단색 영역이 파괴되고 선명한 색상 전환이 매끄럽게 되거나 씻겨진다는 점에서 설명된 형식과 다릅니다.

GIF 형식을 선택하는 주요 기준: Photoshop 또는 Painter와 같은 그래픽 패키지에서 동일한 색상의 넓은 영역이 있는 그림을 직접 그렸거나 기존 이미지를 처리하여 고대비를 유지하려는 경우(예: 텍스트를 표시할 때), 이 형식으로 저장하십시오(특히 흑백 또는 컬러 불량 그림의 경우).

부드러운 색상 전환(그라데이션)이 있는 사진, 비디오 프레임 또는 기타 풀 컬러 이미지의 경우 JPEG 형식을 사용합니다.

또한 연속 톤 GIF 이미지를 저장하려는 경우 이미지 준비 프로세스(고정 팔레트로 변환할 때)에서 너무 많은 정보를 버려야 하고 GIF의 압축이 이 방법은 너무 비효율적이어서 재정적으로도 손해를 보게 됩니다(인건비와 파일 크기 면에서 모두).

무엇보다도 GIF 형식은 소위 인터레이스 모양(Interlaced)을 제공하여 수신 초기에 느린 채널을 사용하는 사용자가 그림의 내용을 평가하는 데 도움이 됩니다(효과는 언샵 사진) 및 전체 전송에 필요한 시간을 고려하여 결과적으로 계속 복용할지 또는 거부하는 것이 좋은지 결정을 수락합니다. 그러나 프로그레시브 JPEG와 달리 여기에서의 효과는 실제보다 더 심리적입니다(그림 참조).

또한 GIF 형식의 중요한 장점 중 하나는 모든 단점에도 불구하고 생략할 수 없는 경우가 있다는 점을 기억해야 합니다. 투명도(확장자 GIF89a) 지원으로 직사각형이 아닌 윤곽선이 있는 실루엣을 표시할 수 있습니다. 기존 배경. GIF 형식의 투명도는 기본적으로 구현됩니다. 하나의 색상(보통 배경)이 투명으로 할당됩니다. 이 이점은 페이지 디자인에서 버튼과 아이콘을 만들 때 자주 사용됩니다(JPEG는 투명도 지원을 제공하지 않음).

결론적으로 다음과 같이 말할 수 있습니다. GIF - 최선의 선택기존 하드웨어와 소프트웨어 간의 효과적인 절충안을 달성하고 이미지를 여러 브라우저와 알 수 없는 플랫폼에 표시하려는 경우 최대 216개의 범용 색상으로 8비트 GIF 이미지를 인덱싱하는 기능이 필수적입니다.

JPEG - 사진 및 비디오 프레임 형식

JPEG 형식은 80년대 후반과 90년대 초반에 이 표준을 만든 Joint Photography Experts Group Committee(Joint Committee of Photography Experts)의 약어에서 그 이름을 얻었습니다. JPEG 형식은 손실 압축 알고리즘(이산 코사인 변환)을 기반으로 하며, 이를 통해 이미지가 영역(일반적으로 8x8 픽셀 정사각형)으로 나뉘며, 그 내에서 색상 분포가 수학 함수로 대체되고 계수만 이 기능이 저장되어 그 형태를 복원할 수 있습니다. 당연히 (이미지를 교체하는 데 사용된 기능의 복잡성에 따라) 약간의 품질 손실이 발생하고 복원 후에는 더 이상 실제 그림이 아니라 수학적 "대리"를 얻게 됩니다. 그러나 원본의 품질과 압축 정도에 따라 품질 손실이 시청자에게 완전히 보이지 않을 수 있습니다. 그러나 GIF에 비해 JPEG의 주요 이점은 GIF가 8비트(256색)에 불과하지만 JPEG는 24비트이며 최대 1,670만 색상을 표시할 수 있다는 것입니다.

이러한 이유로 풀 컬러 JPEG는 GIF보다 훨씬 더 많은 비디오 정보를 자연스럽게 재생합니다. 이 형식은 스캔한 사진이나 디지털 사진, 디지털화된 비디오 프레임 또는 렌더링된 3D 컴퓨터 그래픽 장면과 같은 실제 이미지에 가장 적합합니다.

JPEG의 또 다른 장점은 GIF와 달리 적용되는 압축량을 설정할 수 있다는 것입니다. 원본 이미지, 크기와 품질 사이에 필요한 균형을 유지할 수 있습니다.

JPEG의 압축 비율은 사용하는 이미지 편집 프로그램에 따라 크게 다르지만 웹 페이지는 일반적으로 허용되는 품질을 제공하는 10:1 또는 20:1(원본 이미지에 대한 볼륨 비율로 표시)의 비율을 사용합니다. 그럼에도 불구하고 이미지를 100:1의 극한 값까지 압축할 수 있습니다(물론 상당한 품질 손실이 있음).

따라서 JPEG 형식의 사진으로 작업할 때 1670만 색상의 24비트 이미지를 저장할 수 있으며 압축 중 품질 손실에도 불구하고 여전히 256색 GIF보다 원본과 훨씬 더 일치합니다. 성능. 이 경우 불가피한 품질 손실은 원본 이미지의 크기, 품질 및 종류에 따라 크게 좌우됩니다.

또한 JPEG를 사용하면 소위 프로그레시브 디스플레이를 정의할 수 있습니다. 즉, 로드할 때 이미지의 "거친" 표현이 화면에 즉시 나타나고 더 많은 정보가 수신될수록 점진적으로 개선됩니다( 동시에 다운로드가 완료되기 전에도 공급되는 자료의 본질에 대한 필요한 아이디어를 얻을 수 있으며 모든 단계에서 프로세스를 중단하여 네트워크 콘텐츠 탐색 시간을 크게 절약할 수 있습니다.

이러한 도구를 마음대로 사용할 수 있으며 이러한 단계적 표현은 채널의 혼잡과 싸우는 데 좋은 도움이 될 수 있습니다. 인터레이스 GIF와 반대되는 프로그레시브 JPEG의 유일한 문제는 이전 브라우저에서 지원하지 않을 수 있다는 것입니다.

PNG - 보편적인 래스터 참신

차세대 래스터 형식인 PNG는 JPEG와 GIF의 최고의 기능을 사용하고 이미지 제공에 고유한 접근 방식을 추가했습니다. 하나의 파일.

PNG(Portable Network Graphics) 형식은 W3C 컨소시엄에서 표준으로 승인한 비교적 새로운 래스터 그래픽 형식으로 GIF와 JPEG 모두 "구식" 형식을 점차적으로 대체해야 합니다. PNG는 색상 인덱싱(최대 256색), 24비트 및 48비트 색상(True-Color) 지원, 투명 채널(알파 채널) 작업을 모두 제공하며 기존 비트맵 스토리지보다 훨씬 효율적입니다. 형식.

풀 컬러 사진을 위한 압축 알고리즘은 품질 면에서 JPEG를 능가하며 제한된 인덱스 팔레트(최대 256색)를 지원하여 새로운 형식은 GIF 형식에서 구현된 것보다 10-30% 더 나은 무손실 압축을 수행합니다. 어떤 경우에도 사용하기에 최적입니다. 불행히도 새 형식에서는 더 많은 것을 대가로 이미지 품질을 희생할 수 없습니다. 높은 학위압축 JPEG 형식.

PNG 투명도 지원은 GIF와 달리 반투명한 이미지나 테두리를 만들 수 있기 때문에 GIF 파일에서 투명도를 사용할 때 해결하기 어려운 '깨끗한' 테두리 문제를 여기서 쉽게 극복할 수 있다. .

그러나 PNG가 제공하는 모든 개선 사항에도 불구하고 새 형식은 웹 사이트 디자이너와 소프트웨어 제조업체가 이미지를 새 형식으로 렌더링하고 게시를 준비하는 데 사용하는 경우에만 시작됩니다. 그동안 Netscape Navigator와 Microsoft Internet Explorer 모두에서 이 형식에 대한 지원을 최근에 포함했음에도 불구하고 인터넷 어디에서나 PNG 이미지를 찾기가 상당히 어렵습니다.

그리고 비록 그들이 최신 버전 PNG를 지원하기 때문에 매우 제한된 방식으로 지원합니다. 현재 전체 PNG 파일을 보고자 하는 사용자를 위한 유일한 솔루션은 플러그인(예: PNG Live)을 직접 설치하는 것입니다.

분명히 개발자는 사용자가 새로운 형식으로 완전히 전환되기를 기다리면서 속도를 늦추고 있습니다. 음, 건전한 보수주의는 결코 해를 끼치 지 않지만 최소한 GIF 형식의 기존 사용을 모두 대체하여 점진적으로 PNG로 이동하는 것이 좋습니다.

벡터 표현

JPEG, GIF 및 PNG는 모두 이미지의 개별(픽셀 또는 포인트) 표현을 기반으로 하는 비트맵 형식이지만, 벡터 형식수학 공식(그림의 기하학적 표현)을 기반으로 합니다. 벡터 그래픽은 특히 다이어그램, 텍스트 및 산업용 그래픽과 관련하여 래스터 그래픽에 비해 상당한 이점을 제공합니다(또한 형식의 비용 효율성은 인터넷에서 매우 중요합니다).

따라서 첫 번째 이점은 이미지의 모든 단일 픽셀이 설명되는 것이 아니라 전체 그림이 설명되기 때문에 비트맵에 비해 벡터 이미지의 크기가 훨씬 더 작다는 것입니다(예: 원을 설정하려면 3-4개의 숫자를 전송해야 합니다. 반경, 중심 좌표 및 선의 유형 또는 두께 및 속성). 벡터 표현을 설명하는 수학 공식은 개별 픽셀과 해당 속성보다 훨씬 적은 공간을 차지합니다.

벡터 표현의 또 다른 중요한 이점은 이미지 해상도나 선명도의 손실 없이 이미지(또는 해당 부분의 세부 묘사)를 사실상 무제한으로 확대할 수 있다는 것입니다. 벡터 표현을 특정 팔레트, 플랫폼, 하드웨어 또는 디자인에 적용하기 위해 노력할 필요가 없습니다. 압축 방식과 디스플레이 품질이 문제 없이 일치했습니다.

그러나 모든 래스터 이미지를 벡터 형식으로 변환할 수 있는 것은 아닙니다(예: 사진, 스캔한 그림 또는 래스터 그림은 벡터화하기 어렵습니다). 그러나 특별히 준비된 벡터 드로잉(예: 라인 아트, 픽토그램, 테크니컬 일러스트레이션, 지도, 정보 그래픽 및 역사적으로 벡터인 기타)은 오늘날과 같이 인터넷에 게시하기 위해 래스터화하는 것은 어리석은 일입니다.

World Wide Web에서 벡터 그래픽을 표시하는 데 문제가 발생한 이유는 래스터 외에 다른 표시 방법이 없었고, PDF 형식의 파일을 표시하는 플러그인이 등장하여 작업 유연성이 제대로 제공되지 않고 모든 콘텐츠를 하나의 형식으로 저장해야 했기 때문입니다. PDF.

벡터 그래픽이 추가 소프트웨어 없이 기존 HTML 형식에 매끄럽게 포함될 수 있도록 하기 위해 W3C 표준 위원회는 현재 PGML(Precision Graphics Mark-up Language) 및 VML(Vector Mark-up Language)의 두 가지 새로운 벡터 표준을 고려하고 있습니다. . PGML은 Adobe Systems, IBM, Netscape 및 Sun Microsystems에서 지원되는 반면 VML은 Microsoft, Hewlett-Packard, Autodesk, Macromedia 및 Visio에서 지원됩니다. 두 표준 모두 XML 마크업 언어의 확장을 기반으로 하며 웹에서 HTML의 후속 제품으로 사용하도록 홍보되고 W3C에서 향후 사용을 위해 권장합니다.

그러나 현재 플러그인이 이미 사용 가능하긴 하지만 어떤 브라우저도 벡터 그래픽 표준을 지원하지 않습니다. 오늘날 웹에서 정적 벡터 이미지를 표시하는 가장 인기 있는 방법은 Macromedia의 SWF(Shockwave Flash) 형식과 여전히 과소평가된 Xara Flare 형식입니다.

플레어- 좋은 결정, 페이지의 세부 수준을 거의 무제한으로 높일 수 있는 벡터 이미지를 포함할 수 있지만 크기는 다음과 비슷합니다. 충격파 플래시. 이것은 이미지를 보기 위해 추가 모듈을 사용하는 것이 그렇게 불편하다는 말은 아니지만 페이지에서 이러한 도구를 사용할 때 사용자에게 이에 대해 경고하고 사용자가 이동하기 전에 적절한 모듈을 다운로드할 수 있는 기회를 제공해야 합니다. 이러한 요소를 포함할 페이지입니다. 물론 단기적으로는 새 사용자의 탐색 프로세스가 느려지지만 해당 도구가 최종적으로 브라우저의 다음 버전에 포함되고 새 사용자가 더 이상 추가 기능이 필요하지 않을 때까지 점점 더 많은 지지자를 얻게 될 것입니다. 기준 치수.

애니메이션, 상호 작용 및 상호 작용

일반적으로 GIF 이미지는 하나의 파일에 특별한 스택으로 배열될 수 있으며 결과 "영화"(플립북)는 간단한 비트맵 애니메이션을 만들어 재생할 수 있습니다. Netscape와 Microsoft는 모두 브라우저의 세 번째 버전부터 "애니메이션" GIF 형식을 지원했기 때문에 이제 웹에서 이들의 존재를 피하기가 어렵습니다. 이러한 GIF 스택을 만들 수 있는 수많은 GIF 애니메이터가 널리 사용됩니다(상업용 및 공용). 그러나 애니메이션 GIF는 이러한 스택의 각 "레벨"이 개별 GIF이므로 관리할 수 없는 파일 크기로 이어질 수 있습니다. 컴퓨터 애니메이션셀 수 없는 킬로바이트 수를 "생성"할 수 있습니다.

Java 또는 JavaScript와 함께 사용자에게 응답하는 대화형 애니메이션을 만들 수도 있습니다.

이제 웹 애니메이션 및 대화형 사용자 상호 작용을 위한 다른 솔루션을 살펴보겠습니다. 여기에서 주요 역할은 오랫동안 Shockwave 및 Flash 프로그램으로 시장에 진입하고 지속적으로 제품을 개선하여 효율성을 높인 Macromedia가 계속 수행하는 것입니다. 사용자와 디자이너의 필요에 따라..

원래 Macromedia Director용 형식으로 제작된 Shockwave는 주로 인터넷에서 사용하기 위해 특별히 제작된 대화형 및 그래픽 콘텐츠 제작을 목표로 하는 프로토콜 제품군입니다. 그리고 Shockwave Flash는 일반적으로 독특한 도구이자 가장 더 나은 방법애니메이션을 만들어 웹 페이지에 게시합니다. Shockwave Flash는 매우 작은 파일을 생성하며(주로 벡터 표현 형식을 사용하기 때문에) 다른 형식에 비해 준비 측면에서 가장 편리합니다.

이러한 애니메이션을 페이지에 게시할 때 사용자에게 이를 알리는 것을 잊지 말고 미리 추가 모듈을 비축하고 다운로드를 기다리는 지루한 시간에 대비할 수 있습니다. 그러나 Netscape Navigator 및 인터넷 익스플로러기본 패키지에도 Flash 애니메이션을 볼 수 있는 뷰어가 있습니다. Netscape는 Navigator의 향후 버전이 코드 수준에서도 Flash를 지원하게 될 것임을 확인했습니다.

최종 결정은 당신의 몫

따라서 웹 콘텐츠 표시에 대한 태도가 변화하고 있으며 이를 지원하는 새로운 데이터 형식과 개발 도구가 등장합니다. 그러나 그래픽을 나타내는 데 사용되는 이전 형식(GIF 및 JPEG)은 여전히 ​​널리 사용됩니다. 거의 모든 브라우저에서 지원되며 대부분의 개발자는 해당 브라우저를 사용한 광범위한 경험이 있습니다. 이미지 품질과 파일 크기 간의 균형을 유지하려면 특정 응용 프로그램에 올바른 형식을 사용하는 것이 중요합니다. 예를 들어, 하나의 GIF 이미지는 JPEG 이미지보다 더 많은 공간을 차지하고 낮은 품질의 결과를 생성할 수 있지만 다른 하나는 그 반대일 수 있습니다.

그러나 비트맵을 표현할 때 PNG가 더 선호되고 더 나아가서 사용하려고 하면 벡터 이미지, 오늘은 Macromedia의 Shockwave Flash 형식입니다.

SWF(Shockwave Flash) 형식은 일반적으로 사용되지 않지만 내부 벡터 형식입니다. 플래시 프로그램 Macromedia에서 제공하므로(CD-ROM의 "Macromedia Flash 자습서" 참조) 고유한 이미지나 애니메이션을 얻으려면 Macromedia에서 적절한 멀티미디어 패키지를 구입해야 하며 사용자는 시각화를 위해 추가 모듈을 설치해야 합니다. 결과. 따라서 웹 페이지에 벡터 드로잉을 간단히 배치하려면 다음을 극복해야 합니다. 전선불편.

그럼에도 불구하고 곧 표준이 될 다른 벡터 형식이 진행 중입니다.

ComputerPress 5 "1999