웹용 이미지 최적화: 2022 SEO 및 사이트 속도 기술

원래 2020년 8월에 출판되었으며 2022년 10월에 포괄적으로 업데이트되었습니다.

SEO, 페이지 속도 및 사용자 경험은 모두 이미지 최적화 기술을 적용하면 엄청난 이점을 얻을 수 있습니다.

그리고 이 가이드에서는 웹용으로 이미지를 최적화하는 방법을 정확히 배울 것입니다. 실제 사례와 함께 단계별로.

이제 수많은 이미지 최적화 기술이 있습니다. 그렇기 때문에 이 가이드는 2개의 섹션으로 나뉩니다.

• SEO 및 접근성 을 위한 이미지 최적화:

이 섹션에는 좋은 대체 텍스트 작성 및 구조화된 데이터 사용과 같은 입증된 SEO 팁이 포함되어 있습니다. 대부분의 도움말은 Google에서 직접 제공하므로 너무 많은 정보를 기대하지 마세요.

• 웹사이트 속도 및 사용자 경험 을 위한 이미지 최적화:

두 번째 섹션에서는 올바른 이미지 유형과 압축 수준을 선택하고, 반응형 이미지를 구현하고, 스톡 사진을 언제 사용할지 결정하는 데 도움이 됩니다.

이를 염두에 두고 시작하겠습니다.

이미지 최적화 기술: SEO 및 접근성

명백한 것을 제거합시다.

최적화되지 않은 이미지는 유기적 순위에 영향을 미칩니다. 기간.

Google은 이미지 최적화가 얼마나 중요한지 거듭 강조했습니다. 사실, SEO와 관련하여 Google이 가장 공개한 주제 중 하나입니다.

사이트에서 NitroPack의 강력한 이미지 최적화 테스트

현재 이미지는 Google 검색과 Google 이미지에 모두 표시됩니다.

예를 들어, 경쟁이 치열한 키워드인 "볼로네제 레시피"에 대한 SERP는 다음과 같습니다.

(점심시간 직전에 이 글을 읽고 계시다면 죄송합니다)

Google 이미지에서 동일한 키워드를 검색하면 동일한 사진을 찾을 수 있습니다.

이 예는 SEO를 위한 이미지 최적화의 힘을 완벽하게 보여줍니다.

단 하나의 이미지 로 BBC의 웹사이트는 두 개의 방대한 트래픽 소스 를 활용합니다.

이것이 바로 우리가 이러한 SEO 및 접근성 기술로 하려고 하는 것입니다.

우리가 거기에 어떻게 갈 수 있는지 봅시다.

이미지 파일 이름 바꾸기

기본적으로 대부분의 이미지 파일 이름은 "IMG_010204"와 같습니다.

이것은 Google을 포함한 누구에게도 특히 도움이 되지 않습니다.

Google이 각 이미지가 나타내는 내용을 이해하고 있는지 확인하고 싶습니다. 그렇기 때문에 이미지 파일에 설명이 포함된 이름을 지정하면 쉽게 승리할 수 있습니다.

예를 들어, 이것은 위에서 스파게티 사진의 파일 이름입니다.

(진심으로, 배고프면 한 입 드십시오. 전체 가이드에서이 이미지에 대해 이야기 할 것입니다.)

보시다시피 이름은 화려하지 않지만 작업을 완료합니다.

그리고 이것이 파일 이름의 가장 좋은 점입니다.

너무 상세할 필요는 없습니다 . 그것이 alt description의 역할입니다.

명확한 파일 이름을 작성하는 것 외에도 키워드 스터핑을 피하고 싶습니다. 불필요한 키워드를 추가하면 패널티를 받을 수 있습니다.

예를 들어 사진의 파일 이름이 "amazing-spaghetti-fettuccine-pasta-dish-recipe-cook.jpg" 인 경우 키워드 스터핑 패널티의 주요 후보가 됩니다.

요컨대, 파일 이름을 단순하고 설명적으로 유지하십시오 . 로켓 과학이 아닙니다.

설명 대체 텍스트 사용

대체 텍스트는 이미지의 설명(또는 이에 상응하는 텍스트)입니다.

이를 추가하는 것은 Google과 스크린 리더를 사용하는 사람들에게 매우 중요합니다.

