웹사이트의 페이지 속도와 SEO를 개선하기 위해 이미지를 최적화하는 방법

SaaS SEO 전략에 대한 라이브 및 현재 초안 웹 페이지를 조사할 때 본 한 가지 일반적인 실수는 이미지가 일반적으로 웹 사이트 상태 및 속도에 대해 제대로 최적화되지 않았다는 것입니다. 우리 모두는 "그림은 천 마디 말의 가치가 있다"는 말을 들어봤을 것입니다. 진부한 표현일지라도 그것은 사실이고 어쩌면 더 가치가 있을지도 모릅니다.

이미지는 우리의 주의를 사로잡고 우리가 보고 있는 것과 관련되도록 도와줍니다. 그들은 이야기를 만들고 단지 큰 본문보다 훨씬 더 오래 지속되는 인상을 주는 경향이 있습니다. 많은 사람들이 Unsplash와 같은 저작권이 없는 스톡 사진 사이트에서 스톡 이미지를 얻는 것을 좋아합니다.

Google은 빠른 페이지를 매우 우선시합니다. 이미지 최적화에 필요한 단계를 무시함으로써 힘든 싸움을 준비하는 것입니다. 페이지에 추가되는 이미지의 수는 로드 속도 시간에 직접적인 영향을 미칩니다. 페이지에 이미지가 많을수록 로드 속도가 느려집니다. 이 가이드에서는 페이지 속도와 검색 엔진에 맞게 이미지를 최적화할 때 거치는 5단계를 살펴보겠습니다.

이미지 자르기 및 크기 조정

기본적으로 다운로드한 사진은 매우 크고 고품질입니다. 이 이미지의 크기 또는 해상도를 결정하는 것은 이미지가 표시될 최대 크기에 따라 결정됩니다. 사람들은 자신이 고객이나 자신에게까지 감동을 줄 수 있는 최고 품질의 이미지를 가지고 있다고 생각하지만 이러한 부정적인 영향을 인식하지 못합니다. 이미지 크기를 결정할 때 이미지가 표시될 가장 큰 크기를 생각하십시오.

300 x 300픽셀로 표시되는 작은 프로필 이미지나 헤드샷에만 사용하려는 경우 이미지 크기가 6000 x 6000픽셀일 필요는 없습니다. 내 경험에 따르면 페이지에서 가장 큰 이미지는 맨 위에 있는 영웅 이미지입니다. 품질을 유지하면서 유지하기에 안전한 크기는 1920 x 1080 픽셀의 표준 고화질 크기로 만드는 것입니다.

팁과 요령: 블로그나 웹 페이지의 배너 이미지가 원하는 것보다 약간 낮은 품질로 나타나면 투명 오버레이를 적용하는 것이 좋습니다. 이렇게 하면 디자인의 일부인 것처럼 보이고 텍스트를 더 쉽게 읽을 수 있습니다.

아래에서는 Figma를 사용하여 이미지 크기를 조정하고 자릅니다. 드래그 앤 드롭한 다음 원하는 대로 이미지를 변경하기만 하면 되기 때문에 프로세스가 매우 쉽습니다. 다음은 Windows에서 Figma를 사용하여 이미지를 적절하게 편집하는 데 필요한 두 가지 컨트롤입니다.

• Shift + 드래그 - 동일한 비율을 유지하면서 전체 이미지의 크기를 늘리거나 줄입니다.
• Ctrl + 드래그 - 이미지를 늘리지 않고 높이 또는 길이만 변경합니다.

다른 파일 형식으로 내보내기

어떤 유형의 파일 형식을 사용할 것인지 생각하는 것이 중요합니다. 많은 형식이 다른 용도로 사용될 수 있습니다. 각각은 사용자의 관점에 따라 장단점이 있습니다. 다음은 내가 일반적으로 볼 수 있는 가장 일반적인 몇 가지입니다.

• PNG - 작은 세부 사항을 확인해야 하는 그래픽 디자인이나 이미지에 적합합니다. 이 경우 파일 크기가 커집니다.
• JPEG - 사람과 장소의 실제 사진을 촬영할 때 사용합니다. 훨씬 더 많이 압축할 수 있지만 세부 정보가 필요하지 않기 때문에 더 많은 정보를 잃게 됩니다.
• SVG - 품질 저하 없이 확장 및 축소할 수 있는 아이콘 및 로고에 적합합니다. 이것은 생성된 이미지 파일에서만 작동할 수 있습니다.
• WEBP - PNG 및 JPEG를 대체할 수 있는 최신 버전의 이미지입니다. WEBP는 공간에서 25%-40%를 절약할 수 있는 동안 둘 다에 유사한 이미지 품질을 가지고 있습니다. 유일한 단점은 현재 Apple의 Safari 브라우저가 이를 지원하지 않으므로 로드하려면 백업 JPEG 또는 PNG가 필요하다는 것입니다.
• GIF - 루프에서 재생되는 경향이 있는 비디오 또는 애니메이션 클립입니다. 장면을 캡처하거나 제품 인터페이스가 작동하는 방식을 보여주는 데 좋습니다. 이 기사는 사용 방법에 대한 몇 가지 좋은 예를 제공합니다. 애니메이션된 이미지 시퀀스이기 때문에 일반적으로 하나의 단일 이미지에 비해 파일 크기가 더 무거워집니다.

