복호화로 PNG. PNG 란 무엇입니까? png 형식이란 무엇이며 사용되는 형식의 특징

웹 및 기타 디지털 용도로 이미지를 만들 때 최상의 결과를 제공 할 수있는 파일 형식은 무엇입니까? 속도 대 이미지 품질 및 크기를 고려해야합니다. 그렇다면 SVG, PNG 또는 JPG 중 무엇을 사용해야합니까?

72dpi 공간에 맞게 JPG를 사용하여 계속 진행 한 적이 있습니다. 더이상. 고해상도 화면, 다중 뷰포트 및 빠른 웹 사이트에 대한 요구로 인해 모든 과정이 훨씬 더 어려워졌습니다. 각 형식의 장단점을 살펴 보겠습니다!

SVG

SVG 또는 확장 가능한 벡터 그래픽은 매우 실용적입니다. 이것이 디자이너가이 형식을 더 자주 사용하는 이유입니다.

SVG는 벡터 형식이므로 모든 크기에서 멋지게 보이며 사진 이외의 거의 모든 유형의 이미지에서 작동합니다.

SVG는 무손실 형식이므로 압축시 데이터가 손실되지 않고 무제한의 색상을 표시하며 웹의 그래픽과 로고, Retina 및 기타 고화질에서 볼 프로젝트에 가장 일반적으로 사용됩니다. -해상도 화면.

SVG의 장점

벡터 형식은 모든 크기에서 잘 렌더링됩니다.
코드 또는 텍스트 편집기에서 간단한 SVG 렌더링을 만드는 기능
Adobe Illustrator 또는 Sketch에서 복잡한 그래픽 디자인 및 내보내기
SVG 텍스트 사용 가능
SVG는 스타일과 쓰기가 쉽습니다.
SVG 형식은 최신 브라우저에서 지원되며 향후에도 사용할 수 있습니다.
형식은 매우 압축 가능하고 가볍습니다.
텍스트 형식으로 인해 검색에 적합
투명성 지원
스틸 또는 애니메이션 이미지를 저장할 수 있습니다.

SVG의 단점

SVG 디자인은 복잡해질 수 있습니다.
일부 오래된 브라우저에는 나타나지 않습니다.
이메일 클라이언트에 대한 제한된 지원

PNG

PNG 또는 Portable Network Graphics는 JPG가 제공 할 수없는 투명성을 제공하는 웹용 형식입니다. 이것이 PNG가 웹 사이트 디자인을위한 로고와 같은 요소를로드하는 데 매우 인기있는 이유입니다.

PNG에는 PNG-8 및 PNG-24의 두 가지 유형이 있습니다. PNG-8은 256 색만있는 더 제한된 색상 팔레트를 사용하고 투명도가 약간 더 우수하며 작은 크기로 내보내집니다. PNG-24는 무제한 색상 팔레트를 사용하고 투명도를 지원하지만 큰 크기로 내보내집니다. 두 PNG 유형 모두 무손실 압축이 있습니다.

PNG 형식은 GIF와 유사하지만 애니메이션을 지원하지 않습니다. 이 형식은 아이콘, 작은 정지 이미지 또는 투명도가 필요한 모든 이미지에 가장 일반적으로 사용됩니다.

PNG의 장점

투명성 지원
텍스트가있는 이미지에 적합
PNG 형식은 로고를 잘 렌더링합니다.
검색 엔진에 대한 인라인 텍스트 설명 포함
PNG-8은 파일 크기가 작고 가장 가볍습니다.
들쭉날쭉 한 가장자리없이 내보내기

PNG의 단점

이미지와 같은 대용량 파일의 경우 파일 크기가 빠르게 증가합니다.
일부 오래된 이메일 클라이언트는 렌더링에 문제가 있습니다.
애니메이션 없음
PNG-24 파일은 크기가 커서 인터넷을 통해 공유하기에 그리 좋지 않고 편리하지 않습니다.

Jpeg

JPG 또는 JPEG는 아마도 가장 유명한 이미지 형식 일 것입니다. 거의 무제한의 컬러 디스플레이 덕분에 사진에 편리하기 때문에 대부분의 이미지에 대한 기본 옵션입니다.

