이미지 크기 및 해상도 문제

물건을 판매하거나, 서비스를 제공하거나, 소셜 미디어를 제공하거나, 단지 온라인에 정보를 제공하는 것에 관계없이 콘텐츠와 존재는 사용자가 관심을 가져야만 성공할 수 있습니다. 사용자가 만족하면 일반적으로 웹사이트의 성공으로 이어집니다.

뇌는 텍스트보다 시각 자극을 더 빨리 받아들이고 처리하기 때문에 사용자 참여를 유도하는 데 이미지가 도움을 줍니다. 인간은 이미지에 더 잘 반응하도록 프로그램되어 있습니다.

웹사이트 이미지는 여러 방법으로 사용자 참여를 개선할 수 있습니다.

  • Facebook에서 사진이 포함된 게시물은 50% 더 좋아요를 받습니다.
  • 이미지가 포함된 기사는 94% 높은 조회수를 기록합니다.
  • 63%의 사람들은 제품 이미지 품질이 제품 정보보다 더 중요하다고 생각합니다.

웹사이트의 용도가 무엇이든 간에 이미지 없이 서식 없는 텍스트만 표시된다면 방문자의 관심을 끌거나 참여를 유도하기 어렵습니다.

이 때문에 지난 5년 동안 이미지가 더 커졌습니다. 아래 그래프(데이터 출처: http://httparchive.org)를 보면 콘텐츠 소유자들이 웹사이트를 더욱 흥미롭게 만들고 새로운 고해상도 화면을 활용하려 하면서 이미지 개수는 거의 변함이 없지만 이미지 크기가 거의 세 배 증가했습니다.

만족한 사용자는 기다리지 않습니다.

Image & Video Manager Growth Graph

풍성한 콘텐츠와 더불어 웹사이트 성능 개선도 사용자 몰입도를 개선하는 것으로 나타났습니다. 뛰어난 성능은 고해상도 이미지를 제공하는 것과 극과 극의 대척점에 있습니다.

이미지 성능은 네트워크 전송 속도와 화면에 표시되는 속도라는 두 가지 측면으로 결정됩니다.

숨겨진 이미지의 로딩을 피하기 위한 반응형 이미지, 지연 로딩, RESS(Responsive and Server Side Design) 같은 브라우저 솔루션도 있습니다.

네트워크 성능

이미지 다운로드 시간을 개선하기 위한 황금률은 바이트를 줄이는 것입니다. 여기에는 다음과 같은 내용이 포함됩니다.

  • 화면 크기에 맞게 이미지 해상도와 픽셀 크기를 줄이세요.
  • 웹사이트에 적절한 수준으로 품질을 줄이세요.
  • 압축하고 전송할 수 있는 적절한 포맷을 선택하세요.
  • 크로마 서브샘플링 적용
  • 파일의 전체 크기를 줄여 로딩 시간을 단축하세요.
사용자가 3G 같이 느린 연결을 사용하는 경우 더욱 적극적으로 최적화해야 할 수 있습니다. 예를 들어 저해상도 이미지를 보낼 수도 있습니다.

디바이스 성능

이미지가 디바이스가 전송되면 화면에 표시되기 위해 처리(디코딩)와 페인팅을 거쳐야 합니다. 모든 디바이스가 동일하게 제작되지 않고 메모리와 그래픽 처리 성능이 다르기 때문에 이미지 페인팅 시간이 큰 영향을 받을 수 있습니다. 위 모든 기술은 이미지의 메모리 점유율을 줄이고 페인팅 시간을 단축하는 데 도움을 줄 수 있습니다.

아름다운 이미지 + 우수한 성능 = 사용자 만족 = 웹사이트 성공

올바른 이미지 제공은 간단했었습니다. 이제 화면 크기가 제각각인 수천 가지 디바이스가 있기 때문에 다양한 네트워크 연결과 브라우저 전용 이미지 포맷도 생각해야 합니다. 10년 전 거의 모든 사용자가 CRT 디스플레이와 56k 모뎀으로 웹을 서핑하던 때와 완전히 달라졌습니다.

사용자 만족을 유지하기 위해 이미지를 제거할 수는 없으므로 되도록 빨리 이미지를 전송하고 표시하여 웹사이트의 이미지 문제를 해소해야 합니다.

Akamai Image & Video Manager로 다양한 온라인 이미지를 관리하는 방법을 알아보세요.