목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
최적화 핵심 정리
JPEG, PNG, WebP, GIF, TIFF: 원본 그대로 업로드하고, Image → Fill 섹션에서 해상도를 “Auto”로 설정하세요. Framer가 대부분의 이미지를 자동으로 AVIF로 변환하고 사이트 및 화면 해상도에 맞춰 크기를 조정합니다.
SVG: 프레임을 그린 뒤 Fill 옵션에서 Image를 선택해 업로드하세요.
Framer에 이미지를 업로드하면 자동으로 최적화가 이루어지기 때문에 직접 WebP/AVIF로 변환하거나 콘텐츠 크기에 맞게 리사이즈할 필요가 없습니다.
JPEG, PNG, WebP, AVIF, GIF, TIFF 자동 리사이즈
모바일 사용자는 화면이 더 작습니다. 예를 들어, 데스크톱용으로 3000×2000 px 이미지를 업로드했을 때, 390×890 화면의 휴대폰에서 같은 이미지를 그대로 불러오면 불필요한 데이터 소모가 발생합니다. 이를 방지하기 위해 Framer는 이미지를 자동으로 리사이즈하고 브라우저가 화면에 맞는 최적의 크기를 선택할 수 있도록 합니다.
이미지 리사이즈 방식
업로드된
JPEG,PNG,WebP,AVIF,GIF,TIFF이미지는 512, 1024, 2048, 4096 px 크기로 자동 축소됩니다.이미지를 확대(upscale)하지는 않으며, 예를 들어 가로 3000 px 이미지라면 512, 1024, 2048 px 버전만 생성됩니다.
리사이즈는 더 긴 변을 기준으로 합니다. 세로가 3000 px로 더 긴 경우에는 세로를 기준으로 변환됩니다.
브라우저 최적화 처리
대부분의 <img> 태그에는 srcset과 sizes 속성이 자동으로 추가됩니다.sizes: 브라우저에 이미지 표시 크기를 알려줍니다.srcset: 리사이즈된 모든 버전(원본 포함)을 제공해 브라우저가 최적의 이미지를 선택하도록 합니다.
Resolution 옵션
Fill → Image → Resolution에서 제어할 수 있습니다.
“
Small”, “Medium”, “Large”, “Full” 옵션은 각각 512, 1024, 2048, 4096 px 버전을 강제로 사용합니다.단, 원본보다 큰 사이즈로는 업스케일하지 않습니다. 예를 들어, 가로 1500 px 이미지라면 Large나 Full을 선택해도 1500 px 그대로 제공됩니다.
JPEG, PNG, WebP, GIF, TIFF > AVIF 변환 규칙
구분 | 처리 방식 | 비고 |
|---|---|---|
기본 변환 | AVIF 손실 압축 (품질 80) | JPEG, PNG, WebP, GIF, TIFF 대상 |
Auto (Lossless) 선택 | WebP 무손실 변환 | 파일 크기 ↑, 압축 아티팩트 없음 |
애니메이션 이미지 | WebP 손실 유지 | AVIF 애니메이션 변환 불가 |
최초 요청 시 | WebP 손실(품질 90) 우선 제공 → 이후 AVIF로 대체 | 변환 완료 후 자동 교체 |
변환 후 용량 > 원본 | 원본 제공 | 효율적이지 않은 경우 원본 유지 |
브라우저 지원
브라우저 환경 | 제공 포맷 |
|---|---|
AVIF 지원 (예: Safari 16.4+) | AVIF |
WebP만 지원 | WebP |
AVIF & WebP 미지원 | 원본 재압축본 |
PNG 손실 압축의 이유
PNG는 원래 무손실 포맷이지만, 많은 업로드 이미지가 스크린샷임
손실 압축(품질 90) 적용 시 용량 대폭 감소
눈에 띄는 품질 저하 없이 최적화 가능
SVG -> SVGO로 최적화
Framer는 업로드된 SVG를 SVGO로 최적화합니다.
SVG 그래픽(
<svg>태그로 표시)과 이미지 Fill에 모두 적용됩니다.단, SVG에 경로나 레이어가 많으면 사이트 성능에 영향을 줄 수 있으므로, 필요할 경우 SVG를 Image Fill로 업로드하는 것을 권장합니다.
이미지가 올바르게 표시되지 않거나 품질 문제가 발생한다면, Framer 연락처 페이지 를 통해 지원팀에 문의하세요.
본 글은 Framer 공식 블로그의 ‘How images are optimized in Framer’를 번역·각색한 콘텐츠입니다.
