Web Guide이미지 최적화자동화페이지 속도
이미지 최적화 자동화 파이프라인
느린 사이트의 원인 1위는 대부분 이미지입니다.
담당자의 주의력에 맡기지 말고 시스템이 처리하게 만들어야 합니다.
01자동화할 단계
업로드부터 화면 표시까지 각 단계에서 자동으로 처리할 것이 있습니다.
STEP 01
업로드
크기를 줄이고 여러 규격을 만듭니다
STEP 02
저장
최신 형식으로 변환해 함께 보관합니다
STEP 03
전달
기기와 화면에 맞는 것을 내보냅니다
02기본 처리 항목
각 항목을 자동화하면 담당자는 아무것도 신경 쓰지 않아도 됩니다.
01
크기 축소
화면에 필요한 크기 이상으로 저장하지 않습니다.
02
용량 압축
화질 손실이 눈에 띄지 않는 수준까지 줄입니다.
03
형식 변환
최신 형식으로 바꾸면 용량이 크게 줄어듭니다.
04
여러 규격 생성
모바일과 데스크톱용을 따로 만듭니다.
05
불필요 정보 제거
촬영 정보 등을 제거해 용량과 개인정보 문제를 줄입니다.
06
지연 로딩
화면에 보일 때 불러오게 합니다.
03화면 구현 규칙
파일을 줄여도 화면에서 잘못 쓰면 효과가 없습니다.
크기 지정
가로세로를 미리 지정해 화면이 흔들리지 않게 합니다.
화면별 제공
작은 화면에는 작은 이미지를 내보냅니다.
첫 화면 이미지
처음 보이는 이미지는 지연 로딩하지 않습니다.
배경 이미지
큰 배경 이미지는 특히 주의합니다.
아이콘
작은 아이콘은 이미지보다 벡터가 유리합니다.
대체 텍스트
접근성과 검색을 위해 설명을 넣습니다.
04기존 이미지 정리
이미 올라간 이미지도 처리해야 효과가 납니다.
현황 파악용량이 큰 이미지 목록을 뽑습니다.
일괄 변환기존 이미지를 한 번에 처리합니다.
원본 보관다시 만들 수 있게 원본은 남겨둡니다.
링크 확인변환 후 깨진 이미지가 없는지 점검합니다.
정기 점검새로 올라온 이미지를 주기적으로 확인합니다.
CHECK POINT
□ 업로드 시 자동으로 크기와 용량이 줄어드는가
□ 최신 형식으로 변환되는가
□ 화면 크기별로 다른 이미지를 제공하는가
□ 이미지 크기가 미리 지정되어 있는가
□ 첫 화면 이미지를 지연 로딩하지 않는가
□ 대체 텍스트가 입력되는가
□ 기존 이미지를 일괄 변환했는가
□ 정기 점검 절차가 있는가
#이미지 최적화#자동화#페이지 속도#지연 로딩#이미지 형식#반응형 이미지#성능 개선#홈페이지 개발#웹비스타#홈페이지 제작