IMAGE GUIDE
작게 만들되, 중요한 픽셀은 지키는 법.
이미지 용도에 맞는 크기, 자르기 방식, 파일 형식을 고르면 선명함은 유지하면서 전송과 로딩 속도를 개선할 수 있습니다.
JPG, PNG, WebP는 언제 사용할까요?
형식추천 용도특징
JPG사진, 쇼핑몰 상품 이미지, SNS용량이 작고 품질 조절 가능
PNG로고, 글자가 많은 그래픽, 투명 배경무손실이지만 사진은 용량이 커질 수 있음
WebP웹사이트, 블로그, 온라인 포트폴리오화질과 파일 크기의 균형이 좋음
용도별 추천 크기
정사각형 피드
1080 × 1080px상품 대표 이미지와 SNS 피드에 활용하기 쉬운 기본 규격입니다.
세로 스토리
1080 × 1920px휴대폰 전체 화면에 맞는 스토리와 짧은 영상 표지 규격입니다.
영상 썸네일
1280 × 720px유튜브 썸네일과 가로형 미리보기 이미지에 적합합니다.
FHD 화면
1920 × 1080px프레젠테이션, 배경 이미지, 고해상도 가로 콘텐츠에 사용합니다.
전체 맞춤과 채워 자르기의 차이
전체 맞춤은 원본의 모든 부분을 보여주는 대신 남는 공간에 여백이 생길 수 있습니다. 제품 전체, 로고, 문서 이미지처럼 잘리면 안 되는 대상에 적합합니다.
채워 자르기는 출력 화면을 빈틈없이 채우고 넘치는 부분을 잘라냅니다. 인물 사진이나 썸네일처럼 화면을 꽉 채워야 할 때 사용하고, 초점 조절로 중요한 피사체가 남도록 위치를 맞추세요.
화질 저하를 줄이는 다섯 가지 방법
- 가능하면 원본보다 큰 크기로 확대하지 않습니다.
- 사진을 JPG나 WebP로 저장할 때는 먼저 품질 85~90%를 기준으로 비교합니다.
- 글자와 선이 많은 그래픽은 PNG 또는 고품질 WebP를 사용합니다.
- 같은 이미지를 여러 번 압축하지 말고 항상 원본에서 다시 변환합니다.
- 다운로드한 파일을 실제 사용 환경의 화면 크기에서 확인합니다.
웹사이트 이미지 최적화 체크리스트
- 화면에 표시되는 최대 크기보다 지나치게 큰 이미지를 올리지 않습니다.
- 사진은 WebP 또는 적절히 압축한 JPG를 우선 검토합니다.
- 파일 이름에 이미지 내용을 설명하는 짧은 단어를 사용합니다.
- 웹페이지에서는 이미지 내용을 설명하는 대체 텍스트를 작성합니다.
- 모바일 데이터 환경에서 로딩 속도를 다시 확인합니다.
가이드를 확인했다면
FREE PIXEL 열기 →