모든 이미지에 좋은 대체 텍스트를 작성하는 것은 매우 중요합니다. 또한 매우 쉽습니다.

다음과 같이 이미지 태그에 alt 속성만 추가하면 됩니다.

이미지에 렌더링 문제가 있는 경우 브라우저는 대체 텍스트를 표시합니다. 그렇게 하면 방문자는 그림이 나타나지 않더라도 여전히 이해할 수 있습니다.

그렇다면 좋은 대체 텍스트를 작성하는 방법은 무엇입니까?

첫째, 파일 이름보다 대체 텍스트를 더 자세히 설명 해야 합니다.

레시피 이미지로 돌아가 보겠습니다.

이것은 훌륭한 대체 텍스트의 예입니다. 불필요한 연결이나 키워드 없이 설명적이고 상세합니다.

이미지를 보지 않고도 누구나 이미지를 시각화할 수 있습니다.

따라서 설명하는 것이 최우선 순위입니다.

키워드 스터핑을 피하는 것도 중요합니다. 이 점을 아무리 강조해도 지나치지 않습니다. 대체 텍스트로 인해 벌점을 받는 것은 매우 쉽습니다.

또한 “이것은… 물론 사진입니다. 대체 텍스트가 있는 이유는 무엇입니까?

요약:

• 이미지를 자세히 설명하십시오.

• 키워드 스터핑을 피하십시오.

• "이것은…

그렇다면 아래 이미지에 대한 대체 설명을 어떻게 작성하시겠습니까?

스톡 사진 출처 - https://unsplash.com/photos/eDXRq-2LfNM

좋은 버전은 "해가 질 때 나무 근처에 주차된 블랙 모던 포드 머스탱"입니다.

Ahrefs 및 Screaming Frog와 같은 도구를 사용하여 웹사이트의 모든 이미지에서 대체 텍스트를 확인할 수 있습니다. 손으로 하는 것보다 훨씬 쉽습니다.

Alt Text Tester Chrome 확장 프로그램도 이에 적합합니다.

이미지 위에 마우스를 올려 놓으면 대체 텍스트를 확인할 수 있습니다. 두 번 탭하여 복사할 수도 있습니다.

이미지에 중요한 텍스트를 넣지 마십시오

이것은 상식과 같은 기술이 아닙니다.

그러나 사람들은 여전히 ​​​​항상 잘못 알고 있습니다.

그래서 분명히 말씀드리겠습니다.

키워드의 순위를 매기거나 중요한 메시지를 전달하려면 이미지 안에 넣지 말고 텍스트로 적어 두십시오.

이 예를 확인하십시오.

스톡 사진 출처 - https://unsplash.com/photos/l8p1aWZqHvE

얼핏 보면 아무 문제가 없다고 생각할 수 있습니다. 실제로 사람들은 텍스트를 스크롤하는 대신 이 중요한 정보를 즉시 볼 수 있습니다.

그러나 이러한 정보 전달 방식은 SEO를 망칠 수 있습니다.

이유는 다음과 같습니다.

Google은 이 텍스트를 보고 해석할 수 없습니다. HTML에 기록하지 않은 경우 중요한 키워드에 대한 순위를 매길 수 없습니다.

스크린 리더를 사용하는 사람들도 이 모든 것을 놓칠 것입니다.

게다가 방문자는 텍스트를 강조 표시하거나 복사할 수 없으므로 매우 성가실 수 있습니다.

어떤 이유로 이미지가 렌더링되지 않거나 느리게 로드되는 경우 메시지를 전달할 수 있는 유일한 기회를 놓친 것입니다.

따라서 단순하게 유지하십시오. SEO 키워드와 같은 중요한 텍스트를 이미지에만 배치하지 마십시오. HTML에 적어 두십시오.

제품, 비디오 및 레시피에 대한 구조화된 데이터 사용

구조화된 데이터는 검색 엔진이 해석하기 쉽도록 특정 형식으로 작성된 코드입니다.

여기에 있는 다른 많은 기술과 마찬가지로 구조화된 데이터는 Google의 삶을 더 쉽게 만듭니다. 그것을 사용하면 가격, 수량 또는 브랜드와 같은 검색 엔진 세부 정보를 숟가락으로 제공할 수 있습니다.

