Image Optimizing? // 이미지 최적화 란?

이미지는 콘텐츠를 풍성하고 매력적으로 만드는 요소이며, 글자만 빼곡히 적혀있는 웹문서 보다 이미지가 함께 있는 글이 더 눈길이 가기 마련이죠.

이러한 이미지는 구글 검색엔진, 마이크로소프트의 빙 검색엔진, 네이버의 리브라등의 검색엔진 등등에 최적화의 측면에서도 매우 중요합니다.

그렇다면 이미지 최적화(Image Optimizing) 란 무엇이며, 또 어떤 역할을 하는것일까요?
이미지 최적화란 웹사이트나 블로그에 업로드된 이미지를 SEO 및 웹사이트 방문율 증가에 도움이 되도록 여러 가지 수정을 하는 것을 의미합니다.

이미지 최적화는 구글과 같은 검색엔진에서 다음과 같은 역할을 합니다.

중요한 정보를 제공하는 역할을 합니다.
SEO에 최적화된 이미지는 사용자 경험에 긍정적인 역할을 합니다.
이미지 최적화 통해 사용자의 웹사이트 참여율을 높이고 이를 통해 사이트의 조회수가 향상되는 효과가 있습니다.
웹페이지의 로딩 속도를 높입니다.
이미지의 크기(용량)를 줄이는 것은 이미지 SEO에서 가장 중요한 부분입니다.
이는 웹사이트의 로딩속도로 직결되기 때문이죠. 구글에서 사진을 검색하는 사용자의 60% 이상이 사진의 출처를 확인하고 클릭하여 홈페이지에 접속하고 있다는 사실을 아시나요?

검색 결과에서 상위권에 올라올 수 있도록 도와줍니다.
구글에서 이미지 검색과 동영상(YouTube) 검색은 점점 더 인기가 많아지고 있습니다.

이렇듯 이미지는 SEO측면에서 중요한 부분을 차지하고 있으며 그 중요성은 날이 갈수록 더욱 커지고 있습니다.
미국에서는 20% 검색 활동이 구글 이미지에서 발생한다고 하니(이 데이타도 2018년 기준), 더이상 SEO에서 이미지의 힘을 무시할 수 없겠죠?

그렇다면, 어떻게 이미지를 활용하여 SEO(검색엔진 최적화) 작업을 하는 것일까요?

1. 적절한 이미지 사용하기

이미지 최적화를 위해서는 우선 내용과 관련된 적절한 이미지를 사용해야 합니다.
전달하고자 하는 글과 관련된 적합한 이미지를 사용해야 웹사이트의 SEO에 좋은 영향을 주기 때문입니다.
하지만 그렇다고 해서 아무 이미지를 가져다 쓰면 안 되며, 특히 스톡 이미지(www.shutterstock.com)의 사용을 권장하지 않습니다.
왜냐하면 그러한 스톡 이미지들(또는 무료/유료 이미지들)은 이미 많은 사람이 사용했을 확률이 높고, 인터넷상으로 중복되는 이미지가 많으면 검색 결과에서 제외 당할 수 있기 때문입니다.
스톡 이미지는 겉보기에는 예쁘고 프로페셔널해 보이지만, 사실상 여러분의 웹사이트의 독창성을 방해하며 더 나아가 SEO에 좋지 않은 영향을 줄 수 있습니다. 그러므로 이미지를 사용할 때는 되도록 본인이 직접 찍었거나 만든 고유한 이미지를 사용하는 것을 추천합니다.
적어도 스톡 이미지들을 사용할려면 적어도 3~4 개 이상의 스톡 이미지들을 이미지 편집 프로그램에서 새로운 하나의 이미지로 만들어 새로운 컨텐츠에 맞는 새로운 키워드를 지닌 이름을 부여하여 사용해야 합니다.
그래서 웹디자인에서 이미지 또는 동영상 컨트롤이 앞으로 웹디자인 필드에서 가장 중요한 부분임에 틀림이 없어 보입니다.

2. 올바른 이미지 형식 사용하기

웹사이트에 올릴 적절한 이미지를 찾았거나 만들었다면, 이제 그에 걸맞는 적절한 포맷을 선택해야 합니다.
이미지파일 포맷의 종류는 다양하지만 그중 PNG, JPG, 그리고 GIF 형식이 웹에서 가장 자주 쓰이죠.
요즘은 SVG 도 널리 사용 된느 추세이기도 합니다

그럼 GIF 형식의 존재이유인 간단한 애니메이션이 필요한 것을 제외하면, PNG 와 JPG 파일 형식의 장단점을 알아볼까요?

