WordPress용 이미지를 최적화하는 방법

WordPress 콘텐츠에 이미지를 포함해야 하는(그리고 포함해야 하는) 이유는 많습니다. 이미지는 독자의 참여를 유지하는 데 도움이 됩니다. 또한 긴 콘텐츠를 분해하고 검색 엔진 최적화(SEO)를 개선하는 방법이기도 합니다. 그러나 웹 사이트 속도가 느려질 수도 있습니다.

다행히 이미지를 최적화하는 데 도움이 되는 리소스가 꽤 많이 있습니다. 이는 웹 사이트의 전반적인 성공에 해로울 수 있는 느린 페이지 속도를 극복할 가능성이 더 높다는 것을 의미합니다.

이 기사에서는 큰 이미지가 사이트를 방해하는 이유를 살펴보겠습니다. 그런 다음 사이트의 SEO를 개선할 수 있는 몇 가지 기본적인 이미지 최적화 팁과 함께 미디어 파일을 효과적으로 압축하는 방법을 살펴보겠습니다.

WordPress용 이미지를 최적화해야 하는 이유

이미지는 모든 콘텐츠 전략의 귀중하고 중요한 부분입니다. 그러나 페이지 로딩 시간이 느려지는 주요 원인 중 하나일 수도 있습니다.

느린 웹사이트는 사용자를 멀어지게 할 수 있기 때문에 문제입니다. 실제로 로드하는 데 5초 이상이 걸리는 페이지는 평균적으로 사용자 이탈 가능성이 90% 증가합니다(단일 페이지만 본 후 이탈).

사이트 속도를 저하시킬 수 있는 여러 가지 요인이 있지만 이미지 및 미디어 파일은 최신 웹 사이트에서 대역폭의 63%를 차지합니다. 따라서 사이트에 업로드하는 이미지를 최적화하는 것이 중요합니다.

사이트 속도가 Google 순위 요소라는 점도 주목할 가치가 있습니다. 즉, 페이지 로드 속도에 따라 검색 결과 순위가 어느 정도 결정됩니다. PageRank에 영향을 미치는 많은 요소가 있으며 이미지는 "웹 페이지의 유용성" 범주에 속합니다.

이미지 최적화는 실제로 다음 두 가지를 개선하는 것입니다.

• 각 이미지 픽셀을 인코딩하는 데 사용되는 바이트 수
• 사용된 총 픽셀 수입니다.

즉, 최적화는 최소한의 픽셀과 바이트에서 최상의 품질을 얻는다는 것을 의미합니다. 이렇게 하면 미디어 파일 크기가 줄어들고 전반적인 사이트 속도에 상당한 영향을 미칠 수 있습니다.

WordPress에 업로드하기 전에 이미지 최적화

궁극적으로 웹 사이트에 대한 최상의 시나리오는 이미지를 업로드하기 전에 이미지를 최적화하는 것입니다. 이것은 하나의 이미지가 중복되거나 여러 버전으로 끝나지 않도록 하기 위한 것입니다. 그것은 이미지 최적화를 통해 웹사이트의 로드를 가볍게 하려는 목적을 무산시킬 것입니다.

이를 염두에 두고 사이트 미디어를 최적화하는 방법을 결정할 때 고려해야 할 몇 가지 사항을 살펴보겠습니다.

이미지 파일 형식

시작하려면 존재하는 다양한 종류의 이미지 형식을 살펴보겠습니다. 각 이미지가 어떻게 다른지, 언제 사용하는 것이 가장 좋은지 이해하면 이미지를 보다 효율적으로 사용하는 데 도움이 될 수 있습니다.

온라인에서 사용되는 가장 일반적인 두 가지 이미지 형식은 JPEG와 PNG입니다. 이 두 형식은 모두 픽셀로 구성됩니다. 이미지의 크기를 변경하면 픽셀이 늘어나 이미지가 흐려지는 경우가 있습니다. 그러나 이러한 이미지 유형에는 서로 다른 강점과 약점이 있습니다.

JPEG를 사용해야 하는 경우

JPEG 파일은 인쇄 및 웹 콘텐츠 모두에 적합합니다. 이러한 종류의 이미지 파일은 '손실' 형식을 사용합니다. 더 큰 이미지를 JPEG로 변환하면 해당 파일에 포함된 일부 정보가 손실됩니다.

