이미지 최적화

사진 형식은 JPG, PNG, WebP, AVIF 중 무엇을 쓰나요?

사진은 WebP나 AVIF를 우선 쓰고, 로고 · 아이콘은 SVG를 쓰는 게 요즘 기본이에요. web.dev는 WebP와 AVIF가 대체로 예전 형식(JPG · PNG)보다 압축이 잘 된다며 가능하면 쓰라고 안내해요.

다만 AVIF를 쓸 때는 읽지 못하는 환경을 대비해 JPG 같은 대체 파일을 함께 두는 게 안전해요. 움직이는 GIF는 용량이 매우 커서, 짧은 영상 파일로 바꾸는 편이 훨씬 가벼워요.

형식을 사장님이 직접 고르지 않아도 되는 경우도 많아요. 홈페이지 제작 방식에 따라 JPG를 올리면 손님 브라우저에 맞춰 WebP나 AVIF로 바꿔 보내 주는 기능이 들어 있기도 해요.

투명 배경이 필요한 로고나 배경을 지운 상품 사진도 PNG 대신 WebP로 저장하면 더 가벼워지는 경우가 많아요.

홈페이지 사진은 몇 픽셀, 몇 KB로 올려야 하나요?

모든 사진에 맞는 정해진 숫자는 없고, ‘화면에 실제로 보이는 크기’를 기준으로 정해요. 폰 화면 너비에 꽉 차는 사진이라면 그 너비의 두 배 정도 픽셀이면 선명한 화면에서도 충분한 경우가 많아요.

폰 카메라 원본은 가로 4,000픽셀이 넘는 경우가 흔해서, 홈페이지에 그대로 올리면 대부분의 픽셀이 버려져요. 큰 배너 사진과 작은 목록 썸네일은 크기를 따로 만들어 두는 게 좋아요.

용량은 같은 사진이라도 형식과 압축 정도에 따라 크게 달라져서, 숫자를 외우기보다 화면에서 화질을 보며 정하는 편이 정확해요. 첫 화면 사진은 특히 가볍게 만들어야 첫인상이 빨라져요.

업종별로 보면 카페 · 음식점은 메뉴 갤러리, 미용실은 시술 전후 사진, 온라인 판매는 상품 상세 사진이 가장 무거워지기 쉬운 곳이에요. 이런 곳부터 확인하면 효과가 커요.

반응형 이미지와 지연 로딩은 뭔가요?

반응형 이미지는 같은 사진을 여러 크기로 준비해 두고, 손님 화면에 맞는 크기 하나만 보내는 방법이에요. HTML의 srcset · sizes라는 설정을 쓰면 브라우저가 화면 크기를 보고 알맞은 파일을 골라요.

지연 로딩은 화면 아래쪽 사진을 손님이 스크롤해 가까이 올 때 불러오는 방법이에요. 다만 web.dev는 첫 화면에 보이는 사진, 특히 가장 큰 사진에는 지연 로딩을 걸지 말라고 안내해요. 첫 화면이 오히려 늦게 뜨기 때문이에요.

사진마다 가로 · 세로 크기(width · height)를 적어 두는 것도 중요해요. 크기를 모르면 사진이 뜨는 순간 글이 아래로 밀려나서, 손님이 누르려던 버튼을 잘못 누르기도 해요.

지연 로딩과 반응형 이미지는 대부분 제작 단계에서 설정해 두는 거라, 사장님이 사진을 올릴 때마다 따로 할 일은 없어요. 다만 제대로 설정됐는지는 공개 전에 한 번 확인을 요청하세요.

사장님이 사진을 직접 올릴 때는 어떻게 줄이나요?

관리자 화면에서 자동으로 줄여 주는 홈페이지라면 원본을 올려도 괜찮아요. 그렇지 않다면 아래 순서로 한 번 줄여서 올리는 습관을 들이면 돼요.

카페 신메뉴, 공방 작품처럼 자주 올리는 사진은 기준을 한 번 정해 두면 편해요. ‘갤러리 사진은 가로 몇 픽셀, WebP’처럼 제작사와 정한 기준을 메모해 두고 매번 같은 방식으로 줄이면 돼요.