JPG는 또한 이미지 압축 방법을 0 % (강력한 압축)에서 100 % (비 압축)까지 선택할 수있는 기능을 제공합니다. 대부분의 디자이너는 60 ~ 70 % 범위에서 무언가를 선택합니다. 이미지는 여전히이 수준의 압축에서 잘 보이지만 파일 크기는 훨씬 더 작습니다.

JPG는 손실 압축을 사용하며 압축 중 원본 데이터를 지원하지 않습니다. 사진을 다시 저장하고 JPG 형식으로 내보낼 때마다 성능이 저하됩니다.

JPG 형식은 이미지, 사진 및 색상이 많은 모든 것에 가장 일반적으로 사용됩니다.

JPEG의 장점

다색 및 사진 촬영에 적합
쉽게 파일 크기 줄이기
이메일 클라이언트에 일관되게 표시

JPEG의 단점

투명성 없음
텍스트에 대해 들쭉날쭉 한 가장자리를 만듭니다.
애니메이션 없음
손실 형식
검색을위한 자동 메타 데이터는 대체 정보를 포함하지 않아야합니다.

어떤 형식을 사용해야합니까?

이제 SVG, PNG, JPG의 차이점을 알았으니 어떤 것을 사용해야합니까?

이에 대한 답을 얻기 위해 다음 질문 중 몇 가지를 스스로에게 물어볼 수 있습니다.

벡터 또는 비트 맵 형식이 필요합니까?

벡터 : SVG

래스터 : JPG 또는 PNG

투명성이 필요합니까?

예 : SVG 또는 PNG

다중 색상 이미지를 사용하고 있습니까?

예 : JPG 또는 PNG

큰 사진인가요?

이미지에 텍스트가 포함되어 있습니까?

무손실 압축이 중요합니까?

예 : SVG 또는 PNG

그래픽을 업데이트하고 재구성해야합니까?

아니요 : PNG 또는 JPG

애니메이션을 사용하고 있습니까?

아니요 : JPG 또는 PNG

산출

세 가지 이미지 형식 (SVG, PNG 및 JPG) 모두 실용적이고 널리 사용됩니다. SVG는 최신 형식이며 종종 가장 작은 파일 크기로 저장할 수 있지만 항상 최상의 옵션은 아닙니다.

프로젝트에서 이미지를 사용하는 방법, 달성하려는 작업에 가장 적합한 파일 유형을 찾기 위해 파일 유형을 선택하는 방법에 대해 생각하십시오. 일부 프로젝트에는 세 가지 파일 형식을 모두 사용하는 이미지가 포함되어있을 수도 있습니다. 이것은 실제로 꽤 자주 발생합니다!

모든 성공적인 작업과 창의력!

PNG 파일은 Portable Network Graphics 형식입니다. 이 형식은 무손실 압축을 사용하며 일반적으로 GIF 이미지 형식을 대체하는 것으로 간주됩니다. 그러나 GIF와 달리 PNG 파일은 아니 지원 애니메이션. 그러나 매우 유사한 MNG (Multiple Image Network Graphics) 형식이 있지만이 형식은 GIF 또는 PNG 파일만큼 인기를 얻지 못했습니다.

PNG 파일 웹 사이트에 그래픽을 저장하는 데 자주 사용됩니다. macOS 및 Ubuntu와 같은 일부 운영 체제는 기본적으로 스크린 샷을 PNG 형식으로 저장합니다.

PNG의 또 다른 용도는 이미지의 일부가 투명해야하는 경우입니다. 이는 일러스트레이션을 만들거나 웹 사이트를 디자인하고 사진을 만들 때 유용 할 수 있습니다. 예를 들어 사진 위에 배치하려는 로고가있는 경우 로고를 "잘라 내고"로고 주위에 투명한 픽셀을 남겨 다른 이미지 위에 배치 할 때 이것은투명도를 통해 이미지가 보였습니다.

PNG 파일을 여는 방법

PNG 파일을 변환하는 방법