예를 들어 보겠습니다.

이 이미지에서 Google이 작은 정보를 제공하는 방법을 확인하세요.

구조화된 데이터가 이를 가능하게 합니다.

페이지 코드에서 다음과 같이 표시됩니다.

또 다른 예는 이전의 레시피 페이지입니다.

방문자가 링크를 클릭하기도 전에 유용한 정보가 많이 있습니다.

그리고 구조화된 데이터를 다른 SEO 기술과 결합하여 이 레시피는 SERP에서 상위 2위를 차지합니다.

모든 페이지에서 구조화된 데이터를 사용할 수 있습니다. 항상 필수는 아니지만 제품 페이지, 레시피 및 비디오 가 없으면 순위가 매겨질 가능성이 적습니다.

구조화된 데이터를 온라인으로 구현하기 위한 수많은 팁과 요령을 찾을 수 있습니다.

그러나 하루가 끝나면 아무도 Google보다 더 나은 방법을 알려줄 수 없습니다.

따라서 다음에 대한 Google의 공식 가이드라인을 항상 따르세요.

• 제품 페이지에 마크업 추가 ;

• 비디오 페이지에 마크업 추가 ;

• 레시피에 마크업 추가

이미지 사이트맵 만들기

이미지 사이트맵은 필수는 아니지만 확실히 더 큰 웹사이트에 도움이 될 수 있습니다.

이러한 사이트맵은 Google이 그렇지 않으면 놓쳤을 수 있는 이미지를 찾는 데 도움이 됩니다.

예를 들어 웹사이트에서 JavaScript로 일부 이미지에 도달하는 경우 Google은 이미지 사이트맵 없이 해당 이미지를 찾는 데 문제가 있을 수 있습니다.

다시 말하지만, 이미지 사이트맵을 만들기 위한 Google의 공식 가이드라인을 따르세요.

또한 WordPress 사용자라면 몇 가지 이미지 사이트맵 플러그인이 있습니다. 테스트해 보세요. 직접 만드는 것보다 훨씬 쉽습니다.

이것으로 SEO 및 접근성 이미지 최적화 팁을 마쳤습니다.

속도와 사용자 경험으로 넘어갑시다.

웹용 이미지 최적화 기술: 웹사이트 속도 및 사용자 경험

최적화되지 않은 이미지가 포함된 빠른 웹사이트는 있을 수 없습니다.

그리고 빠른 웹사이트는 방문자를 행복하게 유지하는 데 매우 중요합니다.

다음은 페이지 속도의 힘에 대한 몇 가지 예입니다.

• 2012년 Walmart는 사이트의 로드 시간을 1초로 줄이고 전환율이 2% 증가했습니다.

• 2017년 Zitmaxx Wonnen은 로드 시간을 3초로 단축하고 모바일 전환이 50% 증가하고 모바일 수익이 98.7% 증가했습니다.

• 마지막으로 2020년 NDTV는 LCP와 CLS를 개선하여 이탈률을 50% 낮췄습니다.

계속 진행할 수 있지만 아이디어는 알 수 있습니다. 더 많은 증거가 필요하면 18개의 웹 성능 사례 연구 모음을 확인하십시오.

물론 속도 최적화는 이미지 최적화 그 이상입니다.

그러나 여기에 키커가 있습니다.

이미지는 종종 웹 사이트 로드 시간이 느린 가장 큰 이유입니다. 실제로 평균 페이지의 모든 바이트 중 약 50%가 이미지 바이트입니다. 그리고 2011년부터 이미지 바이트는 중앙값 데스크톱 페이지에서 거의 5배, 중앙값 모바일 페이지에서 7배 이상 증가했습니다!

출처 - HTTP 아카이브의 이미지 상태

이것이 이미지 최적화가 사이트 속도를 크게 향상시키는 이유입니다.

속도와 사용자 경험을 위해 이미지를 최적화 하는 것은 이미지 크기, 품질 및 수량 간의 균형을 찾는 것입니다.

NitroPack으로 웹사이트 속도 급증 - 코딩 기술 필요 없음

이를 염두에 두고 시작하겠습니다.

올바른 이미지 형식 선택

올바른 이미지 형식을 선택하기 위한 빠른 체크리스트는 다음과 같습니다.