해당 정보는 단순히 이미지를 표시하는 데 필요하지 않습니다. 그러나 이것이 의미하는 바는 JPEG로 변환하면 파일 크기가 작아지지만 전반적인 이미지 품질이 약간 저하될 수 있다는 것입니다. 다행스럽게도 특히 작은 이미지의 경우 품질 저하가 눈에 띄지 않습니다.

PNG를 사용하는 경우

PNG 파일은 JPEG와 마찬가지로 웹 콘텐츠에도 유용하지만 방식이 다릅니다. 예를 들어 PNG는 투명한 배경을 가질 수 있기 때문에 웹 그래픽 디자인에 더 다양하고 편리합니다.

PNG는 '무손실' 파일 형식을 사용합니다. 즉, 파일이 압축될 때 이미지에 대한 모든 정보가 유지됩니다. 결과적으로 품질이 더 좋아지는 경향이 있지만 파일 크기와 페이지 속도 면에서 더 적은 개선을 제공합니다. 그래픽과 아이콘, 고품질 이미지에 적합한 옵션입니다.

이미지 크기

부풀어 오름을 잘라야 할 때입니다. 크기 조정된 이미지를 제공하는 것은 이미지를 최적화하는 가장 간단하고 효과적인 방법 중 하나입니다. 왜 그렇게 효과적입니까? 이미지 크기 조정은 자산을 브라우저에서 의도한 크기로 표시하는 데 필요한 것보다 더 많은 픽셀을 제공하지 않도록 합니다.

많은 사이트에서 크기가 조정되지 않은 큰 이미지를 제공하고 브라우저를 사용하여 크기를 조정하려고 시도하므로 추가 리소스를 사용하고 사이트 속도가 느려집니다. 이미지의 기본 크기가 820×820픽셀이고 브라우저에서 400×400픽셀로 표시되는 경우…32,400개의 불필요한 픽셀입니다!

페이지가 로드되는 선명도와 속도는 이미지가 표시되는 장치(모바일, 데스크탑 등)와 많은 관련이 있습니다. 예를 들어 4k 이미지는 27인치 모니터에서 멋지게 보일 수 있습니다.

그러나 방문자가 해당 이미지가 포함된 페이지를 로드하면 브라우저는 먼저 파일을 전체 해상도로 렌더링한 다음 화면에 맞게 축소합니다. 400픽셀보다 큰 것을 지원하지 않는 모바일 장치를 사용하는 경우 콘텐츠를 놓칠 수 있습니다.

이를 염두에 두고 이미지를 내보낼 때 몇 가지 모범 사례는 다음과 같습니다.

• 이미지를 '웹에 최적화된' JPEG 또는 PNG로 저장하여 이미지 파일 크기를 수백 킬로바이트 미만으로 유지하십시오.
• 이미지에 대한 웹 표준은 72dpi(인치당 도트 수)이며, 위에 규정된 형식으로 이미지를 저장하면 달성할 수 있습니다.

Photoshop, Lightroom 또는 이와 유사한 편집기를 사용하여 이미지 크기를 너비가 약 1,500픽셀 이하로 줄일 수 있습니다. Photoshop에서 이미지 > 이미지 크기 로 이동하여 이미지의 크기와 해상도를 수동으로 조정합니다. 파일 > 내보내기 > 웹용으로 저장 으로 이동하여 웹 업로드용으로 이미지를 최적화할 수도 있습니다.

더 큰 모니터에 선명하고 생생한 사진을 표시하는 것이 목적이 아닌 경우 이미지 크기를 더 줄일 수 있습니다.

Lightroom으로 작업하는 경우 파일 > 내보내기 로 이동하여 내보낼 때 이미지 크기를 수동으로 조정합니다.

이미지 크기와 해상도는 퍼즐의 한 부분일 뿐입니다. 이미지를 최적화할 때 압축을 이해하고 효과적으로 사용하고 싶을 것입니다.

이미지 압축

간단히 말해서 이미지 압축은 이미지 품질을 허용할 수 없는 수준으로 저하시키지 않으면서 그래픽 파일의 크기(바이트 단위)를 최소화하는 방법입니다. 논의한 바와 같이 파일 크기가 불필요하게 큰 고해상도 이미지는 페이지 속도에 큰 영향을 미칠 수 있습니다.

