🖼️ PNG 이미지

PNG (Portable Network Graphics) 은 무손실 압축 이미지 포맷입니다. 압축해도 화질이 열화되지 않아 스크린샷·로고·도표·투명도가 필요한 이미지에 적합합니다. MIME 타입은 image/png, 선두 바이트는 89 50 4E 47 입니다.

10 KB 부터 100 MB 까지 각 크기를 준비했습니다. 업로드 크기 제한 테스트, ImageMagick / GD / Pillow 같은 이미지 처리 라이브러리 검증, 스토리지 업로드 처리 테스트에 쓸 수 있습니다.

PNG 의 특징

무손실 압축 — 몇 번을 다시 저장해도 화질이 떨어지지 않음 (JPEG 과의 최대 차이)
알파 채널에 의한 투명 표현에 대응
색 심도는 8 / 16 / 24 / 32 bit 에 대응
메모리 소비는 전개 후 픽셀 수로 정해지므로, 파일 크기가 작아도 큰 화면의 PNG 는 메모리를 많이 씀

📖 자주 걸리는 지점

1 KB 부터 100 MB 까지 PNG / JPEG / GIF / WebP 를 각 크기로 준비했습니다. 업로드 한도 확인, 썸네일 생성, 이미지 라이브러리 검증에 쓸 수 있습니다. 형식별 차이는 위 해설에 있지만, 구현에서 걸리는 것은 대개 형식과 무관한 공통의 함정입니다.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
작은 이미지인데 메모리를 다 쓴다	필요한 메모리는 파일 크기가 아니라 전개 후 픽셀 수로 정해집니다. 20 KB PNG 라도 10,000 × 10,000 px 이면 RGBA 로 약 400 MB 를 요구합니다.	크기 상한과 별도로 치수 상한을 둡니다. 디코딩 전에 헤더만 읽어 폭 × 높이를 확인할 수 있습니다 (PHP 는 `getimagesize()`, Python 의 Pillow 는 `Image.open()` 직후 `load()` 호출 전).
세로로 찍은 사진이 옆으로 누워 표시된다	카메라는 본체를 돌리지 않고 EXIF 의 Orientation 태그에 어느 방향인지만 씁니다. 태그를 읽지 않는 처리계에서는 촬영된 그대로의 방향으로 나옵니다.	썸네일 생성 전에 Orientation 을 읽어 실제로 회전시키고 태그를 지웁니다. 회전만 하고 태그를 남기면 대응 브라우저에서 두 번 돌아갑니다. 내용 확인은 EXIF 뷰어에서.
변환했더니 애니메이션과 투명도가 사라졌다	브라우저 Canvas 를 거치는 변환은 한 프레임밖에 다루지 못합니다. 애니메이션 GIF 는 첫 프레임의 정지 이미지가 됩니다. JPEG 로 변환하면 투명도는 흰색이나 검은색으로 뭉개집니다.	애니메이션을 유지한 채 변환하려면 Canvas 가 아니라 ImageMagick 이나 libvips 같은 여러 프레임을 다룰 수 있는 처리계가 필요합니다. 투명도를 남기려면 출력은 PNG 나 WebP 를 고릅니다.
이미지로 보이는 파일이 이미지가 아니다	확장자도 `Content-Type` 도 보내는 쪽이 주장하는 값입니다. 끝에 다른 데이터를 이어 붙인 이미지는 뷰어에서 평범하게 열립니다.	선두 바이트로 판정한 뒤 재인코딩해 저장합니다. 읽어서 다시 써 내면 여분의 데이터도 삽입된 메타데이터도 떨어집니다. 바이트 열은 매직 바이트 표를 참조.

사용자가 올린 이미지를 그대로 배포하는 경우, SVG 만은 취급이 다릅니다. SVG 는 이미지가 아니라 스크립트를 실행할 수 있는 문서이므로, 같은 오리진에서 배포하면 크로스 사이트 스크립팅 경로가 됩니다. 별도 도메인에서 배포하거나 Content-Security-Policy 와 Content-Disposition: attachment 로 막으세요.

🖼️ PNG 이미지

PNG 이미지 소개

PNG 의 특징

관련 참조·기사

📖 자주 걸리는 지점