작업하는 모든 이미지 파일 변환기는 다음을 수행 할 수 있습니다. pNG 파일을 다른 형식으로 변환 (예 : ICO, GIF, BMP, TIF 등). FileZigZag 및 Zamzar와 같은 일부 온라인 PNG 변환기도이를 처리 할 수 \u200b\u200b있습니다.

또 다른 변형 pNG 파일 변환 -앞서 언급 한 이미지 뷰어 중 하나를 사용합니다. 주로 다양한 유형의 이미지에 대한 "오프너"로 존재하지만 일부는 열린 PNG 파일을 다른 이미지 형식으로 저장 / 내보내기를 지원합니다.

PNG 파일을 사용하는 경우

PNG 파일 사용하기에 좋은 형식이지만 모든 상황에서 반드시 필요한 것은 아닙니다. 때때로 PNG는 너무 커서 불필요한 디스크 공간을 차지하거나 복잡 할뿐만 아니라 웹 페이지에서 사용하면 웹 페이지 속도가 크게 느려질 수 있습니다. 따라서 모든 이미지를 PNG로 변환하기 전에 염두에 두어야 할 몇 가지 사항이 있습니다 (이렇게하지 마십시오).

PNG 파일 크기에 대해 엄격하게 생각할 때 이미지 품질 이점이 공간을 희생하기에 충분한 지 (또는 느린 웹 페이지로드 등) 충분한 지 고려해야합니다. PNG 파일 이후 아니 JPEG와 같은 다른 손실 형식과 같이 이미지를 압축합니다. 이미지가 PNG 형식 일 때 품질이 크게 저하되지 않습니다.

JPEG 파일은 이미지의 대비가 낮을 때 유용하지만 이미지에 선이나 텍스트가 있거나 단색의 넓은 영역과 같이 선명한 대비를 처리 할 때는 PNG가 더 좋습니다. 따라서 스크린 샷과 일러스트레이션은 PNG 형식으로 저장하는 것이 가장 좋으며 "실제"사진은 JPEG / JPG 형식으로 저장하는 것이 가장 좋습니다.

반복해서 편집해야하는 이미지를 다룰 때 JPEG 대신 PNG를 사용하는 것도 고려할 수 있습니다. 예를 들어, JPEG 형식은 소위 세대 손실, 파일 편집 및 저장을 반복하면 시간이 지남에 따라 이미지 품질이 저하됩니다. PNG는 무손실 압축을 사용하므로 해당되지 않습니다.

PNG 파일에 대한 추가 도움말

배경을 PNG 형식으로 투명하게 만들려면 Clipping Magic, 무료 배경 제거 도구 또는 거의 모든 이미지 편집 프로그램과 같은 자동 도구를 사용할 수 있습니다.

예를 들어 Photoshop이있는 경우 이미지를 자체 레이어에 배치하고 배경 레이어를 제거한 다음 도구 (예 : 지우개, 선택 윤곽, 올가미)를 사용하여 이미지에서 투명해야하는 부분을 지 웁니다.

PNG (Portable Network Graphics)는 "ping"으로 발음되며 무손실 압축을 사용하여 그래픽 정보를 저장하기위한 비트 맵 형식입니다. PNG는 GIF를 개선하고 라이선스가없는 그래픽 형식으로 대체하기 위해 만들어졌습니다. PNG는 국제 표준 (ISO IEC 15948 : 2003)이며 W3C에서 공식적으로 권장합니다.

PNG 형식은 그래픽 정보를 압축 된 형식으로 저장합니다. 또한 이러한 압축은 예를 들어 표준 JPEG (최고 품질 수준에서도)와 달리 "손실"없이 수행됩니다.

PNG 형식은 이전의 단순한 GIF 형식을 대체하고 훨씬 더 복잡한 TIFF 형식을 어느 정도 대체하도록 설계되었습니다.

웹 디자인에 대해 이야기하고 있다면 GIF와 비교할 때 다음과 같은 주요 이점이 있습니다.

