구글 크롬 DevRel이 알려주는 이미지에 대한 모든 것

이미지는 총 전송 크기와 페이지당 요청 수 측면에서 웹에서 가장 큰 자산입니다. 2022년 6월 기준 웹페이지의 총 전송 크기 중앙값은 약 2MB이며, 이미지가 그 절반 가까이를 차지합니다. 이미지 요청을 최적화하는 것이 가장 큰 성능 최적화라고 해도 과언이 아닙니다. 이 글은 img 태그의 역사부터 시작해서 이미지 유형, 최적화를 위한 속성, 그 최적화를 자동화하는 방법들에 대해서 소개합니다. [목차] - 이미지와 성능 CLS, LCP, loading="lazy" - 이미지 포맷과 압축 GIF, PNG, JPEG, Progressive JPEG, WebP, AVIF a. Squoosh - https://squoosh.app/ 구글 크롬 개발자들이 만든 브라우저에서 다양한 코덱으로 이미지를 압축하고 비교할 수 있는 이미지 최적화 프로그램. Webp, AVIF 등 모던 이미지 포맷 전부 지원. - 반응형 이미지 ``, ``, ``, `` 소개 - 고성능 이미지 워크플로우 기술의 발전으로 개발자가 수동으로 최적화 하는 일을 CDN, Webpack, Gulp 등으로 자동화 가능 a. respImageLint - https://ausi.github.io/respimagelint/ 크기 속성의 정확성을 검사하고 개선을 위한 제안을 제공하기 위한 절대적으로 필수적인 코드 스니펫 b. Lazysizes - https://github.com/aFarkas/lazysizes React, Vue 등의 프레임워크에서 사용하면 거의 완전 자동화된 반응형 이미지를 제공함