JPEG와 PNG는 픽셀 이미지에 쓰이는 파일 형식이다. JPEG는 이 규격을 만든 Joint Photographic Experts Group의 이름에서 왔고, PNG는 Portable Network Graphics의 줄임말이다. 사진의 용량을 줄이려는지, 글자의 경계와 투명 배경을 유지하려는지에 따라 선택이 달라진다.

- **사진:** 일반적인 JPEG 저장은 손실 압축을 사용한다. 품질과 용량을 조절할 수 있지만, 낮은 품질로 저장한 이미지를 다시 높게 저장해도 사라진 세부가 돌아오지는 않는다.
- **글자와 도형:** PNG는 무손실 압축을 사용하므로 평평한 색과 날카로운 경계를 보존하는 데 유용하다. 사진도 저장할 수 있으나 같은 사진을 배포할 때 JPEG보다 용량이 커지는 경우가 많다.
- **투명 배경:** PNG는 투명도를 담을 수 있다. 일반적인 JPEG에는 투명도가 없으므로, 배경을 뺀 로고를 JPEG로 저장할 때 어떤 색이 채워지는지 확인한다. ([어도비: JPEG와 PNG 비교](https://www.adobe.com/creativecloud/file-types/image/comparison/jpeg-vs-png.html))
- **확장자:** `.jpg`와 `.jpeg`는 같은 JPEG 형식에 쓰인다. 파일 이름의 `.png`를 `.jpg`로 바꾸는 것은 [[이미지 파일 형식을 미리보기에서 바꾸기|형식 변환]]과 다르다.
- **원본과 배포본:** 작업용 원본은 남겨 두고, [[포트폴리오 웹사이트]]에는 필요한 [[해상도|픽셀 크기]]와 용량의 사본을 올릴 수 있다. PNG로 바꾼다고 작은 사진이 선명해지지는 않는다. [[이미지 압축의 흔적]]은 사진 전체보다 글자나 강한 경계에서 먼저 보이기도 한다.

웹 배포용 사본을 만들 때는 [[WebP와 AVIF]]도 비교할 수 있다. 투명도와 압축 방식, 웹 브라우저의 지원을 함께 살펴 선택한다. ([MDN: 이미지 형식 안내](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types))

[[픽셀과 벡터]]는 이미지를 표현하는 방식의 구분이다. 로고가 [[SVG]]로 제공되었다면 PNG로 바꾸기 전에 벡터로 쓸 수 있는 자리인지 살펴볼 수 있다.

#이미지 #웹 #디자인 #기초