압축 개선 : 대부분의 경우 PNG 이미지는 GIF 이미지보다 작습니다.
-이미지에 더 많은 색상 : 이미지에 거의 무제한의 색상이 있으며 GIF의 제한은 256입니다.
-알파 채널에 대한 선택적 지원 : GIF는 바이너리 투명도 만 지원하지만 PGN을 사용하면 알파 채널 지원을 통해 무제한의 투명도 효과를 얻을 수 있습니다.

물론 단점은 GIF와 같은 애니메이션에 대한 지원이 부족하다는 점입니다. 물론 MNG (Multiple-image Network Graphics)라는 유사한 애니메이션 표준이 있지만 널리 보급되지 않았기 때문에 최신 브라우저에서 널리 지원되지 않습니다.

PNG 이미지 형식은 가장 인기있는 형식 중 하나이며 사용자에게 품질 손실없이 압축 된 이미지를 저장할 수 있습니다. PNG는 그래픽 편집이나 인터넷에서 가장 많이 사용됩니다. 다음으로 컴퓨터에서이 형식의 파일을 열 수있는 몇 가지 간단한 방법을 살펴 보겠습니다.

보고 편집하기 위해 PNG 파일을 여는 방법에는 여러 가지가 있습니다. 아래 지침을 따르기 만하면 이미지를 여는 것이 어렵지 않습니다.

방법 1 : 이미지 뷰어

인터넷에는 이미지를보고 편집하기위한 많은 그래픽 편집기와 특수 소프트웨어가 있습니다. 사용자에게 많은 기능과 도구를 제공하여 가능한 한 편안하게 사진 작업을 할 수 있도록합니다. 김프 프로그램의 예를 사용하여 PNG 이미지를 여는 과정을 살펴 보겠습니다.

어떤 이유로 김프가 적합하지 않은 경우 아래 링크의 기사에서 이미지를 볼 수있는 전체 프로그램 목록을 숙지하는 것이 좋습니다. 거기에서 당신은 확실히 적합한 것을 찾을 것입니다.

열린 이미지로 다양한 조작을 수행해야하는 경우 고급 기능과 다양한 도구를 갖춘 특수 그래픽 편집기를 사용하십시오. 아래 링크의 기사에서 자세한 내용을 확인할 수 있습니다.

방법 2 : 표준 Windows 도구

모든 버전의 Windows 운영 체제에는 기본 제공 이미지 뷰어가 있습니다. PNG 파일을 여는 데 사용할 수도 있습니다. 이 프로세스를 자세히 살펴 보겠습니다.

표준 Windows 사진 뷰어를 통해 모든 PNG 이미지를 열려면 다음 단계를 따르십시오.

이제 기본적으로 모든 PNG 파일이 표준 사진 뷰어로 열립니다. 프로그램을 열도록 변경하려면 다른 소프트웨어를 선택하여 동일한 단계를 따르십시오.

이 기사에서는 PNG 이미지를 여는 간단한 방법을 자세히 살펴 보았습니다. 보시다시피이 과정에는 복잡한 것이 없으며 모든 것이 말 그대로 몇 단계로 이루어집니다.

또한 무료 PNG 형식은 웹 디자이너에게 GIF보다 다양한 실용적인 이점을 제공합니다.

더 나은 압축 : 대부분의 이미지에서 PNG는 GIF보다 파일 크기가 더 작습니다.
큰 색상 심도 : PNG는 최대 48 비트의 트루 컬러를 제공하지만 GIF에서는 256 색 팔레트 만 제공합니다.
알파 채널 투명도 : GIF가 바이너리 투명도 만 제공하는 경우 PNG는 거의 무제한의 투명 효과를 허용하여 투명성을위한 알파 채널을 제공합니다.

PNG는 GIF처럼 애니메이션을 허용하지 않는다는 점에 유의해야합니다. 그러나이를 허용하는 MNG (Multiple-image Network Graphics) 표준이 있지만 웹 브라우저 및 그래픽 편집기에서 널리 지원되지는 않습니다.

그렇다면 GIF가 여전히 인기있는 이유는 무엇입니까?

