멀티미디어 강의 - 웹에서 이미지 사용
이 문서는 이미지와 텍스트를 사용하는 조건, 이미지 다운로드를 가속화하는 방법 및 적절한 이미지 포맷 선택에 대해 자세히 설명합니다.
이미지 사용 시기
대부분의 이미지는 한 장의 이미지가 천막 말씀에勝ります. 하지만, 긴급한 사람들에 대한 주의를 받지 않을 것입니다. 첫째, 가장 중요한 것은 문서의 그래픽을 시각화 도구로 사용하되, 무의미한 장식으로 사용하지 말아야 합니다. 그들은 텍스트의 내용을 지지하고 독자가 문서 내에서 탐색하는 데 도움이 되어야 합니다. 이미지를 사용하면 문서 내용이 더 명확해지고, 주석이나 예시를 추가할 수 있습니다. 내용을 지지하는 사진, 그래프, 곡선도, 지도, 그림 등은 자연스럽고 적합한 선택입니다. 예를 들어, 제품 사진은 온라인 카탈로그와 쇼핑 가이드에서 매우 중요한 구성 요소입니다. 또한 링크 기능을 가진 아이콘과 인쇄 기호, 애니메이션 이미지 등도 내용이나 외부 자원을 안내하는 매우 효과적인 시각적 가이드일 수 있습니다. 만약 어떤 이미지가 이러한 모든 역할을 하지 않는다면, 그것을 무시해야 합니다!
문서에 이미지를 추가할 때 고려해야 할 또 다른 중요한 요소는, 네트워크를 통해 특히 모뎀을 통해 문서를 전송할 때 검색에서 발생하는 시간 지연입니다. 일반적인 문서는 최대 10-15 킬로바이트까지 수용할 수 있지만, 이미지는 쉽게 수백 킬로바이트로 커질 수 있습니다. 또한, 문서의 전체 다운로드 시간은 모든 부분의 합뿐만 아니라 네트워크 부하로 인한 지연도 고려해야 합니다.
연결 속도(즉, 네트워크 대역폭)에 따라bandwidth일반적으로 bps 또는 b/s로 표시되며, 네트워크가 방해받아 연결 속도가 느려질 수 있는 상황에서는, 100 KB의 이미지를 포함한 독립 문서를 다운로드하려면, 대부분의 사람들이 잠을 자고 있는 밤 1, 2시 사이에 57.6 Kbps의 모뎀을 사용하여 약 15초 정도 걸려 다운로드가 완료될 수 있습니다. 또한, 점심 시간에 9600 bps의 모뎀을 사용하여 10분 이상 걸려 다운로드할 수도 있습니다. 그림을 받았나요?
물론, 이미지와 다른 멀티미디어의 사용은 인터넷 서비스 제공업체가 Web 콘텐츠를 더 빠르고 더 나은, 더 강력한 방식으로 제공하는 데 계속 노력하게 합니다. 곧 56 Kbps 모뎀 연결은 역사의 무덤에 묻혀질 것입니다(9600 bps 모뎀과 같이), 이는 케이블 모뎀과 ADSL과 같은 새로운 기술로 대체될 것입니다. 실제로 대부분의 연결은 1Mbps 이상의 속도로 빠르게 증가할 것입니다.
가격이 낮아지면서 네트워크 사용이 늘어나면서 차단 문제가 발생했습니다. 네트워크 연결 속도가 얼마나 빠르더라도, 과부하 상태인 서버에 접근하려고 할 때는 정상적으로 접근할 수 없습니다.
텍스트를 사용할 때
텍스트는 언제나 유효합니다. 일부 사용자에게는 텍스트가 그들의 문서에서 유일하게 접근할 수 있는 부분입니다. 우리는 대부분의 경우 문서가 누구나 접근할 수 있도록 해야 한다고 권장합니다, 그리고 이미지를 볼 수 없는 사람들 또는 브라우저의 자동 이미지 다운로드 기능을 비활성화하여 네트워크 연결 성능을 개선하려는 사용자들도 포함됩니다. 이미지를 추가하는 것이 문서에 대한 필요성이 매우 강할 수 있지만, 때로는純 텍스트 문서가 더 의미 있을 수 있습니다.
기타 형식에서 웹 페이지로 변환된 문서는 일반적으로 내장된 이미지가 없으며, 문헌과 다른 일부 중요한 내용은 일반적으로 완전히 사용할 수 있는純 텍스트 형식입니다.
접근 속도가 매우 중요한 경우,純 텍스트 문서를 생성해야 합니다. 사용자가 당신의 문서를 쉽게 가져갈 수 있다고 생각한다면, 문서에서 이미지를 피하고 이러한 사용자의 필요성을 충족시켜야 합니다. 특히 극단적인 경우, 사용자가 작품의 두 가지 복사본 중 하나를 선택할 수 있는 홈페이지(가이드 페이지)를 제공할 수 있습니다: 하나는 이미지가 포함되어 있고, 다른 하나는 이미지가 제거되었습니다(_popular browsers have special image icons to leave space for images that are yet to be downloaded, and these placeholders may mess up the document layout, even making it impossible to read).
웹 상의 많은 인덱싱 서비스가 쉽게 검색할 수 있도록 하고 싶다면, 텍스트는 가장 적합한 형식입니다 - 단지 이미지만을 지원하고, 장식과 불필요한 그래픽은 지원하지 않습니다. 그러나 이러한 검색 엔진은 일반적으로 이미지의 존재를 무시합니다. 페이지의 주요 내용이 이미지로 제공된다면, 온라인 웹 카탈로그에서 당신의 문서에 대한 정보는 매우 적습니다.
이미지의 다운로드 속도를 높이기
문서에 포함할 내용을 신중하게 선택하는 것 외에도, 이미지로 인한 부하와 지연 문제를 개선할 수 있는 많은 방법이 있습니다：
간단성을 유지
24비트 컬러 그래픽이 전체 화면에서, 표준 포맷(예: GIF 또는 JPEG 등)의 디지털 압축을 통해 크기를 줄이면 여전히 대부분의 네트워크 밴드위드를 차지합니다. 따라서, 다양한 이미지 관리 도구를 사용하여 이미지 크기를 최적화하고, 색상의 수를 최소한의 픽셀 수로 줄이는 것이 좋습니다. 그림을 간단하게 만들고, 풍경 사진을 사용하지 마시고, 이미지에 큰 공백 배경, 불필요한 경계 및 공간을 차지하는 요소를 피하십시오. 또한, 두 가지 가까운 색상을 혼합하여 세 번째 색상을 얻는 효과를 사용하지 마시고, 이 기술은 이미지의 압축 가능성을 크게 저하합니다. 대신, 대면적이고 일관된 색상을 사용하면 GIF 또는 JPEG 포맷으로 쉽게 압축할 수 있습니다.
이미지를 재사용
이 점은 아이콘과 GIF 애니메이션에 특히 적용됩니다. 대부분의 브라우저는 로컬 스토리지에 도입된 문서 구성 요소를 캐시하므로, 데이터를 얻을 때 더 빠르고, 더 적은 네트워크 연결을 사용할 수 있습니다. 작은 GIF 애니메이션 파일의 경우, 애니메이션에서 변경된 부분만 업데이트하도록 각 연속 이미지를 준비하면, 전체 이미지를 새로 고침하는 것보다 더 빠르게 애니메이션을 표시할 수 있습니다.
대형 문서를 분할
이것은 이미지를 포함한 일반적인 원칙입니다. 많은 작은 문서 부분은 효과적인 목차와 함께 효과적으로 조직되어 있으며, 전체 대형 문서보다 사용자가 더 쉽게 받아들이게 됩니다. 일반적으로, 사람들은 몇 개의 페이지에서 넘어가는 것을 선호하고, 대형 문서를 다운로드하는 데 시간을 낭비하지 않기를 원합니다. 이는 TV 채널 탐색 증후군과 유사합니다. 좋은 경험은 각 문서를 50 KB 정도로 유지하는 것입니다. 이렇게 하면 독자가 가장 느리운 연결을 사용하더라도 지루하지 않게 됩니다.
필요할 때 큰 그래픽을 분리
매우 큰 이미지를 위해 특별한 링크를 제공하면, 이 링크는 이미지의 축소판일 수 있으며, 독자는 전체 이미지를 다운로드할 필요가 있는지, 그리고 언제 다운로드할지를 결정할 수 있습니다. 또한, 이러한 이미지가 내장 이미지와 같이 문서의 다른 요소와 혼합되지 않기 때문에, 이를 식별하고 지역 저장소에 저장하여 미래의 연구를 위해 사용하기가 쉽습니다.
이미지의 크기를 지정
마지막으로, 성능을 개선하는 또 다른 방법은 이미지의 사각형 경계의 높이와 너비를 레이블에 포함시키는 것입니다. 이러한 크기를 지정하면 추가적인 몇 가지 단계를 건너뛰고, 기능이 확장된 브라우저는 이미지가 문서 내에서의 크기를 다운로드, 검사하고 계산하는 추가적인 단계를 사용하지 않아도 됩니다. 그러나 이 방법에는 좋지 않은 점이 있습니다. 사용자가 자동 이미지 다운로드 기능을 끊은 경우에도, 브라우저는 이미지를 예약한 공간을 지정된 크기로 표시합니다. 이렇게 되면 독자에게는 일반적으로 비어 있는 프레임이 남게 되며, 이 문제에 대한 해결책이 없더라도, 우리는 이러한 크기 속성을 사용하도록 권장합니다. 왜냐하면 우리는 네트워크 성능을 개선할 수 있는 모든 행동을 장려하기 때문입니다.
JPEG이든 GIF이든?
이미지의 출처나 도구 소프트웨어가 특정 형식을 선호한다면, JPEG이나 GIF 이미지 중 하나만 사용할 수 있습니다. 이제 두 가지 형식은 모두 브라우저에 의해 널리 지원되므로 사용자가 이들을 볼 수 있는 문제는 없습니다.
그러나, 우리는 이 두 가지 형식을 최대한 활용하기 위해 특정 도구를 사용하여 생성하거나 변환하는 것을 권장합니다. 예를 들어, GIF의 투명 특성을 아이콘과 작은 장식 기호에 적용할 수 있습니다. JPEG을 사용하여 크고 다양한 색상을 가진 이미지를 압축하여 다운로드 속도를 빠르게 할 수 있습니다.
<img> 태그
<img> 태그는 문서의 현재 문서 흐름에서 그래픽 이미지를 참조하거나 삽입할 수 있습니다. 이 태그에 대한 자세한 정보를 더 알고 싶다면 다음을 참조하세요:
