이미지 최적화를 통해 웹사이트 개선하기

오늘날의 디지털 시대에서 웹 사이트는 브랜드의 얼굴로서 관심을 끌고 잠재 고객을 확보하는 중요한 역할을 합니다.

소비자라면 편의성, 멋진 디자인, 퀄리티 좋은 이미지 등 웹 사이트에 기대하는 바가 있을 것입니다. 웹 사이트를 직접 구축할 때는 이러한 요소를 빠짐없이 갖추는 일만 해도 버거울 수 있습니다. 하지만 단순히 적절한 템플릿이나 디자이너를 찾는 것만으로는 부족합니다. 실제로 사이트를 선보이고, 작동 여부까지 확인해야 비로소 완전한 사이트 구축 작업이 끝납니다.

웹 사이트의 성능과 순위에 큰 영향을 미치는 숨은 요소는 이미지 최적화입니다. 간과하기 쉽지만 웹 사이트가 성공적으로 운영되기 위한 필수요소입니다.

사이트의 디자인과 성능을 좌우하는 이미지 최적화

웹 사이트에서 이미지 최적화란 사용자 참여도를 높이기 위해 최적의 형식, 크기, 해상도로 된 고품질 비주얼을 사용함으로써 빠른 콘텐츠 로딩과 순조로운 페이지 이동을 지원하는 것을 의미합니다.

또한 검색 엔진이 페이지 콘텐츠를 찾아내고 파악할 수 있도록 웹 사이트 이미지에 정확한 라벨을 적용하는 것도 포함됩니다. SEO 순위 향상에 매우 중요한 이 과정에는 이미지에 라벨을 적용하는 방법, 제목에 들어갈 단어 선정, 웹 페이지의 레이아웃 등 모든 것이 포함됩니다.

이미지 최적화는 웹 사이트의 모습과 작동 방식에 영향을 미치므로 사용자가 사이트를 잘 찾고, 더 나은 경험을 한다면 이미지 최적화가 잘 되었다고 볼 수 있습니다.

지금까지 이미지 최적화의 중요성을 살펴보았고, 다음으로 이미지 최적화의 방법을 알아보겠습니다.

업로드 전 적합한 파일 유형 선택

먼저 이미지에 가장 적합한 파일 유형을 선택해야 합니다. 인터넷에서 사용되는 대부분의 이미지는 다음 유형 중 하나입니다.

PNG(Portable Network Graphic) 파일은 그래픽을 웹 사이트에 저장합니다. 디지털 아트, 특히 로고와 아이콘 같은 특정 플랫 이미지에 적합합니다.

JPEG 파일은 통합 사진 전문가 단체(JPEG: Joint Photographic Experts Group)가 표준화한, 압축 그래픽 형식으로 저장된 이미지입니다. 대부분의 디지털 카메라가 JPEG 확장명을 기본으로 사용하기 때문에 사진에 최적화된 파일 형식입니다.

GIF(Graphics Interchange Format) 파일은 한 번에 여러 이미지를 담을 수 있습니다. 그래서 플립북과 같은 과정을 통해 간단한 애니메이션을 만들 때 사용합니다.

사진 크기 줄이기

위 이미지 파일 유형은 모두 픽셀마다 색상, 위치, 비율이 정의된 정적 이미지를 표시합니다. 정적 이미지는 크기를 조정할 수 없습니다. 만약 이미지 크기를 늘리면 선명도가 떨어지고 픽셀화 현상이 나타납니다.

대용량의 고해상도 이미지는 저장소 공간을 많이 차지하고 사이트 로딩 속도가 느려져 방문자가 웹 사이트를 떠나기 쉽습니다. 또한 이런 추가 정보는 이미지가 로딩된 후 표시되는 방식을 개선하는 데 별 도움이 되지 않습니다.

반대로, 지나치게 작은 이미지를 사용하면 왜곡되고 흐리게 나타나기 때문에 웹 사이트 신뢰도에 악영향을 끼칠 수 있습니다. 작은 파일 크기는 잠깐 살펴볼 이미지를 전송할 때 적합합니다.

따라서 웹 콘텐츠를 제작할 때 알맞은 파일 크기를 선택하는 일이 무엇보다 중요합니다. 품질 저하 없이 공간에 맞게 이미지 크기를 변경하려면 어도비 포토샵(Adobe Photoshop)이나 어도비 라이트룸(Adobe Lightroom)과 같은 사진 편집 소프트웨어에서 픽셀 크기를 조정하면 됩니다.

이미지의 대체 텍스트 최적화

대체 텍스트(alt text)는 웹 사이트에서 이미지가 로딩되지 않을 때 해당 이미지 대신 화면에 표시되는 문구로, 이미지를 파악할 수 있도록 합니다. 검색 엔진은 이 텍스트를 크롤링하고 웹 사이트의 순위를 올려 더 많은 잠재 고객이 볼 수 있게 해줍니다.