PNG가 광고만큼 훌륭하다면 웹에서 널리 사용되지 않는 이유가 궁금 할 것입니다. 대답은 대부분 형식 및 브라우저 지원에 대한 오해입니다.

Internet Explorer 6 및 이전 버전은 PNG 기능 (알파 투명도 포함)의 전체 범위를 지원하지 않기 때문에 사람들은 Internet Explorer가 PNG를 전혀 지원하지 않거나 적어도 투명성을 지원하지 않습니다. 실제로 Internet Explorer 5 및 6은 충분한 PNG 사양을 지원하므로 애니메이션이 적용되지 않은 GIF 이미지와 기능적으로 동등하거나 그 이상이됩니다. Firefox, Netscape 6 이상, Mozilla, Opera 6 이상, Safari 및 Camino를 포함한 다른 모든 참조 브라우저는 PNG 투명도를 완벽하게 지원합니다.

브라우저 지원에 대한 이러한 오해 외에도 GIF의 내장 애니메이션이 성공의 주된 이유였습니다. 수년에 걸쳐 GIF의 사용은 애니메이션에 더 적합 해지고있는 다른 기술 (예 : Flash)에 비해 점점 덜 인기가 있습니다.

투명성은 GIF 및 PNG의 주요 특성이며 종종 웹 디자이너가 사용할 형식을 선택하는 이유입니다. PNG는보다 포괄적 인 투명성 지원을 제공하지만 웹 디자이너는 종종 이전 브라우저에 맞게 GIF 버전의 이미지를 만들어야합니다. CSS를 사용하면 이전 브라우저 용 GIF 이미지와 고품질 PNG를 이해하는 브라우저에 전송하여 가능합니다 (그리고 다소 진부함). 그러나 이것은 웹 디자이너에게는 이중 작업이며 결과적으로 사람들은 저항을 덜 받고 계속 GIF 이미지를 사용합니다.

그래서 우리는 GIF가 여전히 인기있는 몇 가지 이유를 다루었지만 대부분은 개념에 대한 오해 나 익숙한 작업 시나리오를 기반으로합니다. PNG에 대한 몇 가지 핵심 지식과 브라우저에서 안정적으로 사용할 수있는 방법으로 무장하면 제공되는 이점을 최대한 활용할 수 있습니다.

JPEG는 어떻습니까?

JPEG는 또 다른 유비쿼터스 웹 형식이며 사진과 같은 대부분의 경우 PNG 또는 GIF보다 훨씬 좋습니다. PNG는 JPEG와 경쟁하기위한 것이 아닙니다. JPEG 압축은 사진 작업시 파일 크기가 PNG보다 훨씬 작습니다. 반면 PNG는 텍스트, 예술적 선, 로고, "짝수"색상 등이 이미지 내부에있을 때 더 작은 파일을 생성합니다.

겸손한 PNG 사용의 몇 가지 좋은 예

이제 웹 디자인에서 PNG를 사용하는 방법을 살펴 보겠습니다. 각 예제에 대한 모든 파일을 ED의 친구에서 사용할 수있는 별도의 폴더에 모았습니다.

구배

지난 몇 년 동안 그라디언트 (두 개 이상의 색상 사이의 부드러운 전환)는 웹 디자이너의 가장 좋은 친구가되었습니다. 특히 인기있는 것은 미묘하고 미묘한 그라데이션 채우기로, 눈에 띄지 않게 깊이와 질감을 만듭니다.
때로는 GIF가 그라디언트에 가장 적합한 선택입니다. 그라디언트가 단순한 2 색 전환 인 경우 GIF가 완벽하게 작동합니다. 그러나 GIF의 256 색 제한으로 인해 더 복잡한 그라디언트 전환 사이에서 눈에 띄고 조잡한 "밴딩"이 발생하는 경우가 많습니다. 반면 JPEG는 매우 깔끔한 그라디언트를 생성 할 수 있지만 파일 크기가 더 큰 경우가 많습니다. JPEG 그래디언트는 일반적으로 충분하지만 JPEG는 손실 압축을 사용하므로 결과 이미지가 압축되지 않은 것만 큼 좋지 않습니다.