• 성능을 위해 품질을 희생할 수 있는 경우 JPEG 를 사용하십시오. Optimizilla와 같은 무료 이미지 최적화 도구는 다양한 품질/크기 비율을 테스트하기 위해 압축 수준을 조정하는 데 도움이 될 수 있습니다.

• 세부 사항을 유지하고 가능한 최고 품질의 이미지를 제공해야 하는 경우 PNG 를 사용하십시오. 그러나 과도하게 사용하지 않도록 주의하십시오. 품질을 높일수록 파일이 커집니다.

• 로고, 기하학적 모양 및 미술의 경우 SVG 를 사용하십시오. 일반적으로 가능하면 벡터 이미지를 사용하십시오. 모든 장치에서 멋지게 보이며 확장하거나 축소해도 품질이 떨어지지 않습니다.

• 마지막으로 WebP와 같은 차세대 이미지 형식은 많은 품질을 희생하지 않고도 성능을 더욱 향상시킬 수 있습니다. Google에 따르면 WebP 이미지는 비슷한 품질의 PNG보다 26% 작고 JPEG보다 25-34% 작습니다. 유일한 단점은 차세대 형식(WebP 포함)이 브라우저를 100% 지원하지 않는다는 것입니다. 이렇게 하면 이전 브라우저에 대한 백업을 제자리에 유지해야 하므로 서비스를 제공하기가 더 까다로워집니다.

이것이 파일 형식을 선택하는 데 필요한 전부입니다. 이 주제에 대해 더 자세히 알아보려면 래스터와 벡터 이미지에 대한 Shutterstock의 기사를 확인하세요.

이미지 파일 크기 줄이기

이미지 파일 크기를 압축하는 방법에는 손실 압축과 무손실 압축의 두 가지가 있습니다.

손실 이미지 압축은 일부 픽셀 데이터를 제거합니다. 무손실 압축은 그렇지 않습니다.

사실, 우리가 방금 이야기한 이미지 형식(JPEG, PNG, WebP 등)의 차이점은 이 두 가지 압축 유형을 적용하는 방법입니다.

JPEG는 손실 이미지 유형의 전형적인 예입니다. PNG는 무손실 유형입니다. 그리고 WebP는 손실 압축과 무손실 압축을 모두 사용합니다.

이것은 매우 복잡한 주제로 여기에서 자세히 다룰 수 없습니다. 관심이 있는 경우 이 이미지 압축 심층 분석을 확인하십시오.

현재로서는 "좋음" 또는 "나쁨" 압축 수준이 없다는 것을 아는 것이 중요합니다. 그것은 모두 귀하의 웹 사이트에 달려 있습니다.

내가 의미하는 바는 다음과 같습니다.

블로그, 뉴스 웹사이트 또는 초고화질 이미지가 필요하지 않은 기타 사이트가 있는 경우 손실 압축을 높일 수 있습니다.

데이터를 제거하기 때문에 이 압축은 파일 크기를 크게 줄입니다 . 물론 이것은 이미지 품질을 희생시킵니다.

반면에 사진이나 패션 웹사이트가 있는 경우 군중에서 눈에 띄는 놀라운 이미지가 필요할 것입니다. 이 경우 무손실 압축이 최선의 방법입니다.

파일 크기가 크게 줄어들지는 않지만 놀라운 품질 을 유지할 수 있습니다.

사용할 수 있는 수많은 이미지 압축 도구가 있습니다.

• 보다 기술적인 사람들에게는 Guetzli와 Imagemin이 멋진 일을 할 수 있습니다.

• Compress JPEG, TinyJPG 및 Optimizilla와 같은 무료 온라인 도구도 좋은 결과를 얻을 수 있습니다.

• NitroPack에서는 이미지 최적화 기능의 일부로 조정 가능한 이미지 품질도 제공합니다.
  

어려운 부분은 도구를 찾는 것이 아닙니다. 웹사이트 성능과 이미지 품질 사이의 놀라운 균형입니다.

그리고 테스트 외에 다른 방법이 없습니다.