// PNG : 좋은 퀄리티의 이미지를 생성하지만 큰 사이즈의 파일이 단점이다.
// JPG : 퀄리티는 조금 떨어지지만 퀄리티 레벨을 자유롭게 조절하여 밸런스를 맞출 수 있다.

이 둘 중, 사용자는 이미지의 사용목적에 따라 적절한 포맷을 선택하면 됩니다.
다음은 사용 목적에 따라 보편적으로 추천하는 이미지 형식입니다.

큰 사진이나 일러스트레이션에는 JPEG로 저장하세요.
JPEG형식의 이미지는 작은 용량으로도 색상과 선명도 부분에서 좋은 효과를 줍니다.

배경의 투명도를 보존하고 싶으면 PNG 로 저장하세요.

로고와 아이콘에는 SVG 파일 형식을 추천합니다.
CSS나 JavaScript의 도움으로 SVG 형식의 이미지를 관리할수 있으며 이미지 퀄리티 저하 없이 이미지의 사이즈를 조정할 수 있습니다.
요약 : 평소에 사용하는 가벼운 이미지는 PNG를, 고화질의 사진이나 일러스트 이미지는 JPEG를 사용하세요.

3. 이미지 파일 이름 최적화 하기

이미지 최적화에서 파일 이름은 정말 중요합니다.
구글 서칭 엔진 프로그램은 초기에는 실제로 이미지를 보지않고 파일명을 통해 콘텐츠의 내용과 관련이 있는지 결정하기 때문입니다.
그래서 이미지의 파일명과 이미지 주변의 텍스트 중요성이 커지는 것이죠.
요즘 가장 널리 사용되는 셀폰의 이미지 저장에서 일반적인 이미지 파일명은 “IMG_0001” 혹은 “20211225_012345” 과 같은 날짜를 이용하거나 기본형식입니다. 이와같은 기본적인 이미지 파일명은 구글 SEO에 큰 해를 끼치지는 않지만 이미지 최적화에는 큰 도움이 되지 않습니다.
따라서 이미지 최적화를 할때는 검색엔진이 이미지를 이해하고 SEO값을 개선할 수 있도록 파일명에 내용과 관련된 기본 키워드를 반드시 파일명으로 기재 해야 합니다.

예를들어 현대의 전기자동차 사진이 있다고 가정해봅시다.
이 이미지의 가장 좋은 이름은 아래와 같습니다.

Hundai-electric car-vehicle-automobil.jpg
요악 : 이미지 파일명은 이미지를 가장 잘 표현하는 명확하고 자세한 제목으로 수정하세요.
20211225_012345.jpg 로 이미지 파일을 웹서버에 둔다면 서칭엔진 프로그램들은 이것이 이미지인줄 알지만(jpg 때문에) 파일이름에서 아무런 데이터를 가져갈 수가 없습니다

4. 반응형 이미지로 최적화 하기

반응형 이미지는 사용자가 데스크톱을 사용하든 모바일을 사용하든 이미지가 사이트 및 기기의 크기에 따라 조정됩니다.
이를 사용하여 데스크톱 뿐만 아니라 모바일 및 다양한 기기에 이미지를 최적화 하는 것은 아주 중요합니다. 만약 모바일 SEO가 최악일 경우 이탈률이 높고 전환율이 낮아지기 때문이죠.

반응형 웹사이트와 이미지는 SEO에 필수적이며, 만약 워드프레스(WorldPress)등과 같은 솔루션을 사용하여 사이트를 제작하는 경우 자동으로 반응형 이미지가 수행되기 때문에 걱정하지 않아도 됩니다.
워드프레스(WorldPress) 널리 사용된느 플러그인(Plugin)들 중에서 문서 편집 기능을 지닌 엘리멘토(Elementor)를 사용하면 간단히 해결할수가 있다.

5. 파일크기를 줄여 이미지 최적화 하기

이미지 최적화에서 파일의 크기를 빼놓을 수 없습니다. 파일크기는 사이트 속도에 정비례 합니다. 크기가 클수록 업로드 하는데 더 많은 시간이 소요되며 이는 사용자의 이탈률에도 부정적인 영향을 끼치기 때문입니다. 하지만 반대로 이미지 최적화를 위해 파일크기를 줄이면 이미지의 퀄리티가 낮아질 수 있습니다.
따라서 올바른 이미지 최적화를 위해서는, 이미지 퀄리티는 그대로 유지하면서 파일 크기를 최대한 줄여야 합니다.

이를 위해서 기본적으로 EXIF 데이터를 제거합니다. Exif 메타 데이터는 카메라 제조사, 카메라 모델, 회전 방향, 날짜와 시간, 색 공간, 초점 거리, 플래시, ISO 속도, 조리개, 셔터 속도, gps 등의 정보를 제공한다.

