이미지 최적화

새로 알게 된 부분만 정리 ✍️

이미지 최적화에 대한 명확한 가이드

반응형 이미지

<img> 태그는 srcset이나 sizes와 같은 유용한 최적화 속성을 제공함으로써 더 빠른 페이지 로드를 도와줌

• 다양한 너비에 대해 다양한 그래픽 옵션과 함께 srcset 속성을 사용하면 사용자들의 단말기 화면 너비에 따라서 서로 다른 이미지를 제공
• srcset로 반응형 이미지 생성 / sizes로 비율 조정
  반응형 이미지 | MDN
  HTML srcset sizes 한국에서 제일 쉽게 설명 (retina 포함)
  https://codingeverybody.kr/html-img-srcset-속성과-sizes-속성/
• 가로세로 비율 보존
  • HTML에서 이미지의 너비와 높이를 지정하고, CSS 높이를 "auto"로 설정해두면 쉽게 레이아웃 시프트 현상을 최소화
  • 추가로 CSS의 object-fit 속성을 활용해 비율을 브라우저에게 알릴 수 있음
• Aspect Ratio - 이미지 크기 비율 간단 제어
  • DOM 요소의 크기나 위치 등을 변경하면 해당 노드의 하위 노드의 상위의 노드들을 포함하여 레이아웃 단계를 다시 수행하게 된다. width, height가 없는 이미지들은 reflow를 발생시켜 퍼포먼스를 저해하기 때문에 이를 해결하기 위해 이미지 및 멀티미디어 요소에 width와 height 속성을 항상 포함하거나 css를 사용하여 필요한 공간 aspect-ratio 를 잡는다.
  • 반응형 웹 디자인의 경우 width와 height가 고정이 아니라, css를 사용하여 크기를 조정하는데, 이미지가 로드되어 각 이미지가 화면에 나타나면 reflow되어 텍스트가 갑자기 화면 아래로 튀어나가는 등의 문제가 발생했는데 이것을 방지하기 위해 aspect-ratio를 사용한다.

참고🔗
누적 레이아웃 이동 최적화 | web.dev

차세대 형식

뛰어난 압축 및 품질을 위해 WebP와 같은 차세대 형식을 이용하는 것

• 구글이 만든 이미지 포맷
  최신 브라우저에서만 동작하는 포맷이므로, png/jpg 포맷과 함께 제공
• 모든 웹 브라우저가 WebP를 지원하지는 않지만
  • <source>와 함께 <picture> 태그를 사용하면 이전 버전과 호환이 되어 모든 브라우저에서 올바르게 최적화된 이미지 형식을 표시할 수 있다.
    

참고🔗
브라우저 이미지 최적화 - WebP AVIF JPEG

호환 이슈

• WebP : Chrome, Edge, Firefox, Opera, Safari (주요 브라우저에서 대부분 지원하지만
  Safari는 아직 미지원 하는 버전도 상당히 존재)
• AVIF : Chrome, Opera, Samsung Browser 들의 최신 버전

GIF	JPEG	PNG	WEBP	HEIC	AVIF
1987	1992	1996	2010	2015	2018

<picture> 태그

<image> 요소의 다중 이미지 소스를 위한 컨테이너를 정의할 때 사용

• 조건을 만족하는 첫 번째 <source> 요소를 사용하고, 나머지는 무시
• <img> 요소는 가장 마지막에 위치: 하위 호환성, 만족하는 <source> 없을 경우

이미지 접근성

alt(alternative, 대체) 텍스트가 중요한 만큼 장식용으로만 사용된 이미지를 표시해두는 것도 중요하다. 콘텐츠 일부가 아니고 페이지의 외관을 향상시키기 위해서만 존재하는 배경 이미지에는 role="presentation" 값이 지정되어야 한다.

• role : 웹 접근성을 위해 위젯, 구조 및 동작에 대한 의미 정보를 전달하고 element의 확장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 하는 속성
• role="presentation", role="none" semantic의미를 요소와 그 자식요소로부터 제거하기 위해서 사용한다. 시각적으로 게시하는 용도의 요소에 적용.

이미지 우선순위

• 웹 페이지 로드 시에 우선적으로 처리해야 할 특정 이미지(LCP)에 fetchpriority="high"
• 뷰 포트에 없는 이미지에 지연 로딩 loading="lazy" decoding="async" fetchpriority="low"
  • <img loading=lazy> : 브러우저에서 직접 지원하는 지연 로딩
    클라이언트에서 javascript가 비활성화된 경우에도 지연된 이미지 로딩이 계속해서 작동
• 자원 절약, 웹사이트 성능을 향상
• 이미지 프리로딩(Image Preloading) : 유저가 이미지를 요청하기 전에 미리 이미지를 다운받아 캐시에 저장하고, 필요할 때 캐시에서 바로바로 꺼내쓰는 것

---

[React] 성능최적화 2편 - 이미지 사이즈 최적화1(feat. firebase)

이미지 압축 라이브러리

browser-image-compression (브라우저 이미지 압축)

imageCompression(file: File, options): Promise<File>

• webp 확장자 이미지도 잘 압축해줌
• 원본 타입이 File이어도 Blob으로 리턴되기 때문에 File변환 추가 코드가 필요
  • Blob quack (File의 특성인 name, lastModified 속성은 가진 Blob 객체)
  • new File([Blob], name, options)
• getDataUrlFromFile 메소드를 이용해 base64인코딩 방식의 DataUrl을 얻을 수 있음.
  imageCompression.getDataUrlFromFile(compressedFile)

이미지 압축 사이트

squoosh.app (구글)

(JPG 인코더 : 모질라의 MozJpeg vs 구글의 guetzli)

---

정적 애셋 (public 경로)

#public #src #public

https://velog.io/@ingdol2/React-image-경로-설정하기
이미지 마크업, img vs background-image 딱 정해드립니다.
https://codingapple.com/forums/topic/백그라운드-이미지-관련/

img

• 이미지에 구체적인 정보가 담겨있을 때
• 사용자가 등록하는 데이터 이미지일 때
• 인쇄 시 이미지까지 출력되어야 할 때
• 이미지의 크기가 레이아웃에 영향을 미칠 때
• 검색엔진에 이미지까지 노출이 필요할 때

background

• 꾸밈(디자인) 요소로만 사용할 때 (콘텐츠를 이해하는 데 있어 영향을 미치지 않는)
• 개발 생산성과 유지보수 효율 향상을 위해

🧐 꾸밈 요소는 img가 아닌 background가 적절해서 public이 아닌 src에 위치시켰는데, lighthouse에서 정적 에셋으로 관리하도록 권장💦