최근에야 이미지 파일 크기를 최대 4배까지 줄이는 새롭고 정교한 기능인 적응형 이미지 크기 조정을 출시했습니다. 이 유형의 최적화는 HTML의 이미지에 대한 마크업 요소로 식별되는 모든 이미지를 대상으로 합니다(갤러리, 캐러셀, 슬라이더, 스크롤 없이 볼 수 있는 이미지 위 및 아래 포함).

작동 방식은 모든 이미지가 데스크톱, 모바일 및 태블릿 장치에서 표시되는 컨테이너의 크기와 일치하도록 만드는 것입니다. 예, 반복적인 대량 이미지 크기 조정에서 벗어날 수 있습니다.

CDN(콘텐츠 전송 네트워크) 사용

CDN 설정은 일반적으로 사이트 속도를 위해 할 수 있는 가장 좋은 작업 중 하나입니다.

이는 이미지 최적화에도 적용됩니다.

CDN에 익숙하지 않은 경우 초보자 CDN 가이드를 확인하세요. 지금은 빠른 TL;DR이 있습니다.

귀하의 웹사이트가 미국의 서버에서 호스팅된다고 가정해 보겠습니다. 유럽의 사용자가 방문하면 데이터는 미국에서 유럽으로 이동해야 합니다.

거리가 너무 커서 지연이 불가피합니다.

CDN은 이 문제를 해결합니다.

방법은 다음과 같습니다.

CDN은 다양한 지리적 위치 에 웹사이트의 캐시된 버전을 저장합니다.

따라서 유럽에서 방문자가 귀하의 웹 사이트를 방문할 때 데이터가 미국에서 끝까지 이동하지 않습니다. 그것은 그들과 가까운 위치에서 올 것입니다.

남미, 아프리카, 아시아 또는 CDN 제공업체가 서버가 있는 다른 곳의 방문자도 마찬가지입니다.

이것이 바로 CDN의 힘입니다. 방문자와 웹사이트 사이의 거리를 단축시킵니다 .

웹사이트의 다른 부분과 마찬가지로 이미지도 방문자에게 더 빨리 도달합니다.

이미지 CDN을 사용할 수도 있습니다. 이는 이미지 전달을 위해 특별히 설계된 CDN입니다. 몇 가지 좋은 이점이 있지만 필수는 아닙니다. 대부분의 웹사이트에서 일반 CDN이 가능합니다.

반응형 이미지 제공

사람들이 저지르는 일반적인 실수는 하나의 큰 이미지만 업로드하고 모든 뷰포트에 제공하는 것입니다.

처음에는 좋은 생각처럼 들립니다. 큰 이미지는 축소해도 품질이 떨어지지 않습니다. 따라서 모든 장치에서 잘 보이도록 하려면 가지고 있는 가장 큰 버전을 업로드하면 됩니다. 짜잔!

그것이 그렇게 간단하지 않다는 것을 제외하고.

이미지 너비가 700px이면 300px 디스플레이에서 잘 보일 수 있습니다. 그러나 모든 700px 는 여전히 처리되어야 합니다. 엄청난 대역폭 낭비입니다.

그렇다면 대역폭을 낭비하지 않고 고품질 이미지를 유지하려면 어떻게 해야 할까요?

srcset 속성을 사용하십시오.

이 속성은 브라우저가 다른 이미지 버전을 가리키도록 합니다. 거기에서 브라우저는 장치에 따라 어떤 것을 제공할지 결정합니다.

간단한 예를 살펴보겠습니다.

다음은 이미지를 로드하기 위한 표준 HTML 코드입니다.

이 코드는 이미지를 찾을 위치를 브라우저에 알려주는 src 속성을 사용합니다.

믹스에 srcset 을 추가해 보겠습니다.

이제 소형, 중형 및 대형의 3가지 다른 버전에 대한 링크를 제공하고 있습니다. 거기에서 브라우저는 뷰포트에 따라 가장 좋은 것을 선택합니다 .

이것이 srcset 의 힘입니다. 이미지는 항상 멋지게 보이며 초기 설정 후에는 아무 것도 할 필요가 없습니다. 브라우저는 모든 무거운 작업을 수행합니다.

Airbnb의 웹사이트는 다음과 같은 접근 방식을 사용합니다.

몇 가지 테스트를 실행하여 다양한 장치에서 이미지가 어떻게 보이는지 확인하기만 하면 됩니다. 이것은 제공할 이미지 크기를 결정하는 데 도움이 됩니다.