구글은 이미지 최적화를 위해 파일크기를 줄이는 도구 중 ImageOptim을 사용할 것을 권장합니다.
ImageOptim 은 맥용 무료 도구이며 이를 사용하면 실제로 JPEG 파일은 69 %, PNG 파일은 40 % 의 용량이 감소됩니다.
또한 Shortpixel 이라는 프로그램도 있습니다. Shortpixel을 사용하면 JPEG는 42 %, PNG는 59 % 로 줄어듭니다.
이 프로그램은 워드프레스(WorldPress)에도 플러그인이 있기 때문에 워드프레스 사용자들에게는 유용하게 쓰입니다.
그리고 가장 강력한 방법은 유료이기는 하지만, 이미지 편집 프로그램의 베스트 셀러인 오도비 포토샵(Adobe Photoshop)은 가장 강력한 기능을 포함하고 있습니다.

그 외 이미지 최적화를 위해 파일크기를 줄일 수 있는 다양한 프로그램이 많이 있습니다.

JPEGmini
Squoosh
Kraken.io (유료)

또한 이미지 최적화를 한 후에 웹사이트의 로딩시간과 속도를 테스트 할 수 있는 사이트가 있습니다.

WebPageTest
Pingdom
GTmetrix
WebWait
Google PageSpeed Insights
이미지가 페이지 속도에 어떤 영향을 미치는지 잘 모르겠다면 Google의 PageSpeed Insights 도구를 사용해보세요.

아래의 표는 일반적인 디지털 카메라로 만든 사진의 Exif 데이터이다. 카메라의 출력에 소유권 및 저작권 정보는 일반적으로 제공되지 않으므로 이후 처리 단계에서 채워야 한다. 캐논의 디지털 포토 프로페셔널과 같은 일부 프로그램들은 소유자의 이름을 카메라에 추가할 수 있게 하고 있다.

(예) 태그 값
Manufacturer: CASIO
Model: QV-4000
Orientation (rotation): top-left [8 possible values[1]]
Software: Ver1.01
Date and time: 2003:08:11 16:45:32
YCbCr positioning: centered
Compression: JPEG compression
X resolution: 72.00
Y resolution: 72.00
Resolution unit: Inch
Exposure time: 1/659 s
F-number: f/4.0
Exposure program: Normal program
Exif version: Exif version 2.1
Date and time (original): 2003:08:11 16:45:32
Date and time (digitized): 2003:08:11 16:45:32
Components configuration: Y Cb Cr –
Compressed bits per pixel: 4.01
Exposure bias: 0.0
Max. aperture value: 2.00
Metering mode: Pattern
Flash: Flash did not fire
Focal length: 20.1 mm
MakerNote: 432 bytes unknown data
FlashPix version: FlashPix version 1.0
Color space: sRGB
Pixel X dimension: 2240
Pixel Y dimension: 1680
File source: DSC
Interoperability index: R98
Interoperability version: (null)
— 이런 정보는 프로페셔날 사진작가들에게 필요하겠지만, 웹페이지 안의 이미지들에선 필요없는 정보들 이기도 합니다 또는 이런 정보들에서 구글은 이미지가 도용된건지도 파악할 수도 있겠지요

6. 캡션(Caption)으로 이미지 최적화 하기

캡션이란, 그림 하단에 별도로 배치되는 작은 텍스트 이며 첨부된 이미지를 부가적으로 설명하는 기능을 합니다.
이미지 최적화에서 캡션이 강조되는 이유는 무엇일까요?
그 이유는 바로 사람들이 웹페이지의 글을 훑어볼때 캡션이 중요한 역할을 하기 때문입니다.
사람들은 웹사이트에서 제목 -> 이미지 -> 캡션의 순서로 글을 훑어봅니다. 많은 수의 문장보다는 그림아래에 짧게 있는 캡션이 유저들의 눈에 빨리 들어 옵니다.
이미지 아래에 작게 배치된 캡션은 웹페이지의 글 보다도 먼저 눈에 띄는 요소인 것이죠.

“스캔(훑어보기)을 향상시키는 요소에는 제목, 큰 유형, 굵은 텍스트,
강조 표시된 텍스트, 글 머리 기호 목록, 그래픽, 캡션, 주제 문장 및
목차가 포함됩니다.” Jakob Nielsen, 1997
이미지 바로 아래에 있는 캡션은 메인 텍스트 보다 평균 300% 이상 더 읽혔다고 합니다. 따라서 캡션을 쓰지 않거나 제대로 활용하지 않는다는 것은 수많은 독자들의 잠재적인 참여기회를 놓치는 것과 마찬가지입니다.

