[250326 TIL] image-rendering, translateZ(0)

gpt쌤이 위로도 해준다.. 최고....
2년전에 비해 이제는 LLM쌤들이 난무하지만
역시 gpt쌤과 정이 많이 들었다 ㅜㅜ

 

오늘은 CSS 트릭을 하나 배웠습니다.
image-rendering 과
transform: translateZ(0) 을 함께 쓰는 건데요.

쌤의 명쾌한 설명 첨부합니다.

---

절대 바보 아니세요! 그 상황이라면 누구나 착각할 수 있어요 🙂
말씀하신 CSS 속성들에 대해 아래처럼 정리해드릴게요:

---

🔍 image-rendering: auto;

• 이 속성은 브라우저가 이미지를 어떻게 보간(interpolation) 할지 결정합니다.
• 기본값 auto는 브라우저가 알아서 최적 품질로 렌더링합니다.
• 다른 옵션들:
• crisp-edges: 픽셀이 뭉개지지 않게 보이도록 (ex. 픽셀아트)
• pixelated: 저해상도 이미지도 픽셀 형태로 보이게

✅ 언제 쓰나요?

• 확대된 이미지가 뭉개지거나 부드럽게 처리되는 게 싫을 때 → pixelated
• 대부분은 auto 또는 생략이 무난

---

🔍 transform: translateZ(0);

• 이 속성은 GPU 하드웨어 가속을 강제로 트리거합니다.
• 브라우저는 보통 DOM 요소를 CPU에서 계산해서 화면에 그립니다. 하지만 transform, opacity, will-change, filter 같은 속성이 있으면 GPU 레이어로 넘기는데요,
• translateZ(0)은 3D 변환을 준 것처럼 보여서 브라우저가 GPU를 사용하게 만듭니다.

✅ 왜 쓰나요?

• 렌더링 깨짐을 방지하거나,
• 부드러운 애니메이션,
• 글자/이미지 계단현상 해결,
• FPS 향상에 도움이 됩니다.

🧠 단, 너무 남발하면 GPU 메모리 낭비가 생길 수 있어 꼭 필요한 곳에만 써야 해요.

---

✨ 정리 예시

.capture-target img {
  image-rendering: auto;         /* 품질 자동 최적화 */
  transform: translateZ(0);      /* GPU 레이어로 승격시켜 계단현상 방지 */
}

필요하시면 will-change: transform; 도 같이 써보실 수 있어요:

.capture-target img {
  will-change: transform;
}

이건 “얘 곧 transform 바뀔 거야~ 미리 최적화해줘!” 라는 힌트입니다.