웹디자인의 완벽한 이미지 처리를 위한 5가지 요소
저자：Eve Cole
업데이트 시간：2009-06-20 16:51:39
1. 형식: 컴퓨터에서 생성된 간단한 형태(예: 로고, 아이콘)가 있는 이미지에는 PNG 형식이 선호되는 반면, 색상이 풍부한 사진은 JPEG이어야 합니다. 색상이 적고 그라데이션이 없는 경우 GIF 형식을 사용해야 합니다.
GIF는 가장 일반적으로 사용되는 웹 이미지 형식입니다. GIF는 최대 256가지 색상을 지원하며 사진을 제외한 거의 모든 이미지에 사용할 수 있습니다. 또한 간단한 애니메이션과 투명한 이미지를 생성하는 기능도 있습니다.
PNG 형식은 비교적 새로운 형식이며 W3C에서 권장하는 형식이기도 합니다. PNG-8은 GIF와 비슷한 최대 256가지 색상을 포함할 수 있으며, PNG-24는 모든 색상을 더 높은 품질로 표현할 수 있는 RGB 모드를 지원하며, PNG-32는 투명하게 설정할 수 있는 PNG-24 기반의 알파 채널을 추가합니다.
JPEG는 약 1,670만 색상을 저장할 수 있으며 사진을 저장하는 데 자주 사용됩니다. 하지만 그 외에 JPEG는 거의 사용되지 않습니다. 이미지의 색상이 256개 미만이거나 단색 영역이 넓은 경우 JPEG는 제대로 작동하지 않습니다. 고품질 이미지를 얻기 위해 파일 크기를 두 배로 늘릴 수 있습니다.
이미지 형식을 선택할 때는 아래 설명과 같이 색상, 투명도, 애니메이션 등 사용 범위를 종합적으로 고려해야 합니다. Photoshop 또는 Fireworks의 내보내기 마법사를 통해 다양한 매개변수를 비교할 수 있습니다. 선택 기준은 허용 가능한 이미지 품질을 유지하면서 파일 크기가 최대한 작아야 한다는 것입니다.
2. 색상 생성 이미지는 CMYK 모드가 아닌 RGB 모드를 사용하여 인쇄해야 합니다. 더 이상 8비트 모니터를 사용하는 사람이 거의 없으므로 브라우저 안전 색상에 대해 걱정하지 마십시오. 색상 선택은 VI(시각적 아이덴티티) 시스템과 같은 통합 표준을 참조해야 합니다. 색상의 수와 효과는 이미지 형식을 결정하는 중요한 요소입니다. 예를 들어 색상 그라데이션은 많은 색상을 생성하는 경우가 많습니다. GIF로 저장하면 왜곡이 발생하고 파일 크기도 크게 늘어납니다. PNG-24, PNG-32 또는 JPEG 형식 사용을 고려해야 합니다.
3. 크기 벡터 생성 도구를 사용하여 생성된 이미지는 PNG 형식으로 저장하기에 적합한 경우가 많으며, 크기는 벡터 그리기 도구에서 결정되어야 하며, 일단 비트맵으로 변환되면 쉽게 크기를 조정할 수 없습니다(특히 확대하면 안 됩니다). ). Fireworks에서 생성된 PNG 파일에는 레이어와 같은 편집 가능한 정보가 포함되어 있으며, 그 안에 있는 선, 모양 및 텍스트는 모두 벡터 그래픽이라는 점은 주목할 가치가 있습니다. 이러한 이미지를 웹페이지에 적용하려면 먼저 출력 작업을 수행하여 파일 크기를 압축해야 하며, 출력된 PNG 이미지도 편집 가능한 정보가 손실되므로 비트맵으로 변환됩니다. 따라서 출력 작업 전에 이미지 크기 조정을 완료해야 합니다. 이미지의 윤곽선과 그라데이션이 충분히 명확하도록 비트맵의 크기가 조정되지 않습니다.
기존 비트맵과 사진의 경우 HTML 언어의 너비 및 높이 속성을 사용하여 이미지 크기를 변경하는 대신 Photoshop 및 기타 소프트웨어를 사용하여 크기를 조정해야 합니다. 이미지 크기를 제어하기 위해 HTML 언어를 직접 사용하면 심각한 이미지 왜곡이 발생할 수 있습니다.
일반적으로 웹페이지에 게재되는 이미지는 상대적으로 작은 크기로 제어되어야 합니다. 텍스트와 혼합하는 경우 너비는 약 300픽셀이어야 합니다. 단독으로 나타나더라도 너비는 600px 이하여야 합니다. 높이는 한 화면을 넘지 않는 것이 적절하다.
4. 투명 GIF와 PNG는 모두 투명도를 지원하지만 방식이 다릅니다. GIF는 인접한 그라디언트 색상의 투명도를 고려하지 않고 하나 또는 여러 색상을 완전히 투명하게 설정합니다. 즉, 배경색이 크게 변하는 경우(또는 여러 가지 대비되는 색상이 포함된 경우) 투명한 부분으로의 전환이 원활하지 않고 뚜렷한 구분선이 생깁니다. 투명한 GIF를 생성하려면 캔버스 배경색을 대상 효과의 배경색과 같거나 가깝게 설정해야 합니다. PNG에는 이 문제가 없으며 반투명으로 설정할 수도 있습니다.
그러나 IE6에서는 기본적으로 투명 PNG를 올바르게 표시할 수 없으므로 적절한 조치를 취해야 합니다.
5. 애니메이션 웹페이지의 애니메이션에는 일반적으로 Flash와 애니메이션 GIF가 포함됩니다. Flash는 강력한 기능, 풍부한 효과, 높은 이미지 품질 및 강력한 제작 소프트웨어를 갖추고 있으며 대부분의 경우 웹 애니메이션에서 선호되는 형태입니다. 애니메이션 GIF의 단점은 256색 이하만 사용할 수 있고 복잡한 효과가 포함된 애니메이션을 만들기가 어렵다는 점입니다. 그러나 파일 크기가 작고 플러그 없이 기존 브라우저나 최신 브라우저에서 재생할 수 있다는 장점이 있습니다. -지원 중입니다.