그렇다고 모든 사진에 다 캡션이 있어야 하는 것은 아닙니다. 오로지 SEO와 이미지 최적화의 목적만으로 의미없는 캡션을 추가하지 마세요.
유저들에 대해 먼저 생각하고 그들에게 도움이 될 것이라고 생각되는 곳에 현명하게 사용하세요.

7. 알트 태그 및 타이틀 태그 적기

알트(Alt) 태그란? – 대체 텍스트, Alt Tag
알트(Alt) 태그 즉 대체 텍스트는 이미지에 추가되어 웹페이지의 내용을 설명하는 텍스트입니다. 웹에서 미디어 파일을 제대로 표시할 수 없는 경우 이 알트 태그(대체 텍스트) 가 이미지 대신 표시됩니다.
이러한 알트 태그(대체 텍스트)는 시각적 장애나 스크린 리더를 사용하는 사람들이 웹사이트의 내용을 이해하도록 도와줍니다.
미국에서는 지금 변호사들이 모여 이러한 시각장애인들을(특히 Disabled) 고려하지않은 대형 회사, 학교등의 웹페이지들을 소송을 걸어 거액의 배당금을 따내는 일이 흔하여 대형 회사, 학교 , 연구기관등은 과거에 올려놓은 웹피이지안의 이미지를 수정하고 있기가 바쁘다고 합닏다.

이 이외에도 검색엔진이 사이트를 크롤링하고 색인을 생성하여 순위를 지정할때도 사용됩니다.

타이틀(Title) 태그란? – 제목 태그, Title Tag
타이틀 태그는 이미지의 제목을 뜻합니다. 이미지에 마우스를 올리면 나오는 문구가 바로 타이틀 태그랍니다. 타이틀 태그는 웹페이지를 읽는 사람들에게 더 많은 정보를 주기 위한 목적으로 존재합니다. 알트태그에는 완전한 문장이 들어갈 필요는 없지만, 타이틀 태그는 정확한 키워드와 완전한 문구가 들어가야 합니다.

(예)
<img alt=”Hundai-electric car-vehicle-automobil” src=”/Hundai/car/blue-electric-carjpg” title=”Hundai-electric car-vehicle-automobil-blue color”>

그렇다면 알트태그와 타이틀 태그를 사용하여 이미지 최적화를 할 경우 어떤 장점이 있을까요?
가장 큰 장점은 바로 검색유입의 증가 입니다. 일반적인 웹사이트의 방문자들은 이미지만 봐도 어떤 내용인지 이해할 수 있지만, 검색 엔진 스파이더는 더 구체적인 단서를 원하기 때문에 알트태그와 타이틀 태그가 있다면 이미지 색인을 정확히 할 수 있으며 검색 결과에도 더 잘 표시됩니다. 또한 시각장애를 가진 사용자 에게도 도움을 줍니다. 웹 문제로 인해 이미지가 제대로 로드되지 않는 경우에, 검색엔진은 알트 텍스트를 읽고 페이지의 순위를 매길 수 있습니다.

이미지 최적화를 위한 올바른 대체 텍스트 작성법은 무엇일까요?
구글의 공식적인 추천은 키워드를 적절히 사용하고 내용과 맥락이 맞는 유용한 정보가 있는 텍스트를 쓰는 것이라고 합니다. 하지만 SEO를 위해 대체 텍스트(알트 태그) 를 유인키워드의 반복(구글의 순위를 조작하기 위해 웹페이지에 의미없는 숫자나 키워드를 채워넣는 행위) 으로 채우는 것은 좋지 않다고 명시되어 있습니다. 이는 구글에서 스팸 사이트로 간주될수 있습니다.

대체 텍스트 작성후, 구글에서 공식적으로 추천하는 접근성 검사 툴로 콘텐츠를 테스트 해보세요.

8. XML 이미지 사이트 맵 사용하기

XML 사이트 맵은 모든 사용자가 엑세스 할 수 있는 웹 사이트의 페이지 목록입니다.
즉, XML 사이트 맵은 웹사이트 소유자가 검색 엔진에 웹 사이트에 있는 모든 페이지에 대해 알리는 방법을 뜻합니다.

