디자이너가 전달한 화면의 GUI 작업을 하면 이미지 요소를 사용해야 하는 부분이 있는데 이를 최적화하기 위해 아이콘 요소는 SVG로 만들어서 처리를 하거나 이미지 자체 포맷을 압축하는 방법을 사용합니다. 그런데 이미지를 강제로 압축해서 처리하면 이미지 화질 요소가 낮아지게 되어 만족스러운 효과를 얻지 못하는 결과가 왕왕 나오기도 합니다. 이럴 때 사용자의 브라우저 환경에 따라서 이미지를 다르게 보여주는 환경으로 로직을 구성한다면 웹 최적화를 통해 속도면에서도 향상되고 이미지 품질면에서도 모두가 만족스러운 결과를 얻을 수 있을 거라 예상합니다. 이미지 품질을 유지하면서 속도를 개선하기 위해 차세대 포멧인 WebP와 avif를 이용하려고 합니다. WebP란 무엇인가요? Webp는 구글에서 만든 이미지 포멧으..