Web Guide반응형 이미지이미지 최적화화면별 제공
반응형 이미지 제공 방식
큰 화면용 이미지를 휴대폰에 보내면 안 됩니다.
화면에 맞는 크기를 보내는 것만으로 크게 빨라집니다.
01왜 필요한가
같은 이미지를 모든 기기에 보내면 낭비입니다.
용량 낭비작은 화면에 큰 이미지는 불필요.
데이터 소모이용자 데이터를 씁니다.
속도 저하내려받는 데 오래 걸립니다.
전송 비용우리 트래픽 비용도 늘어납니다.
체감 느림모바일에서 특히 답답합니다.
이탈느리면 나갑니다.
02제공 방식
상황에 따라 다른 이미지를 보냅니다.
크기별 제공
여러 크기를 준비하고 골라 보냅니다.
화면 밀도 대응
선명한 화면에는 고해상도.
형식 선택
지원하는 최신 형식을 보냅니다.
구도 변경
모바일은 다른 구도로 자릅니다.
자동 변환
서비스가 알아서 처리하기도 합니다.
크기 지정
표시 크기를 미리 알려줍니다.
03구도 고려
단순히 크기만 줄이면 안 되는 경우가 있습니다.
점검 항목
가로 이미지
모바일에서 너무 작아집니다.
세로 버전
모바일용으로 따로 준비합니다.
중심 유지
잘라도 핵심이 남게 합니다.
인물 사진
얼굴이 잘리지 않게.
글자 포함
작아지면 읽히지 않습니다.
확인
실제 기기에서 봅니다.
04실무 적용
자동화하지 않으면 지켜지지 않습니다.
수동 방식
담당자가 크기별로 만들어 올림 · 번거로움 · 누락 발생 · 지속 불가
자동 방식
업로드하면 자동 생성 · 화면에 맞게 자동 제공 · 담당자 부담 없음 · 권장
CHECK POINT
□ 화면 크기에 맞는 이미지를 제공하는가
□ 업로드 시 자동으로 여러 크기가 생성되는가
□ 최신 형식으로 변환되는가
□ 모바일용 구도를 따로 준비하는가
□ 이미지 표시 크기를 미리 지정했는가
□ 인물 사진에서 얼굴이 잘리지 않는가
□ 이미지 속 글자가 읽히는가
□ 실제 기기에서 확인했는가
#반응형 이미지#이미지 최적화#화면별 제공#속도#구도#자동화#모바일#반응형#웹비스타#홈페이지 제작