문제의 일반적인 배경 그라데이션 스타일은 버튼, 상자 또는 다른 곳에서 사용됩니다. 그림 5-1과 같이 보일 수 있습니다. 왼쪽 상단에서 시계 방향으로 원본 (비 압축) 이미지, GIF 버전, PNG 버전 및 JPEG를 볼 수 있습니다. 결과에서 PNG가 가장 작은 크기 (515 바이트)임을 알 수 있습니다. 이것은 GIF 이미지보다 4 배 더 작습니다. JPEG는 PNG보다 637 바이트 크기가 약간 더 크며 손실 압축으로 인해 품질이 떨어집니다 (이 간단한 예제에서 사람의 눈으로 품질 차이를 알 수는 있지만 의심 스럽다).

그림 5-1
Photoshop의 패널-웹용으로 저장,
동일한 이미지의 파일 크기 차이를 다른 형식으로 표시

모든 배경에서 작동해야하는 이미지

때로는 다른 인쇄물에서 동일하게 작동하는 이미지를 만들어야하는 경우가 있습니다. 몇 가지 일반적인 예는 로고와 아이콘입니다. 이러한 상황에서 GIF 파일이 전통적으로 지배적이지만이 상황에서 PNG가 더 나은 선택이 될 수있는 몇 가지 이유가 있습니다. PNG는 일반적으로 로고 또는 기타 간단한 "아트"의 파일 크기에서 유리합니다. 또한 PNG의 고유 한 투명도를 통해 어떤 배경에서도 작동하는 단일 파일을 쉽게 만들 수 있습니다. PNG는 GIF와 마찬가지로 바이너리 투명도를 제공하지만 픽셀을 켜거나 끄는 것이 아니라 부분적으로 투명 할 수있는 훨씬 더 바람직한 알파 옵션도 제공합니다. 후자를 사용하면 파일 크기가 증가하고 때로는 바이너리 투명도가있는 GIF보다 더 커지지 만 이미지 가장자리에 앤티 앨리어싱을 허용하고 배경에 더 우아하게 오버레이 할 수 있습니다.

그러나 나는 스텐실 기호가있는 흰색 이미지를 사용하여 개념을 재 작업했습니다. 그들은 투명한 배경에 흰색 기호를 사용했는데, 이는 원칙적으로 매우 효과적 일 수 있습니다. 이 경우 CSS 배경색은 심볼 자체가 아니라 심볼 주변의 정사각형 또는 직사각형 영역에 나타납니다.

Dan과 PJ는 모두 PNG 대신 투명 GIF를 사용했습니다. 이것은 그들의 요구를 완전히 충족 시켰고 아이콘 스타일에 맞는 픽셀 이미지를 만들어야했습니다. PNG를 사용하면 유사한 기술을 얻을 수 있지만 더 자세한 아이콘에서 사용하기 위해 앤티 앨리어싱 및 부분 투명도의 형태가 약간 우월합니다.

좋습니다.하지만 어떤 브라우저에서 작동합니까?

나는 당신이 생각하는 것을 알고 있습니다. PNG 투명도는 모두 좋아 보이지만 실용적입니까?

좋은 소식은 모든 최신 브라우저가 알파 투명도를 포함하여 PNG 이미지를 완벽하게 지원한다는 것입니다. Safari (모든 버전), Firefox (모든 버전), Opera (버전 6 이상), Netscape (버전 6 이상) 및 Mozilla (모든 버전)는 내가 요청하는 모든 것을 쾅하고 할 것입니다. 하지만 한 가지 안 좋은 소식이 있습니다. 제가 아직 언급하지 않은 유일한 브라우저이며 대부분의 사용자가 사용하는 브라우저는 Internet Explorer입니다.