폰으로 찍은 사진에는 촬영 위치 같은 정보가 함께 저장되기도 해요. 줄이는 도구에 이런 정보를 지우는 설정이 있다면 켜 두는 편이 용량과 개인정보 면에서 모두 좋아요.

1. 01올릴 자리(배너, 갤러리, 상품 목록)가 화면에서 얼마나 크게 보이는지 확인해요.
2. 02사진 편집 앱이나 무료 이미지 압축 도구에서 가로 크기를 그 자리에 맞게 줄여요.
3. 03저장 형식을 WebP로 고르고, 화질은 눈으로 차이가 없을 만큼 낮춰 봐요.
4. 04파일 이름을 ‘IMG_1234’ 대신 ‘yeonnam-cafe-handdrip.webp’처럼 내용이 보이게 바꿔요.
5. 05올린 뒤 폰 데이터(와이파이 끈 상태)로 페이지를 열어 속도를 확인해요.

사진 설명(alt)과 파일 이름은 어떻게 쓰나요?

사진 설명은 사진을 볼 수 없는 사람에게 ‘이 사진이 전하는 내용’을 한 문장으로 알려 주듯 쓰면 돼요. 구글 검색 센터는 사진 설명을 이미지 정보 중 가장 중요한 속성으로 보고, 키워드를 억지로 채워 넣지 말라고 안내해요.

꾸미기용 무늬나 배경처럼 내용이 없는 사진은 설명을 비워 두는 게 맞아요. W3C 이미지 안내도 장식용 사진은 설명 값을 비워 두라고 해요. 반대로 메뉴판처럼 글자가 든 사진은 그 글자를 설명에 그대로 옮겨 적어야 해요.

파일 이름도 작은 단서가 돼요. 구글은 ‘IMG00023.JPG’ 같은 이름보다 짧고 내용을 설명하는 파일 이름을 권해요. 영문 소문자와 하이픈(-)으로 지으면 주소가 깨지지 않아 관리하기도 편해요.

• 좋은 예: ‘딸기 생크림 케이크 한 조각, 위에 생딸기 세 개’
• 아쉬운 예: ‘케이크 맛집 케이크 추천 케이크 주문’ (키워드만 나열)
• 아쉬운 예: ‘사진1’, ‘image’ (아무 정보가 없음)

이미지 최적화에서 자주 하는 실수는 무엇인가요?

가장 흔한 실수는 공개할 때는 가벼웠는데, 운영하면서 원본 사진이 하나둘 쌓여 다시 느려지는 거예요. 특히 갤러리 · 후기 · 상품이 자주 늘어나는 가게에서 자주 생겨요.

메뉴판 · 가격표 · 이벤트 안내를 사진 한 장으로만 올리는 것도 문제예요. 무겁기도 하고, 검색엔진과 화면 읽기 프로그램이 내용을 읽지 못해요.

속도는 구글 PageSpeed Insights 같은 무료 도구에 주소만 넣으면 확인할 수 있어요. 결과에 이미지 관련 개선 안내가 나오면 사진부터 손보면 돼요.

갤러리 사진이 수십 장이라면 처음에는 몇 장만 보여 주고 ‘더 보기’를 눌렀을 때 나머지를 불러오는 방식도 있어요. 첫 화면이 훨씬 가벼워져요.

이미지 최적화에 대해 제작사에 무엇을 물어보면 되나요?

사진은 공개 뒤에도 계속 늘어나니, 처음 올릴 때와 운영할 때를 나눠 아래 네 가지를 물어보세요.

• 관리자 화면에서 올린 사진을 자동으로 줄이고 형식을 바꿔 주나요?
• 화면 크기에 맞는 사진을 골라 보내는 반응형 이미지를 쓰나요?
• 첫 화면 사진의 로딩 속도를 공개 전에 측정해 주나요?
• 공개 후에도 무거운 사진이 늘지 않았는지 점검해 주나요?