사진 올리기 전 30초가 속도를 바꿉니다

사이트를 느리게 만드는 가장 흔한 원인은 복잡한 코드가 아니라 손대지 않고 올린 사진입니다. 요즘 휴대폰 사진은 가로 4000픽셀을 넘는 경우가 많은데, 화면에서 실제로 쓰이는 폭은 그보다 훨씬 작습니다. 나머지는 내려받기만 하고 버려집니다.

다행히 이 문제는 올리기 전에 30초면 해결됩니다. 순서는 세 가지입니다 — 크기 · 포맷 · 파일명.

1. 크기 — 쓰이는 만큼만

가장 큰 절약은 여기서 나옵니다. 사진이 화면에서 어느 정도 폭으로 표시되는지 보고, 그 정도에 맞춰 미리 줄여서 올립니다. 전체 폭 배경 이미지라면 넉넉히, 본문 안 사진이라면 그보다 훨씬 작게 잡아도 충분합니다.

워드프레스는 업로드한 이미지로 여러 크기의 사본을 자동으로 만들어 상황에 맞게 내보냅니다. 이것은 큰 도움이 되지만, 원본이 지나치게 크면 원본이 쓰이는 자리에서 그대로 비용이 발생합니다. 그래서 업로드 전 리사이즈가 여전히 유효합니다.

같은 사진의 상대적 무게 개념도 — 실제 값은 사진마다 다르므로 자기 사진으로 확인한다

포맷 선택의 기준은 취향이 아니라 내용입니다. 색이 부드럽게 이어지는 사진은 JPEG 계열이 맞고, 선과 단색 면으로 이루어진 로고 · 아이콘 · 도표는 PNG 나 SVG 가 맞습니다. 로고를 JPEG 로 저장하면 글자 가장자리가 지저분해집니다.

여기에 더해 WebP 같은 최신 포맷을 쓰면 같은 화질에서 파일이 더 작아집니다. 요즘 브라우저는 대부분 지원하고, 변환은 무료 도구나 플러그인으로 자동화할 수 있습니다.

투명 배경이 필요한 로고는 PNG 또는 SVG 로 두세요. 특히 SVG 로고는 어떤 화면 밀도에서도 선명하고 파일도 작습니다.

업로드 직전에 파일명을 바꿉니다. IMG_4821.JPG 는 사람에게도 검색엔진에게도 아무것도 알려주지 않습니다. seoul-office-interior.jpg 처럼 영문 소문자 · 하이픈 · 내용을 설명하는 이름으로 바꿉니다.

한글 파일명은 서버 환경에 따라 주소가 인코딩되면서 길어지거나 깨지는 경우가 있어 피하는 편이 안전합니다.

업로드한 뒤에는 대체 텍스트(alt)를 씁니다. 화면을 볼 수 없는 사용자에게 읽히는 설명이자, 검색엔진이 이미지 내용을 이해하는 근거입니다. “사진” 같은 말이 아니라 실제로 무엇이 보이는지 한 문장으로 적습니다.

사진 한 장의 30초 절차 — 습관이 되면 생각하지 않고 지나간다

이미지가 첫 화면 속도에 미치는 영향은 성능 최적화 아카이브에서 더 다루고, 앞 회차의 모바일 점검과 함께 보면 효과가 가장 큰 자리를 먼저 찾을 수 있습니다. 이미 수백 장이 원본 그대로 올라가 있다면 일괄 정리가 최적화 지원 사업에 포함됩니다.

여기까지는 직접 하는 편이 빠른 일들이었습니다. 다음 회차는 반대쪽입니다 — 직접 하면 오히려 손해인 작업을 시간당 가치로 따져 봅니다.