Internet Explorer 6 이하에서는 PNG 형식에 포함 된 알파 채널 투명도를 지원하지 않습니다. 대부분의 웹 서퍼가 브라우저를 선택 (또는 선택하지 않음) 한 이래로이 틈새로 인해 웹 디자이너는 PNG에서 멀어졌습니다. 그러나 Internet Explorer 7이 출시되면서 모든 주요 브라우저에서 PNG 알파 투명도를 완벽하게 지원했습니다. 다음으로 Internet Explorer 6 이하에서 PNG 알파 투명도를 사용하는 방법이 있습니까? 따라서이 효과를 사용하고 싶다면 아무것도 막을 수 없습니다. Internet Explorer 6 및 초기 버전에는 충분한주의가 필요하지만 확실히 가능합니다.

Internet Explorer 해킹 : AlphaImageLoader

Internet Explorer에는 자체적으로 다양한 필터가 제공됩니다. CSS에서 사용되지만 공식 CSS 사양의 일부를 형성하지 않습니다. 즉, 웹에서 표준화되지 않았습니다. 안타깝게도 Internet Explorer 6 이하에서는 PNG 형식 (W3C에서 권장)을 완전히 지원하지 않습니다. Microsoft는이 결함을 제거하는 필터 인 AlphaImageLoader를 제공합니다.

마이크로 소프트 공식 웹 사이트의 한 섹션에 따르면 AlphaImageLoader는 "개체의 경계 내에서 그리고 개체의 배경과 그 내용 사이에 이미지를 표시합니다." 즉, AlphaImageLoader는 전체 투명도를 사용하여 PNG 이미지를로드하지만 그 아래에 적용되는 객체의 내용 인 자체 레이어로로드합니다. 이러한 방식으로로드 된 PNG 이미지는 전경 이미지보다 배경 이미지처럼 작동합니다 (실제로는 개체의 배경 위에 위치 함).

기본적으로 CSS의 AlphaImageLoader를 img 요소에 적용하고 결과를 즐길 수 있습니다. 이미지가 먼저로드되고 투명도는 유지되지만 이미지가 다시로드됩니다 (객체의 전면 내용). 불투명 영역 (따라서 투명 버전을 "음영 처리")

(X) HTML 요소에 대한 CSS 배경 이미지로 투명한 PNG를 사용할 수 없습니다 (예 :

) 및 AlphaImageLoader가 Internet Explorer에서 작업을 수행 할 것으로 예상합니다. AlphaImageLoader는 개체의 배경과 전경 사이에 이미지를 삽입합니다. 따라서 이미지를 투명하게로드하는 동안 멋진 반투명 픽셀없이 CSS 배경 이미지로 계속로드합니다.

AlphaImageLoader의 실제 사용

이전 예제 중 하나로 돌아가 Internet Explorer에서 올바르게로드 해 보겠습니다. Topeka의 TV 방송국 인 채널 49를 기억하십니까? 나는 확신합니다-예. 그림 5-21은 Internet Explorer 6에서 사이트가 어떻게 보이는지 보여줍니다.

그림 5-21
PNG 투명도를 그대로 유지 한 상태로 Windows 용 Internet Explorer 6에서 렌더링 된 49abcnews.com 헤더.

날씨 관련 상단 섹션의 HTML은 짐작할 수있는 것처럼 보입니다.

현재 KS 토피카 :
82 ° 흐린
예측 등을 확인하세요 ...

이미지를 보면 확실히 PNG이며 Internet Explorer에서도 완벽하게로드합니다. 이것의 비밀 요소는 JavaScript입니다. 나는 실제로 약간의 DOM 스크립팅을 사용하여 img 요소를 즉시 제거하고 AlphaImageLoader를 사용하는 div 요소로 대체했습니다. JavaScript는 Internet Explorer에 내장 된 Microsoft의 편리하지만 완전히 표준화되지 않은 또 다른 관용구 인 조건부 주석 안에 설명되어 있습니다. 조건부 주석을 사용하면 알려진 Internet Explorer 버전에 대해서만 코드를 사용할 수 있습니다. 이 코드는 다른 모든 브라우저에서 무시되므로 어떤 방식으로도 영향을주지 않습니다. 요소에서 웹 사이트 www.49abcnews.com에서 다음을 찾을 수 있습니다.

