이미지 최적화

TIL/Web

[240205] 이미지 최적화

이미지 최적화의 필요성 이미지는 웹에서 많은 용량을 차지하고 있다! 그만큼 웹 최적화에 많은 영향을 끼치기 때문에 중요하다. 적절한 이미지 포맷 선택하기 PNG JPEG WebP 👍 비손실 압축 👍 색상이 다양한 이미지에 적합 👍 PNG보다 용량이 비교적 작다 👍 용량이 PNG, JPEG보다 작다 👎 색상이 다양한 이미지에 부적합 👎 손실 압축 👎 투명도 지원 X 👎 구형 브라우저 지원 X 👎 이미지 변환 작업 필요 ⏩️ WebP 가 95%의 커버리지를 가지고 있다고 하니 웬만하면 WebP 쓰자! 반응형 이미지 제공하기 의 속성 이용! src 반응형 X fallback으로 이용 srcset 제공할 이미지들을 적는다. "이미지이름 크기w, 이미지이름 크기w, ..." 형식으로 적어주면 된다. sizes 이..

TIL/HTML + CSS

[240115] 이미지 스프라이트와 자동화

이미지 스프라이트란? 웹사이트들을 개발자도구로 뜯어보면 네트워크 탭에서 가끔 저런 이미지의 모음들을 볼 수 있다. 이게 이미지 스프라이트이다! 이미지 스프라이트란, 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법이다. 이미지 스프라이트, 장점과 단점 장점 단점 서버 요청 횟수를 줄여 로딩 속도를 줄여준다 하나의 스프라이트 이미지 파일만 관리하면 된다 img 태그가 아니라 css의 background-image로 처리되기 때문에 alt 속성을 사용할 수 없다 일부 이미지의 수정이 필요한 경우 파일을 다시 수정해야 한다 언제 사용할까? 의미상 크게 중요하지 않고 디자인적인 이미지의 경우 수정이 자주 되지 않는 이미지의 경우 어떻게 ..

햄oOoOo
'이미지 최적화' 태그의 글 목록