반면에 최적화된 이미지는 최적화되지 않은 이미지보다 평균 40% 더 밝습니다. 일반적으로 업로드 프로세스 전이나 도중에 웹사이트에 업로드하는 모든 이미지와 기타 미디어를 최적화하는 것이 좋습니다.

손실 대 무손실 압축

앞서 언급했듯이 JPEG와 PNG는 두 가지 다른 유형의 이미지 압축을 사용합니다. 무손실 압축은 품질 저하 없이 원본 파일의 모든 데이터를 보존합니다.

무손실 압축을 사용하면 일반적으로 파일을 전송 또는 저장을 위해 '더 작은' 형식으로 나눕니다. 그런 다음 정보가 다른 쪽 끝에 다시 결합되어 다시 사용할 수 있습니다.

반면에 손실 압축은 이미지 파일에 포함된 일부 데이터를 제거합니다. 이로 인해 품질이 더 많이 떨어질 수 있지만 페이지 속도가 더 크게 향상될 수도 있습니다. 품질과 성능 간의 균형을 이루기 위해 압축량을 사용자 정의할 수도 있습니다.

이미지 압축 플러그인

빠르게 로드되는 이미지는 더 빠른 사이트와 더 나은 SEO를 의미합니다. 다음은 이미지 압축에 도움이 되는 다양한 이미지 최적화 플러그인입니다.

Smush 이미지 압축 및 최적화

Smush의 이미지 압축 플러그인은 웹용 모든 이미지의 크기를 조정, 최적화 및 압축하여 이전보다 빠르게 로드합니다. 귀하의 사이트에 사진이 많다면 이 플러그인은 필수입니다.

ShortPixel 이미지 최적화 프로그램

ShortPixel의 Image Optimizer 플러그인은 미디어 라이브러리에 업로드된 모든 과거 및 미래의 이미지와 PDF를 압축합니다. 플러그인은 대부분의 파일 형식에 대해 손실 압축과 무손실 압축을 모두 제공합니다. 사진작가라면 고품질 손실 최적화 알고리즘을 사용하는 광택 있는 JPEG 압축을 선택할 수 있습니다.

JPEG 및 PNG 이미지 압축

JPEG와 PNG만 최적화하고 싶으신가요? 이 플러그인은 이미지 압축 서비스 TinyJPG 및 TinyPNG를 사용하여 이미지 압축을 지원합니다. 평균적으로 JPEG 이미지는 눈에 띄는 품질 손실 없이 40-60%, PNG 이미지는 50-80% 압축됩니다.

EWWW 이미지 최적화

EWWW Image Optimizer는 두 가지 역할을 합니다. 사이트의 기존 이미지를 최적화하고 업로드하는 새 이미지도 관리합니다. 또한 이미지가 압축되는 방식(및 양)에 대한 많은 제어 기능을 제공합니다.

Kraken.io 이미지 최적화 도구

마지막으로 Kraken.io Image Optimizer는 새 미디어와 기존 미디어를 모두 최적화하는 데에도 유용합니다. 무손실 및 '지능형' 손실 압축을 지원하여 더 작은 파일 크기로 고품질 이미지를 쉽게 얻을 수 있습니다.

나타난 그림

추천 이미지는 WordPress 게시물의 본문에 삽입되지 않지만 테마 전체에서 구조적으로 사용됩니다. 예를 들어 게시물 제목 옆에 미리 보기로 표시되거나 특정 게시물을 볼 때 머리글에 표시될 수 있습니다.

대부분의 테마와 위젯은 추천 이미지에 의존하므로 생략하고 싶은 것이 아닙니다. 추천 이미지를 사용하면 더 많은 사용자 정의가 가능합니다. 특정 게시물 및 페이지에 대한 고유한 사용자 지정 헤더 이미지를 표시하거나 테마의 특수 기능에 대한 축소판을 설정할 수 있습니다.

추천 이미지의 크기를 결정하면 이후의 모든 추천 이미지에 대해 해당 크기가 설정된 상태로 유지됩니다. 선택해야 하는 크기는 WordPress 사이트의 테마와 게시물의 레이아웃에 따라 다릅니다.

추천 이미지는 일반적으로 너비가 500픽셀에서 900픽셀 사이로 높이보다 더 넓습니다. 또한 픽셀화된 이미지가 아닌 고해상도 이미지를 선택하는 것이 가장 좋습니다.