첫 번째 줄 덕분에 IE6의 경우이 스크립트는 Internet Explorer 버전에 lte로 표시되는 경우에만 렌더링 된 문서에 포함됩니다 (이는 lte로 표시됨). 도착한 Internet Explorer 7은 이것을 완전히 무시합니다 ...

그렇다면 fixWeatherPng.js JavaScript 파일에는 무엇이 있습니까? 한 번 보자:

Window.attachEvent ( "onload", fixWeatherPng); function fixWeatherPng () (var img \u003d document.getElementById ( "weatherImage"); var src \u003d img.src; img.style.visibility \u003d "hidden"; var div \u003d document.createElement ( "DIV"); div.style. filter \u003d "progid : DXImageTransform.Microsoft. AlphaImageLoader (+ src +" ", 크기 조정 \u003d"scale ")"; // 간결성을 위해 일부 49abcnews.com 특정 CSS 스타일이 생략되었습니다. img.replaceNode (div); )

스크립트가 수행하는 작업을 단계별로 분석해 보겠습니다. 먼저 페이지가로드 될 때 fixWeatherPng 함수를 실행하겠다고 브라우저에 알립니다. 나머지 스크립트는 함수 자체입니다.

시작하기 전에 먼저 id 속성으로 작업 할 이미지를 찾아 img 변수에 저장합니다. src 속성 (이미지 파일의 URL)을 src 변수에 저장합니다. 그런 다음 CSS 가시성 속성을 숨김으로 설정하여 img 요소를 숨 깁니다.

우리는 원래의 img 요소 (숨겨진)를 AlphaImageLoader가 성공적으로 연결된 새로 생성 된 div 요소로 대체합니다.

DOM 스크립팅을 사용하여 AlphaImageLoader (즉석에서 비트를 필터링)를 삽입하려면 어려운 문제가 있지만 필요한 측면은 잘못된 CSS입니다. 또한 (X) HTML 마크 업 외부에는 의미없는 div 요소가 있습니다. 이 모든 내용이 조건부 주석에 설명되어 있지만 다른 브라우저가 Microsoft 코드에 의해 손상 될 가능성은 없습니다. (handyblogger : Jeff는 여기에서 Microsoft의 "서투른"솔루션을 미묘하게 지적하려고합니다.)

뭔가 잘못해야한다면, 적어도 그것을 추출하여 필요하지 않은 다른 모든 것과 분리하여 보관할 수 있습니다.

구금 중

그래픽 형식 인 PNG는 GIF에서 일반적으로 사용되는 것 이상의 많은 기술적 이점을 제공합니다. 사실 PNG는 사진 이미지와 무관 한 그래픽 형식으로 오래 전에 지배 할 수있을 정도로 이점이 너무 큽니다. 알파 투명도와 같은 일부 중요한 PNG 기능에 대한 Internet Explorer의 지원이 부족하여 결과적으로 많은 웹 개발자가 방해를 받았습니다. 하지만 PNG를 두려워해서는 안되는 두 가지 이유가 있습니다.

첫째, Internet Explorer 6 및 이전 버전조차도 GIF와 같은 방식으로 PNG를 거의 완벽하게 지원합니다 (물론 애니메이션 제외). PNG는 거의 항상 더 작은 파일 크기를 표시하여 다운로드 속도를 높이고 리소스 소비를 줄입니다.

둘째, Internet Explorer 7은 PNG 알파 투명도를 완벽하게 지원합니다. 반투명 옵션의 전체 영역으로 얻을 수있는 효과는 사실상 무한합니다. 이 기사에 설명 된 것과 같이 PNG 투명도를 사용하는 흥미로운 방법을 찾는 디자이너는 이전에 볼 수 없었던 새로운 수준의 스타일을 열 수있을 것으로 기대합니다. PNG 투명도로 만들 수있는 것에 대한 몇 가지 유용한 아이디어를 제공했지만 여기서 멈추지 마십시오. 자신을 찾으십시오!

Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin 및 Rob Weychert의 Web Standards Creativity에서 발췌; ED의 친구가 게시했습니다. Copyright Jeff Croft 2007. Apress, Inc.의 허가를 받아 사용되었습니다.