그렇게 하려면 Chrome의 DevTools를 사용하세요.

페이지를 열고 마우스 오른쪽 버튼을 클릭한 다음 "검사"를 선택합니다. "요소" 탭에는 이미지에 대한 정보가 있습니다.

거기에서 다른 장치를 선택하고 뷰포트를 축소 또는 확장하고 모든 종류의 테스트를 수행할 수 있습니다.

마지막 참고 사항: WordPress(버전 4.4 이후)는 자동으로 다른 버전의 이미지를 생성합니다. 또한 srcset 속성을 추가합니다.

WordPress 사용자인 경우 올바른 이미지 크기만 제공하면 됩니다.

불필요한 이미지 제거

이것은 가장 간단하고 가장 간과되는 이미지 최적화 팁입니다.

이미지가 사용자 경험에 추가되지 않거나 귀하의 요점을 설명하는 데 도움이 되지 않으면 이미지가 없어야 합니다 . 평범하고 간단합니다.

수행할 수 있는 작업은 다음과 같습니다.

• 가장 중요한 페이지를 열고 그들이 달성하려는 것이 무엇인지 생각해 보십시오.

• 그것들을 살펴보면 어떤 이미지가 있어야 하고 어떤 이미지가 없어야 하는지 명확해질 것입니다. 그러나 아직 삭제를 시작하지 마십시오.

• 먼저 추적 이 설정되어 있는지 확인합니다. 페이지뷰, 이탈률, 전환, 페이지에 머문 시간 등 모든 것이 좋습니다.

• 이 결정은 주관적인 의견이 아니라 데이터를 기반으로 하는 것이 중요합니다. 이 데이터를 저장하면 문제의 이미지를 제거하기 전과 제거한 후의 페이지를 비교할 수 있습니다.

• 몇 주 동안 두 버전을 모두 테스트하고 승자를 선택하십시오.

그리고 실시간으로 두 버전을 비교하고 싶다면 Google Optimize와 같은 도구를 사용할 수 있습니다.

스톡 사진을 남용하지 마십시오

오해하지 마세요 - 저는 다음 사람만큼 무료 물건을 좋아합니다.

그리고 고품질 이미지를 무료로 제공하는 사람들은 엄청난 찬사를 받을 자격이 있습니다.

하지만…

스톡 사진은 남용됩니다. 원본이 아니기 때문에 원본처럼 보이지 않습니다.

예를 들어 팀워크, 협업 또는 이와 유사한 일반적인 주제에 대한 기사에서 다음과 같은 사람들을 얼마나 자주 보았습니까?

스톡 사진 출처 - https://unsplash.com/photos/Oalh2MojUuk

또는 코스 또는 법률 서비스를 판매하는 웹사이트의 이 사진:

스톡 사진 출처 - https://unsplash.com/photos/5fNmWej4tAA

첫 번째 사진에 대한 빠른 역방향 이미지 검색은 약 5800개의 결과를 반환합니다 .

그리고 두 번째는 약 13 500입니다.

네, 슈퍼 오리지널은 아닙니다. 하지만 그럼에도 불구하고 이것이 정말로 그렇게 큰 일입니까?

예, 그렇습니다.

최근 연구에 따르면 스톡 사진은 브랜드 이미지와 SEO 모두에 부정적인 영향을 미칠 수 있습니다. 나는 당신이 그것을 읽을 것을 적극 권장합니다.

시간이 없다면 다음은 스톡 사진의 문제를 완벽하게 설명하는 인용문입니다.

최악의 부분은 그들이 노력의 완전한 부족을 보여줍니다.

이제 모든 사람이 전문적인 사진이나 디자인을 살 수 있는 것은 아니라는 것을 알고 있습니다. 그리고 나는 당신이 사진을 절대 사용해서는 안된다고 말하는 것이 아닙니다. 당신은해야합니다.

하지만 전략적으로 해주세요.

나는 그것에 의해 세 가지를 의미합니다.

• 먼저 사무실에서 일하는 사람들의 이미지가 필요하다면 사무실 사진을 몇 장 찍어 보세요 . 방문자는 진정성을 높이 평가할 것입니다.