전문가 팁: 게시물이나 페이지가 Facebook이나 Twitter에 공유될 때마다 표시되는 미디어를 제어하려면 Yoast SEO 플러그인을 설치하세요. 제목과 설명을 사용자 정의할 수 있을 뿐만 아니라 각 소셜 채널에 맞는 이미지 크기를 업로드할 수도 있습니다.

WordPress에 업로드한 후 이미지 최적화

이미지를 업로드하기 전에 이미지를 최적화하는 것이 좋습니다. 그러나 그것이 가능하지 않거나 사이트에 이미 있는 이미지를 최적화하려는 경우에는 여전히 그렇게 할 수 있습니다. 라이브 콘텐츠를 최적화하는 데 도움이 되는 몇 가지 방법이 있습니다.

지연 로드 이미지

일반적으로 누군가가 웹 페이지를 방문하면 모든 콘텐츠가 로드되기 시작합니다. 즉, 콘텐츠가 많은 페이지의 경우 모든 항목이 표시되는 데 시간이 걸릴 수 있습니다.

'게으른 로딩'에는 사이트에서 콘텐츠를 로드하는 방식을 조정하는 것이 포함됩니다. 즉시 표시되는 텍스트, 이미지 및 기타 요소를 먼저 로드하는 데 집중하도록 사이트에 지시합니다. 그 후에야 페이지를 아래로 스크롤해야만 액세스할 수 있는 콘텐츠를 로드하기 시작합니다. 이는 사이트 속도를 높이고 방문자의 경험을 개선할 수 있는 좋은 방법입니다.

사이트에 지연 로딩을 추가하는 가장 쉬운 방법은 지연 로드와 같은 플러그인을 사용하는 것입니다.

이것은 한 번에 사이트의 웹 서버로 전송되는 요청의 양을 줄이는 데 도움이 되는 WP Rocket의 도구입니다. 실제 비디오가 필요할 때만 로드되도록 YouTube 비디오를 자리 표시자 이미지로 대체하기도 합니다.

캐시 이미지

사이트 속도를 향상시키는 또 다른 방법은 '캐싱'을 이용하는 것입니다. 여기에는 사이트의 일부 데이터를 방문자가 더 쉽고 빠르게 액세스할 수 있는 위치(종종 방문자가 있는 위치에 가까운 타사 서버 또는 브라우저)에 저장하는 것이 포함됩니다.

코딩, 플러그인 및 기타 도구를 통해 캐싱을 수행하는 방법에는 여러 가지가 있습니다. 여기 WP Engine에서는 기본적으로 모든 사이트에 강력한 캐싱을 구현합니다. 이는 이미지뿐 아니라 모든 콘텐츠가 페이지 속도에 미치는 영향을 줄이는 데 유용합니다.

EXIF 데이터 제거

EXIF 데이터는 이미지 파일의 일부로 저장되며 사진을 찍은 위치와 방법에 대한 정보를 포함합니다. 카메라에 의해 이미지에 자동으로 추가되며 일반적으로 웹 파일에는 필요하지 않습니다.

따라서 이미지에서 이 데이터를 제거하면 그 영향이 크지는 않지만 페이지 속도를 높일 수 있습니다. 불행히도 현재 이 작업을 수행하는 데 도움이 되는 업데이트된 플러그인이 없습니다. 따라서 사이트에서 사진을 많이 사용하고 EXIF ​​데이터가 걱정된다면 개발자에게 도움을 요청해야 합니다.

이미지 URL 리디렉션 방지

마지막으로 페이지 속도를 늦출 수 있는 또 다른 요소는 이미지가 리디렉션을 일으키는 경우입니다. 이는 다른 곳에서 연결할 때 가장 일반적으로 발생합니다.

따라서 외부 소스의 이미지를 사이트에 삽입하지 않아야 합니다. 대신 가능하면 각 이미지나 미디어 조각을 사이트에 직접 저장하고 업로드하세요. 또한 이미지가 별도의 미디어 페이지와 같은 어떤 것으로도 연결되지 않도록 할 수 있습니다.

검색 엔진을 위한 이미지 최적화

이미지 제목 서식 지정은 이미지 최적화의 또 다른 중요한 단계입니다. 이는 이미지 파일 이름이 내용과 관련이 있음을 의미합니다. 이렇게 하면 검색 엔진을 통해 관련 이미지 검색 결과에 표시될 가능성이 높아집니다.