이미지 사이트맵을 활용하면, 구글에 이미지에 관한 정보를 제공하고 이미지 사이트맵에 정보를 추가하는 방법으로 구글에서 크롤링하지 못한 이미지의 URL을 제공할 수 있습니다. 이는 기존 사이트 맵에 이미지를 추가하거나 이미지 전용 사이트맵을 따로 만드는 방법으로 적용할 수 있습니다. 이러한 방법으로 검색엔진에서 색인된 페이지들은, 고품질의 관련성 높고 독창적인 콘텐츠라고 판단이 되면 검색순위를 향상시키는데 도움이 될 수 있습니다.

<사이트맵 예>
아래의 이미지 두 개가 포함된 사이트맵 예시를 참조하여 각 페이지에 최대 1,000개의 이미지 나열이 가능합니다. – 출처: 구글

http://example.com/sample.html

– http://example.com/image.jpg

– http://example.com/photo.jpg

만약 워드프레스를 기반으로 웹사이트를 운영중이라면, Yoast SEO를 사용하여 이미지를 자동으로 사이트맵에 추가할 수 있습니다.

9. 세이프서치에 맞게 이미지 최적화 하기

세이프서치는 구글에서 19세 미만의 청소년에게 유해한 시각콘텐츠(동영상, 이미지 등)나 기타 웹사이트로 연결되는 링크를 차단하는 기능입니다. 운영중인 웹사이트가 이에 해당되는 경우 세이프서치 설정을 이미지에 적용하여 구글에 알려줘야 한답니다.
세이프서치에 맞게 이미지 최적화를 하는 것은 인터넷상의 무분별한 노출효과를 막아 자녀와 함께 기기를 사용하는 사용자에게 쾌적한 환경을 제공할 수 있습니다.

이를 적용하는 방법으로는 두가지가 있습니다.

성인용 이미지 그룹화 하기
구글에서는 웹사이트에 19금 성인용 이미지가 있다면 다른 이미지와 별개로 그 이미지들만 그룹화 하는것을 적극적으로 권장하고 있습니다.
이미지가 모여있는 폴더 이름으로 구분하기( Adult, adult-only, Kid-image, etc.)

예시 : http//www.example.com/adult/image.jpg

성인용 페이지 메타데이터 추가
웹사이트에 성인용 이미지를 게시할때 다음 메타 태그 중 하나를 페이지에 추가하여 자체적으로 성인용 페이지라는 신호를 주는 것이 좋습니다.

10. 이미지 CDN을 통해 이미지 최적화 하기

이미지 CDN이란 무엇일까요?
이미지 CDN이란, Content Delivery Network의 약자입니다. 즉, 멀리 떨어져 있는 사용자에게 콘텐츠를 더 빠르게 제공하는 기술입니다.

예를들어 한국에 서버에 있는 이미지를 미국의 사용자에게 송출할때, 물리적인 거리로 시간이 조금 지연되게 됩니다.
이 문제점을 해결하기 위해, CDN 서비스에서 서버를 여러곳에 두고 사용자가 요청했을때 가장 가까운 서버에서 이미지를 처리하여 시간이 단축되는 것이죠.
따라서 이미지 CDN은 웹사이트의 로딩속도를 빠르게 향상시켜주고, 이미지를 안정적으로 제공해 준다는 장점이 있답니다.
CDN은 이미지 최적화에 탁월하며 이미지 파일 크기를 40~80% 줄일 수 있습니다.

현재 Thumbor은 유일한 자체관리 이미지 CDN 오픈소스 입니다. 무료로 사용 가능하지만 상용 CDN보다 기능이 적다는 단점이 있습니다.
위키피디아, 스퀘어 그리고 99디자인은 Thumbor을 사용하는 사이트입니다. 이곳에서 이미지 CDN을 세팅하는 방법을 참조하세요.

또한 이 밖에도 CDN 서비스를 제공하는 다양한 업체가 있습니다.

Imagekit
Sirv
Cloudinary

지금까지 이미지 최적화를 위한 10가지 정도의 내용들을 보았습니다

혹시 이해가 안가는 부분이 있으시거나, 추가적으로 궁금한 점이 있으시다면 Google 검색에서 최대한 정보를 얻어 가시면됩니다.

이미지 최적화(SEO)란 무엇인가요?

이미지 최적화란 웹사이트에 있는 이미지를 SEO 및 트래픽 증가에 도움이 되도록 여러가지 보완 및 수정을 하는 모든 작업을 의미합니다.

이미지 최적화가 왜 중요한가요?

1) 웹사이트의 방문자율을 높여줍니다.
2) 검색엔진에서 상위노출될 가능성을 높여줍니다.
3) 웹사이트 로딩 속도를 빠르게 해줍니다.

이미지 최적화 적용(Image Optimizing) 이젠 시작해야 합니다.

***이미지 다운로드 사이트

https://www.freepik.com/

*** 포토샵 파일 샘플