• 둘째, 스톡 사진을 사용해야 할 때 조금 더 깊이 파고 들어 많이 이용되지 않은 사진을 찾으십시오. 다음은 방문할 수 있는 24개의 고유한 스톡 사진 웹사이트 목록입니다.

• 셋째, 홈페이지 나 기타 중요한 페이지에 스톡 사진을 사용하지 마십시오. 프리랜서 사진작가/디자이너에게 연락하여 몇 가지 사용자 정의 이미지를 얻으십시오. 그들은 그렇게 비싸지 않습니다.

보너스 팁: 지연 로드(지연) 오프스크린 이미지

이 마지막 팁은 이미지 최적화에 관한 것이 아니지만 초기 로드 시간에 막대한 영향을 미칠 수 있습니다.

사실, 지연 로딩 이미지는 이미지 최적화보다 로딩 시간을 훨씬 더 빠르게 할 수 있습니다!

작동 방식은 다음과 같습니다.

오프스크린 이미지를 지연 로드(또는 지연)한다는 것은 방문자가 현재 보고 있는 이미지만 로드 하는 일련의 기술을 사용하는 것을 의미합니다.

오프스크린 이미지는 사용자가 탐색하기 전에는 표시되지 않습니다. 이를 연기하면 더 중요한 다른 리소스 다음에 로드됩니다.

또한 브라우저가 한 번에 더 적은 리소스를 처리해야 하므로 초기 페이지 로드 시간이 훨씬 빠릅니다.

다음은 지연 로딩이 작동하는 방법의 예입니다.

보시다시피 대부분의 스크롤 없이 볼 수 있는 이미지는 사용자가 페이지를 방문할 때가 아니라 페이지를 아래로 스크롤할 때 로드됩니다.

이제 이 기술을 구현하는 다양한 방법이 있습니다.

• 값이 lazy 인 loading 속성을 사용하여 네이티브 지연 로딩을 시도할 수 있습니다. 이 방법은 매우 쉽지만 브라우저 지원이 부족합니다.

• Intersection Observer를 사용하여 지연 로드해야 하는 이미지를 등록할 수 있습니다. 이 방법을 사용하려면 약간의 JavaScript를 작성해야 합니다. 여기에서 Intersection Observer가 작동하는 훌륭한 예를 찾을 수 있습니다.

• NitroPack을 사용하여 프로세스를 자동화할 수도 있습니다. 우리 서비스는 모든 이미지(배경 이미지 포함)를 지연 로드합니다.

이 주제에 대해 더 자세히 알아보려면 오프스크린 이미지 연기에 대한 기사를 확인하세요.

WordPress 플러그인 및 서비스로 이미지 최적화

일반적으로 여기에서 설명하는 대부분의 최적화는 특히 WordPress 사이트에서 손으로 수행되지 않습니다.

WordPress 사이트가 있는 경우 이미지 최적화 플러그인을 사용할 가능성이 있습니다(아직 사용하지 않는 경우). 옵션이 너무 많기 때문에 여기에 이미지 최적화 플러그인을 나열하지 않겠습니다.

대신 이미지 최적화 플러그인을 선택할 때 고려해야 할 한 가지 중요한 요소에만 집중하겠습니다.

이미지 최적화는 서버가 아닌 클라우드에서 수행해야 합니다 . 그렇게 하면 인프라에서 압축 및 크기 조정과 같은 과중한 작업을 처리하지 않습니다.

예를 들어 CMS와 동일한 서버에서 실행되는 이미지 최적화 플러그인은 이미지 크기를 조정하고 압축하는 데 추가 CPU 시간이 필요할 수 있습니다. 반면에 NitroPack과 같은 클라우드 기반 서비스는 클라우드에서 이미지를 최적화하고 CDN을 통해 이미지를 제공하여 무거운 작업을 대신 처리합니다.

각 플러그인이 서버에 추가하는 오버헤드를 항상 염두에 두십시오. 일부 무거운 플러그인은 실제로 실행해야 하는 코드의 양을 늘려 웹사이트를 느리게 만들 수 있습니다.

이미지 최적화 및 Google의 핵심 Web Vitals

SEO에 관심이 있다면 Core Web Vitals에도 관심이 있을 것입니다.

