Web Guide이미지 최적화썸네일자동 리사이즈
이미지 자동 리사이즈· 썸네일 생성
담당자가 올린 원본 사진이 사이트를 느리게 만듭니다.
자동으로 줄여 저장하면 담당자가 신경 쓸 필요가 없어집니다.
01왜 필요한가
요즘 휴대폰 사진은 한 장에 수 MB입니다. 그대로 올리면 목록 화면 하나에 수십 MB가 전송됩니다.
담당자에게 줄여서 올리라고 안내해도 잘 지켜지지 않습니다. 시스템이 처리해야 합니다.
STEP 01
원본 업로드
담당자는 그냥 올립니다
STEP 02
자동 변환
크기와 용량을 줄여 저장합니다
STEP 03
용도별 제공
목록·상세에 맞는 크기를 내보냅니다
02용도별로 여러 개 만든다
목록에서는 작은 이미지, 상세에서는 큰 이미지가 필요합니다. 하나로 돌려쓰면 낭비가 생깁니다.
업로드 시 여러 크기를 한 번에 만들어 두는 것이 일반적입니다.
목록용 썸네일
작게. 여러 개가 한 화면에 나오므로 가벼워야 합니다.
상세용
본문 폭에 맞는 크기.
모바일용
화면이 좁으므로 더 작은 크기.
확대용
제품 사진 등 확대가 필요하면 원본에 가깝게.
공유용
SNS 공유 시 표시될 이미지.
03잘림 문제
가로세로 비율이 다른 사진을 같은 틀에 넣으면 잘립니다. 인물 사진에서 얼굴이 잘리는 사고가 흔합니다.
잘림 기준을 정하거나, 담당자가 영역을 지정할 수 있게 하세요.
01
기준점 설정
가운데 기준이 기본이지만 상단 기준이 나을 때도 있습니다.
02
영역 지정
업로드 시 담당자가 잘릴 영역을 고를 수 있게.
03
여백 처리
자르지 않고 여백을 넣는 방식도 있습니다.
04
권장 비율 안내
업로드 화면에 권장 규격을 표시합니다.
05
미리보기
저장 전에 결과를 보여줍니다.
04형식과 품질
최신 형식을 쓰면 같은 화질에서 용량이 크게 줄어듭니다. 구형 브라우저 대응은 자동으로 처리할 수 있습니다.
최신 형식 변환용량이 크게 줄어듭니다. 지원 브라우저에만 제공합니다.
품질 설정눈에 띄지 않는 수준까지 압축합니다.
원본 보관나중에 다시 만들 수 있게 원본을 남겨둡니다.
지연 로딩화면에 보일 때 불러오게 설정합니다.
기존 이미지 일괄 처리이미 올라간 이미지도 한 번에 변환합니다.
CHECK POINT
□ 업로드 시 자동으로 크기가 줄어드는가
□ 용도별로 여러 크기가 생성되는가
□ 인물 사진에서 얼굴이 잘리지 않는가
□ 담당자가 잘릴 영역을 지정할 수 있는가
□ 권장 규격이 화면에 안내되는가
□ 원본이 보관되는가
□ 기존 이미지도 일괄 변환했는가
#이미지 최적화#썸네일#자동 리사이즈#속도 개선#이미지 형식#지연 로딩#관리자 편의#홈페이지 개발#웹비스타#홈페이지 제작