예전에는 이러한 이미지 깨짐 현상을 해결하기 위해 디자이너가 원본 이미지의 선명도를 유지하면서 이미지를 2배 크기로 저장한 다음, 프론트엔드 개발자에게 절반 크기로 줄여서 표시해달라고 요청했습니다. 이렇게 하면 고해상도 디스플레이에서도 이미지를 선명하게 보여줄 수 있었습니다.

한편 요즘에는 피그마(Figma)와 같은 디자인 툴로 원본 이미지를 자동으로 2배, 3배 고해상도로 추출할 수 있습니다. 그런데 문제는 선명한 이미지를 표현하기 위해 이미지 용량이 커진다는 것입니다. 가벼운 짐 몇 개는 쉽고 빠르게 옮길 수 있지만 양이 너무 많거나 무거운 짐은 낑낑대며 옮길 수밖에 없습니다.

이미지가 화면에 표시되는 속도가 느리다면 이미지 용량이 큰 것이니 디자이너와 먼저 소통해야 합니다. 이러한 경우 레이아웃을 바꿔 이미지의 가로세로 크기를 줄이거나, JPEG 등의 저용량 형식으로 파일 포맷을 변경하거나, 이미지 압축을 시도해볼 수 있습니다(오늘날 웹 개발 프레임워크는 빌드할 때 자동으로 이미지를 최적화하는 기능을 제공하기도 합니다).