이렇게 하면 사이트의 이미지가 Google 이미지 검색에 더 자주 나열되어 브랜드의 가시성과 접근성은 물론 사이트 트래픽이 증가합니다. 이미지 최적화는 시간이 거의 걸리지 않으며 사이트 트래픽에 큰 차이를 만들 수 있습니다.

다음은 이미지 순위를 높이는 데 도움이 되는 몇 가지 추가 팁입니다.

대체 텍스트

'대체 텍스트' 또는 '대체 태그'라고도 하는 대체 텍스트는 HTML에서 이미지에 추가되는 속성입니다. 대체 텍스트는 이미지에 포함된 내용과 용도를 설명하여 검색 엔진이 이미지의 내용을 이해하는 데 도움이 됩니다.

Google은 이미지가 무엇인지 판단하기 위해 대체 텍스트에 의존합니다. '보는' 것은 HTML 태그에 있는 내용이기 때문입니다. 이미지에 대해 강력하고 설명적인 대체 텍스트를 사용하면 검색 결과에 사이트가 적절하게 나열될 가능성이 높아집니다.

WordPress에서는 두 가지 방법으로 이미지에 대체 텍스트를 추가할 수 있습니다. 먼저 이미지를 클릭하고 화면 오른쪽의 이미지 설정 옵션을 사용하여 게시물에 배치된 이미지에 추가할 수 있습니다.

또는 미디어 > 라이브러리를 방문하고 원하는 이미지를 선택하여 이미지에 대체 텍스트를 추가할 수도 있습니다. 그런 다음 해당 이미지의 대체 텍스트 필드에 대체 텍스트를 추가하기만 하면 됩니다.

제목 태그

제목 태그는 alt 태그와 유사하지만 검색 엔진 봇이 아닌 인간 독자를 위한 것입니다. 좋은 제목 태그 최적화는 시각 장애가 있는 사용자가 웹 사이트에 액세스하는 데 도움이 될 수 있습니다.

XML 이미지 사이트맵 만들기

Google에서 내 이미지를 알리는 또 다른 방법은 사이트맵을 만들어 제출하는 것입니다. 검색 엔진에서 크롤링할 수 없는 이미지에 적합한 옵션입니다.

예를 들어 JavaScript로 로드된 이미지에 대해 이야기하고 있습니다. 사이트맵은 검색 엔진에 사이트에서 사용할 수 있는 이미지에 대한 자세한 정보를 제공하므로 검색 엔진에서 콘텐츠를 보다 정확하게 이해하고 색인을 생성할 수 있습니다.

WordPress에서는 다음 플러그인을 사용하여 사이트맵을 만들 수 있습니다.

• Google XML 사이트맵
• 요스트 SEO
• 올인원 SEO 팩
• 우딘라 All Image Sitemap

비 WordPress 웹 사이트의 경우 Screaming Frog, Dynomapper 등을 포함하여 사이트 맵을 만드는 데 도움이 되는 도구도 있습니다. 사이트맵을 만든 후에는 Google의 웹마스터 도구를 통해 사이트맵을 제출할 수 있습니다.

이미지 배치 및 캡션

마지막으로 블로그 게시물이나 웹 페이지 내에서 시각 자료의 배치를 살펴보겠습니다. 게시물 내에서 이미지를 넣는 위치는 Google에서의 순위에 상당한 영향을 미칠 수 있습니다.

예를 들어 이미지를 키워드 문구에 더 가깝게 배치하면 순위가 더 높아질 수 있습니다. 또한 이미지에 키워드가 풍부한 캡션을 추가하면 검색 텍스트로 간주되어 더 나은 이미지 SEO에 도움이 될 수 있습니다.

WP 엔진으로 WordPress 웹사이트 최적화

이미지 최적화는 웹사이트 개선과 관련하여 많은 부분을 다룹니다. 최적화는 사용자 경험을 향상하고 로딩 시간을 5초 미만으로 유지하는 데 도움이 될 수 있습니다. 여기 WP Engine에서는 이미지 최적화가 귀하의 웹사이트에 가져다주는 가치를 이해합니다. 이것이 우리가 전문적으로 관리되는 WordPress 호스팅 환경을 제공하는 이유입니다. 즉, 전문적인 지원과 포괄적인 최적화 도구 및 리소스를 간편하게 이용할 수 있습니다!