웹 성능 최적화... 너 정말.....

1. 이미지 지연 로딩

2. 이미지 사이즈 최적화

3. 캐시 최적화

4. subset, unicode-range, data-uri
   5.preload

5. 불필요한 css 아웃

이미지 동적 로딩

처음에 무거운 동영상과 이미지들이 같이 로드 해야할 페이지하면 사용자 첫 화면에 동영사먼저 보여줘야한다면!=> 첫페이지일때 이미지를 불러오지 않고 내가 필요할때 이미지를 불러온다면

1. 이미지는 나중에 로드

이미지 레이즈 로딩: 이미지를 나중에 로딩 하겟다 -> 그럼 언제??????? 사용자가 이미지가 있는 위치의 스크롤이 딱 되는 순간! 이미지가 보여야함!!!!

단점: 매 스크롤시 많은 함수가 실행 됨
이런 단점을 해결할수 있는 애가 있는데! 그게 바로!

intersection Observer

이 녀석은 특정 요소를 Observer하면 스크롤에 의해서 화면에 보여지는지 안보여지는지 파악 가능~!
화면에 들어오는 순간 해당 해당 함수 발생!

observe =  new IntersectionObserve(콜백, option)
observer.observe(관찰 할 요소) // 관찰

data-src를 이용해 처음에 돔 영역만 차지하도록
이미지가 화면에 들어오는 순간
entry.target.src = entry.target.dataset.src
observer.unobserve(entry.target) // 감시 끝~

###이미지 사이즈 최적화
JPEG (Joint Photographic Experts Group): JPEG는 손실 압축 방식의 이미지 포맷으로, 사진이나 그림과 같은 복잡한 그래픽을 효율적으로 저장할 수 있습니다. JPEG는 압축률을 조절하여 이미지 품질과 파일 크기 사이의 균형을 찾을 수 있습니다. 일반적으로 웹에서 사용되는 사진이나 배경 이미지에 주로 사용됩니다.

PNG (Portable Network Graphics): PNG는 무손실 압축 방식의 이미지 포맷으로, 투명도(알파 채널)를 지원합니다. 디지털 아트, 아이콘, 로고 등의 이미지에 적합하며, 선명한 텍스트나 선 그림을 포함한 이미지에 유용합니다. 하지만 파일 크기가 큰 편입니다.

GIF (Graphics Interchange Format): GIF는 무손실 압축 방식의 이미지 포맷으로, 256색까지만 지원하는 제한된 색상 팔레트를 가집니다. 이러한 제한 때문에 사진 등의 고화질 이미지에는 적합하지 않지만, 간단한 애니메이션을 만드는 데 주로 사용됩니다. SVG (Scalable Vector Graphics): 

SVG는 벡터 그래픽을 표현하기 위한 XML 기반의 이미지 포맷입니다. 벡터 이미지는 확대/축소 시 품질이 손상되지 않아, 아이콘, 로고, 일러스트 등의 웹 요소에 적합합니다. 또한, 스타일 및 애니메이션을 CSS와 JavaScript를 통해 조작할 수 있습니다.

WebP: WebP는 Google이 개발한 이미지 포맷으로, 손실 압축과 무손실 압축 두 가지 방식을 모두 지원합니다. 높은 압축률을 유지하면서도 이미지 품질을 유지할 수 있어, 웹 성능 최적화에 유용합니다. 하지만 아직 모든 브라우저에서 지원되지는 않습니다.

AVIF (AV1 Image File Format): AVIF는 Alliance for Open Media가 개발한 이미지 포맷으로, AV1 비디오 코덱을 기반으로 합니다. 손실 압축을 사용하며, WebP와 비교하여 더 높은 압축률과 이미지 품질을 제공합니다. 최신 브라우저에서 점차 지원되고 있으나, 일부 브라우저에서 지원되지 않을 수도 있습니다.

지원하는 브라우저 일 경우 srcset을 읽어오는데 지원하지 않는 브라우저면 img 태그의 src을 읽는다

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

캐시 최적화

https://squoosh.app/에서 webp 전환!
출처: https://tooo1.tistory.com/610 [개발자 퉁이리:티스토리]