🖼️ WebP 이미지

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 로 막으세요.

🖼️ WebP 이미지

WebP 이미지 소개

WebP 의 특징

관련 참조·기사

📖 자주 걸리는 지점