세 가지 핵심 웹 바이탈 중 두 가지인 LCP(Large Contentful Paint) 및 CLS(Cumulative Layout Shift)는 이미지 최적화의 영향을 크게 받을 수 있습니다.

이유는 다음과 같습니다.

• LCP는 스크롤 없이 볼 수 있는 가장 큰 요소가 페이지에 표시되는 데 걸리는 시간을 측정합니다. 그 요소는 일반적으로 이미지입니다. 이미지가 최적화되어 신속하게 전달되지 않으면 LCP가 타격을 받아 Core Web Vitals 성능이 저하될 수 있습니다.

• CLS는 페이지의 시각적 안정성을 측정합니다. 이미지에 치수( 너비 및 높이 속성)가 없으면 브라우저는 이미지에 할당할 공간을 미리 알지 못합니다. 그 결과 이미지가 화면에 나타날 때 예상치 못한 레이아웃 이동이 발생하여 CLS 점수가 악화됩니다.

이 기사에서 논의된 거의 모든 기술은 어떤 방식으로든 LCP 또는 CLS를 개선할 수 있습니다. 일부 웹 사이트의 경우 이미지 최적화만으로도 핵심 핵심 성능 평가의 합격과 불합격을 결정할 수 있습니다.

그러나 지연 로딩과 관련하여 주의할 점은 다음과 같습니다.

충분한 공간을 확보하지 않고 이미지를 게으르게 로드하는 것은 재앙의 지름길입니다.

지연된 이미지는 사용자가 스크롤할 때 나타납니다. 사전에 충분한 공간이 할당되지 않은 경우(예: 자리 표시자를 통해) 이미지가 화면에 나타날 때 레이아웃이 크게 변경됩니다. 다시 말하지만, 이것은 CLS 점수와 방문자의 경험을 망칠 수 있습니다.

이미지를 지연 로드하고 이미지를 위한 공간을 예약하는 다양한 방법이 있습니다. 자세한 내용은 오프스크린 이미지 연기에 대한 기사를 확인하세요.

마지막 생각들

이제 이미지 최적화가 무엇을 할 수 있는지 이해했으므로 세 가지 중요한 사항을 다시 말씀드리겠습니다.

• 첫째, SEO와 관련하여 항상 이미지 작업에 대한 Google의 모범 사례를 따르십시오. 여기에 전문가가 필요하지 않습니다. Google은 모든 정보를 무료로 제공합니다.

• 둘째, 수익에 도움이 되지 않는 이미지를 삭제하는 것을 두려워하지 마십시오. 이미지를 제거하는 작업은 항상 너무 쉽다는 것을 알고 있습니다. 하지만 그렇습니다.

• 마지막으로 이미지 최적화의 성능 측면을 자동화하는 도구를 사용하는 것이 좋습니다. 작은 웹사이트에서는 모든 작업을 손으로 하는 것이 좋을 수 있지만 이미지를 더 많이 추가할수록 크기 조정, 압축 및 이미지 유형 변경에 많은 시간이 소요됩니다.

예를 들어 NitroPack이 할 수 있는 일은 다음과 같습니다.

• 이미지 압축. 기본적으로 NitroPack은 손실 압축을 사용하여 이미지 파일 크기를 줄입니다. 고급 설정에서 이미지 품질을 수동으로 조정할 수도 있습니다.

• WebP 변환. WebP 지원을 제공하는 모든 브라우저의 경우 NitroPack은 이미지의 WebP 버전을 제공합니다.

• 선제적인 이미지 크기 조정. NitroPack은 너비 및 높이 속성을 추가하지 않고 누락되는 문제를 해결합니다. 이렇게 하면 렌더링 속도가 빨라지고 레이아웃 이동이 줄어듭니다.

• 적응형 이미지 크기 조정 (시험판에서 사용 가능). 이 기능은 이미지가 일치하는지 확인하고 컨테이너를 오버플로하지 않습니다.

• NitroPack은 또한 내장 CDN과 함께 제공되며 모든 이미지, 비디오 및 iFrame을 자동으로 지연 로드합니다.

마지막으로 NitroPack에는 빠른 웹사이트에 필요한 모든 것이 있습니다.

이 모든 기능을 테스트하려면 지금 무료 NitroPack 플랜에 가입하십시오(신용카드 필요 없음).