이미지 처리방법

이미지 처리

실수: 페이지는 많은 고품질 그래픽과 사진들로 채워져있습니다. 그 중 사진은 <img> 요소의 height과 width 속성으로 축소됩니다. CSS와 JavaScript같은 페이지에서 링크된 파일들은 거대합니다. HTML 마크업 소스 역시 불필요하게 복잡하고 대규모일 수 있습니다.

영향: 페이지를 완전하게 보여주는 데 걸리는 시간이 몇몇 사용자들이 포기하거나, 혹은 참지 못하고 전체 페이지를 다시 요청할 정도로 길어지게 됩니다. 몇몇 경우, 페이지 처리가 너무 오래걸리면 에러가 발생할 것입니다.

회피하기: 인터넷에 접속하는 것은 점점 빨라지고 있으니, 비대해도 상관없다고 생각하지 마십시오. 대신에, 브라우저에서 사이트로 들어가고 나오는 모든 것을 비용으로 여기십시오. 이미지들은 비대한 페이지의 주요 원인입니다. 페이지 로드를 늦추는 이미지의 비용을 최소화하기 위해서, 다음 세가지 팁을 따르십시오.

1. 자신에게 "모든 그래픽들이 절대적으로 필요한가?"라고 물으십시오. 그렇지 않다면, 불필요한 이미지를 제거하십시오. 어떤 이미지를 압축할 지 알기 위해 여기서 사이트를 스캔할 수 있습니다.
2. Shrink O'Matic이나 RIOT같은 도구를 이용해 이미지 크기를 최소화하십시오.
3. 이미지를 미리 로드하십시오. 이것은 초기 다운로드시에는 비용을 개선하지 못할 것이나, 같은 이미지를 사용하는, 사이트의 다른 페이지를 훨씬 빨리 로드할 수 있도록 합니다. 이 팁에 대해서는, 이 아티클을 보세요.