AI 생성 콘텐츠를 위한 이미지 최적화
AI 이미지는 독특한 성능 문제를 야기합니다. 생성이 완료될 때까지 이미지 크기, 형식 또는 콘텐츠를 알 수 없습니다. 그럼에도 불구하고 느린 로딩과 레이아웃 시프트(layout shifts)를 방지해야 합니다.
저는 무료 AI 이미지 생성기를 구축할 때 다음 단계들을 사용했습니다.
일반적인 최적화는 이미지를 미리 알고 있다는 가정하에 이루어집니다. 미리 크기를 계산하고 빌드 시점에 최적화할 수 있기 때문입니다. 하지만 생성된 이미지는 이 규칙을 깨뜨립니다. 사용자가 요청하기 전까지는 이미지가 존재하지 않습니다.
전달 방식 처리 방법:
- AI의 원본 출력물은 대개 PNG입니다. PNG 파일은 너무 커서 종종 800KB에서 1.2MB 사이입니다.
- 이미지를 WebP로 변환하세요. WebP 파일은 동일한 품질에서 PNG보다 25%~35% 더 작습니다.
- WebP 품질은 85로 설정하세요. AI 이미지는 자연스러운 질감 노이즈를 가지고 있습니다. 품질 설정을 더 높여도 시각적 품질은 개선되지 않고 파일 크기만 커집니다.
레이아웃 시프트 방지 방법:
사용자는 생성 버튼을 누르기 전에 종횡비(aspect ratio)를 선택합니다. 이를 활용하세요.
- 선택한 비율(1:1, 16:9 등)에 따라 컨테이너 크기를 미리 지정합니다.
- 이렇게 하면 이미지가 도착하기 전에도 컨테이너가 올바른 크기를 유지합니다.
- 이를 통해 누적 레이아웃 시프트(CLS)를 제거할 수 있습니다.
로딩 속도 개선 방법:
생성된 이미지는 대개 Largest Contentful Paint (LCP) 요소입니다.
- 코드에서 해당 이미지를 우선순위(priority)로 지정하세요.
- CDN을 위한 preconnect 링크를 사용하세요. 이는 DNS 및 TLS 핸드셰이크를 조기에 처리합니다.
- 최종 이미지가 차지할 공간과 정확히 일치하는 스켈레톤 로더(skeleton loader)를 사용하세요.
캐싱 전략:
- 추론(inference) 레이어에서 캐싱하지 마세요. 모든 요청은 신선하게 느껴져야 합니다.
- 전달 속도를 위해 CDN 레이어에서 캐싱하세요.
- 각 이미지는 고유한 URL을 가지므로 공격적인 캐싱을 해도 안전합니다.
이러한 변경 사항의 결과:
- 평균 크기: 900KB에서 200KB로 감소.
- LCP: 4.1초에서 1.9초로 단축.
- CLS: 제거됨.
실행 요약:
- 품질 85의 WebP로 변환.
- 선택된 종횡비를 사용하여 컨테이너 크기 미리 지정.
- 주요 이미지를 우선순위 로딩으로 설정.
- CDN 레벨에서 적극적으로 캐싱.
- 스크롤 아래(below the fold)에 있는 보조 콘텐츠에만 지연 로딩(lazy loading) 사용.
선택 사항 학습 커뮤니티: https://t.me/GyaanSetuAi