웹에 올리기 전 점검 목록

순서가 있는 이유

각 단계가 앞 단계의 결과 위에 얹히기 때문입니다. 형식을 바꾸면 압축 기준이 달라지고, 크기를 바꾸면 용량이 달라집니다.

그래서 뒤에서 앞으로 거슬러 올라가면 앞서 한 작업을 다시 해야 합니다. 순서대로 내려가면 한 번씩만 하면 됩니다.

1. 형식

사진인지 도형인지, 투명이 필요한지를 먼저 정합니다. 이 결정이 뒤의 모든 것을 좌우합니다.

웹에만 올릴 이미지라면 더 효율적인 형식을 쓸 여지가 있습니다. 다만 방문자가 이미지를 내려받아 다른 곳에 쓸 가능성이 있다면 익숙한 형식이 편합니다.

2. 크기

이 이미지가 화면에서 몇 픽셀 폭으로 보일지 확인합니다. 그보다 훨씬 큰 이미지를 올리는 것이 낭비의 가장 큰 원인입니다.

고해상도 화면을 고려해 표시 폭의 두 배 정도로 준비하는 방식이 흔히 쓰입니다. 그 이상은 대개 눈에 띄는 차이를 만들지 못합니다.

목록에 쓰이는 작은 이미지는 따로 만듭니다. 큰 이미지를 화면에서 줄여 보여 주는 방식은 파일을 그대로 다 받으므로 느립니다.

3. 압축

크기를 맞춘 뒤에 압축을 조입니다. 이 순서면 덜 조여도 목표 용량에 닿습니다.

실제로 보일 크기에서 결과를 확인합니다. 확대해서 보면 판단이 흐려집니다.

4. 파일 이름

내용을 알아볼 수 있는 이름을 씁니다. 카메라가 붙인 이름이나 화면 캡처 기본 이름은 나중에 찾기 어렵습니다.

띄어쓰기 대신 붙임표를 쓰고, 한글보다 영문·숫자를 쓰는 편이 주소로 쓰일 때 안전합니다. 한글 파일 이름은 환경에 따라 주소가 길고 지저분하게 바뀝니다.

5. 대체 텍스트

이미지가 표시되지 않을 때, 그리고 화면 낭독기를 쓰는 사람에게 전달될 문장입니다. 이미지가 무엇을 보여 주는지 담담하게 적으면 됩니다.

«이미지», «사진» 같은 말로 시작할 필요는 없습니다. 이미 이미지라는 것은 전달됩니다.

장식용이라 설명할 내용이 없다면 비워 두는 편이 낫습니다. 의미 없는 문장이 읽히는 것보다 조용한 편이 낫습니다.

6. 실제 페이지에서 확인

마지막은 편집 도구가 아니라 실제 페이지에서 봅니다. 여기서 처음 드러나는 것이 꽤 많습니다.

휴대폰 화면에서 잘리지 않는지, 어두운 배경에서 테두리가 보이지 않는지, 이미지가 뜨기 전 페이지가 덜컥 움직이지 않는지를 봅니다.