이미지 최적화

TIL/Web

이미지 최적화,이미지 압축의 원리, sharp 라이브러리

2024. 02. 05 > 2025. 06. 23 블로그 A/S 프로젝트🚧 로 추가한 글입니다. 이미지 압축의 원리와 sharp 라이브러리에 대해서 알아보고, 예제를 추가합니다. 이미지는 웹에서 가장 큰 용량을 차지하고 있다! 그만큼 웹 최적화에 많은 영향을 끼치기 때문에 중요하다.이미지 압축PNGJPEGWebP👍 비손실 압축👍 색상이 다양한 이미지에 적합👍 PNG보다 용량이 비교적 작다👍 용량이 PNG, JPEG보다 작다👎 색상이 다양한 이미지에 부적합👎 손실 압축👎 투명도 지원 X👎 구형 브라우저 지원 X⏩️ WebP 가 95%의 커버리지를 가지고 있다고 하니 웬만하면 WebP 쓰자! JPEG 손실 압축의 원리1. Color Space Conversion인간의 눈은 밝기를 감지하는..

TIL/HTML + CSS

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

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

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