저는 가능한 한 최소한의 데이터가 필요하기 때문에 JPEG를 사용하는 것을 즐깁니다. 하지만 여기서는 스크린샷을 좀 더 명확하게 하기 위해 PNG를 사용하고 있습니다. WEBP와 마찬가지로 더 새로운 형식이 있을 수 있으므로 웹페이지에 대한 가장 빠르고 최상의 답변을 찾기 위해 사용할 수 있는 각 형식을 Google에서 어떻게 보고 순위를 지정하는지 지속적으로 조사하는 것이 모범 사례입니다. 다음은 가장 인기 있는 이미지 유형에 대한 자세한 가이드 링크입니다.

이미지 압축기 사용

다음 단계는 파일 크기를 압축하고 줄여서 가능한 한 작은 파일을 가져오는 것입니다. 이미지 압축기로 이동하여 이미지를 처리하면 이미지를 파일 크기에서 최대 90%까지 줄일 수 있습니다. 제가 즐겨 사용하는 정말 유용한 도구는 압축기입니다. 이 도구를 사용하면 무료 요금제로 하루에 최대 50개의 이미지를 압축할 수 있습니다.

여기에서 내보낸 이미지를 가져와서 이미지 드롭 섹션으로 바로 드래그합니다. 몇 초 후에 새 이미지를 다운로드할 준비가 되며 원래 크기의 10분의 1도 되지 않습니다. 또한 하단의 옵션과 같이 여러 이미지를 불러와서 한꺼번에 다운로드할 수도 있습니다.

이미지를 로드하는 "게으른" 대 "열심한"

이제 이미지가 올바른 형식으로 지정되고 올바른 크기로 압축되었으므로 이제 모든 것이 잘 되었다고 생각할 수 있지만 아직 확인해야 할 몇 가지 사항이 더 있습니다. 많은 템플릿과 웹 사이트에서 이미지 로드 속도는 브라우저의 기본 로드로 설정되어 페이지의 모든 이미지가 동시에 로드될 수 있습니다. 이에 대한 해결책은 이미지를 지연 로드하는 것입니다.

"지연" 로드는 페이지에 표시될 때까지 요소 로드를 연기합니다. 이미지가 두 개 이상인 경우 사이트 성능을 향상시킬 수 있습니다. 이것의 반대는 요소를 즉시 로드하는 "Eager" 로딩입니다. 이미지를 먼저 로드하거나 마지막으로 로드해야 하는 기본 설정이 없기 때문에 일반적으로 기본 웹 설정과 일치합니다.

다음은 HubSpot 블로그 편집기의 예입니다. 삽입된 이미지에 대한 고급 옵션으로 이동한 후 로딩 설정을 지정할 수 있음을 알 수 있습니다. "Lazy"를 선택하고 적용을 누르십시오. 이제 사용자가 이미지에 훨씬 더 가까이 스크롤할 때마다 이미지가 나타나고 귀중한 로딩 시간이 단축됩니다.

대체 텍스트를 추가하는 것을 잊지 마십시오.

마지막으로 방문해야 할 것은 이미지에 대체 텍스트를 포함하는 것입니다. 이것은 페이지 로딩 속도에 영향을 미치지 않을 수 있지만 항상 고려하고 추가하는 것이 중요합니다. 섹션을 비워두면 SERP 순위를 높일 수 있는 많은 기회를 놓치게 됩니다.

주목해야 할 중요한 점은 대체 텍스트가 콘텐츠와 관련된 이미지의 "이유"를 설명한다는 것입니다. Google에서 색인을 생성하고 시각 장애인을 위해 TTS(텍스트 음성 변환)로 소리 내어 읽어줍니다. 무슨 일이 일어나고 있는지 설명하지 않는 단일 키워드를 이미지에 채우는 것은 최선의 접근 방식이 아닐 수 있습니다.

여기에 이미지에 대체 텍스트를 추가했습니다. 나는 SEO 페이지 속도 건강이라는 문구를 기반으로합니다. 키워드만 포함하는 대신 이미지에서 작업이 어떻게 또는 무엇인지 설명합니다. "그래프를 사용하여 SEO 페이지 속도 상태 확인"이라는 문구를 사용하여 자세히 설명하기로 결정했습니다.

이것은 이미지가 Google 인덱싱에 대해 무엇에 관한 것인지에 대해 훨씬 더 많은 정보를 제공하고 시각 장애인에게 더 큰 접근성을 부여합니다.

이미지 생성/최적화 단계를 검토해 보겠습니다.

1. 이미지를 Figma와 같은 이미지 편집기로 드래그하여 자르고 크기를 조정합니다.
2. 적절한 이미지 유형(PNG, JPEG, SVG, WEBP 등)으로 내보냅니다.
3. Compressor 또는 Image Resizer Online과 같은 이미지 압축기 사이트로 가져갑니다.
4. 압축된 이미지를 지연 로딩으로 콘텐츠에 삽입합니다.
5. 페이지의 이미지를 설명하는 대체 텍스트를 추가합니다.
6. 이제 사이트에 대한 완벽한 이미지가 생겼습니다!
7. 성능 향상을 확인하려면 Google Search Console을 확인하세요.

다음 단계를 따르면 SEO에 맞게 이미지를 유지 관리 및 최적화하고 페이지 속도를 가속화하여 환상적인 사용자 경험을 만들 수 있습니다!