대체 텍스트는 시각 장애인이 화면 읽기를 사용할 때 콘텐츠를 이해할 수 있도록 지원하는 역할을 한다는 것이 큰 장점입니다.

대체 텍스트를 상세하고 정확하게 작성하면, 웹의 포괄성을 향상할 수 있을 뿐만 아니라 중요한 잠재 고객을 더 많이 확보할 수 있습니다.

다음은 대체 텍스트를 이미지에 추가할 때 참고할 수 있는 팁입니다.

•장식용이 아닌 이미지에는 모두 추가합니다.

•텍스트는 간결한 서술형이어야 합니다.

•방문자가 이미지에서 보게 될 것을 간단하게 묘사하세요.

•이미지를 텍스트로 바꿨을 때도 페이지를 이해할 수 있는지 자문해 봅니다.

•링크가 있는 이미지라면 대체 텍스트는 방문자가 클릭할 때 실행되는 동작을 설명해야 합니다.

사진 용량 줄이기

이미지 품질을 크게 저하시키지 않고 그래픽 파일의 크기를 최소화해야 합니다. 메모리 공간을 차지하는 크기를 줄여 웹 페이지 로딩 시간을 단축해주므로 이미지 최적화에서 중요한 부분입니다.

다음 압축된 고해상도, 저해상도 이미지를 비교해 보세요.

경험에 비춰볼 때, 웹 사이트에는 어느 정도 압축된 이미지를 사용하는 것이 좋습니다. JPG는 70~90% 수준의 품질이 적절합니다. 포토샵과 같은 프로그램은 이미지를 손쉽게 사진 용량을 줄일 수 있는 툴을 제공합니다.

소스 코드에서 사진을 간결하게 설명

HTML과 같은 웹 소스 코드는 브라우저의 페이지 레이아웃을 설명하는 수단입니다. 웹 크롤러(검색 엔진)는 소스 코드로 레이아웃된 이미지만 '크롤링'할 수 있으므로 구글(Google)이나 빙(Bing)에서 웹 사이트가 잘 검색되도록 하려면 웹 페이지 코드에서 이미지를 명료하게 설명해야 합니다.

다음은 이미지 최적화를 위해 웹 사이트의 소스 코드를 효과적으로 편집하는 방법입니다.

•프로그램 사용: 어도비 드림위버(Adobe Dreamweaver)와 같은 웹 페이지/사이트 디자인 프로그램을 사용하면 이미지를 삽입하고, 태그 및 접근성 속성을 설정하고, 이런 요소를 HTML 코드로 확인할 수 있습니다. 또한 필요할 때마다 코드를 바로 변경할 수 있습니다.

•적절한 이미지 제공: 'srcset'라고 하는 속성을 사용하면 같은 이미지지만 크기가 다른 버전의 목록을 정리하고 각 이미지의 크기에 대한 정보를 제공할 수 있습니다. 브라우저는 이를 바탕으로 사용자의 디바이스(예: 모바일 또는 데스크탑)에 가장 적합한 이미지를 자동으로 제공합니다.

•불필요한 데이터 제거: 이미지에는 사진의 촬영 시기 및 위치, 카메라 유형과 같은 정보인 메타데이터가 포함되어 있습니다. 웹 사이트의 속도를 느려지게 만들 수 있으므로 삭제하는 것이 좋습니다.

이미지 용도 이해

이미지는 사용자가 브랜드, 비즈니스, 스토리 등을 파악하는 데 도움을 주므로 사이트의 내러티브에 크게 기여합니다. 그렇지만 이미지가 너무 많으면 웹 사이트의 로딩 시간이 그만큼 길어지므로 이탈률이 높아질 수 있습니다. 실제로 통계에 따르면 웹 사이트 로딩이 1초만 더 걸려도 고객 만족도가 16% 감소하며, 50%에 달하는 방문자가 제대로 작동하지 않는 웹 사이트는 다시 방문하지 않았습니다.

그렇다면 어떻게 해야 사이트의 전환율과 클릭률이 떨어지지 않을까요?

스마트한 이미지 선택이 핵심입니다. 사용자가 신속하고 간편하게 콘텐츠를 관리할 수 있는 썸네일, 확대하여 필요한 세부 정보를 확인하고 '장바구니에 담기'를 클릭할 수 있도록 설계된 제품 이미지 등 방문자를 의도적으로 연결할 수 있는 이미지를 엄선해야 합니다.

적합한 이미지와 모범 사례로 웹 사이트 개선

웹 사이트의 디자인을 돋보이게 하고, 접근성을 높이며 사용자 친화적으로 만드는 이미지를 사용해 브랜드 이미지를 강화하세요. 이미지 최적화를 염두에 두고 웹 사이트를 디자인하면 사용자 참여도를 높이고 신규 방문자 트래픽도 늘릴 수 있습니다. 또한 이미지 모범 사례를 정착시키기 위해 노력하면 클라이언트, 직원, 잠재 고객들이 귀사의 사이트를 방문할 때마다 브랜드 이미지가 한층 향상될 것입니다.