최고의 웹 성능을 위해 이미지를 최적화하는 방법

느린 웹 사이트는 검색 엔진 순위에 해를 입히고 방문자를 멀리할 수 있습니다. 또한 대용량 이미지 파일은 로딩 시간이 느려지는 주요 원인 중 하나입니다. 다행히 웹 성능을 위해 이미지를 최적화할 수 있는 몇 가지 방법이 있습니다.

이 게시물에서는 이미지가 사이트 성능에 미치는 영향에 대해 설명합니다. 그런 다음 사진을 효과적으로 최적화하는 몇 가지 다른 방법을 공유합니다.

시작하자!

이미지는 웹 성능에 얼마나 영향을 미칩니까?

이미지는 사이트의 전반적인 성능에 큰 영향을 줄 수 있습니다. 최상의 UX(사용자 경험)를 제공하려면 콘텐츠가 Google의 핵심 성능 평가에 최적화되어 있는지 확인해야 합니다.

핵심 성능 평가는 Google이 웹사이트의 성능을 평가하는 데 사용하는 측정항목입니다. 페이지 속도 테스트를 실행하면 Google은 다음을 포함한 여러 요소를 기반으로 보고서를 생성합니다.

• First Contentful Paint(FCP) : 브라우저가 페이지의 첫 번째 DOM(Document Object Model) 요소를 렌더링할 때.
• LCP(Large Contentful Paint) : 웹사이트가 페이지에서 가장 큰 요소(일반적으로 이미지 또는 비디오)를 렌더링하는 데 걸리는 시간입니다.
• FID(First Input Delay) : 사용자가 처음으로 페이지와 상호작용(예: 버튼 클릭)할 때부터 브라우저가 해당 작업에 응답할 때까지의 시간입니다.
• CLS(누적 레이아웃 이동) : 로드되는 동안 웹사이트 콘텐츠가 페이지 주위로 이동하는 정도입니다. 예를 들어 이미지 및 버튼과 같은 요소가 화면 주위를 이동하여 사용자가 사이트와 상호 작용하지 못하게 할 수 있습니다.

PageSpeed ​​Insights 또는 GTMetrix와 같은 온라인 도구를 사용하여 이러한 영역에서 사이트가 어떻게 운영되고 있는지 확인할 수 있습니다. URL을 입력하기만 하면 점수가 포함된 보고서를 받게 됩니다.

보고서는 성과를 개선하는 방법에 대한 제안도 제공합니다. 이 조언에는 더 빠른 로딩 시간을 위해 최적화해야 하는 이미지가 포함될 수 있습니다.

예를 들어 보고서는 페이지에서 가장 큰 콘텐츠 요소를 영웅 이미지로 식별할 수 있습니다. 이 경우 이미지 파일의 크기를 조정하고 압축하여 LCP 점수를 높일 수 있습니다.

이미지는 CLS 점수에도 영향을 줄 수 있습니다. CLS 점수가 높으면 사이트에 높이 및 너비 속성이 지정되지 않은 이미지가 포함되어 있음을 나타냅니다.

따라서 브라우저는 이미지의 크기를 적절하게 조정하는 데 시간을 소비합니다. 이 프로세스는 페이지가 로드될 때 요소를 이동하여 사용자 경험을 방해합니다. 사이트에 업로드하는 모든 사진의 크기를 설정하면 이 문제를 쉽게 해결할 수 있습니다.

이미지를 최적화하는 2가지 방법

지금까지 살펴본 것처럼 이미지는 핵심 성능 평가 점수에 영향을 줄 수 있습니다. 웹 성능을 위해 이미지를 최적화하는 두 가지 효과적인 방법을 살펴보겠습니다!

1. 이미지 압축

압축은 이미지의 파일 크기를 줄이는 과정입니다. 압축 방법에는 두 가지 주요 유형이 있습니다.

• 손실: 이 방법은 이미지에서 많은 양의 데이터를 제거하여 파일 크기를 크게 줄입니다.
• 무손실: 이 압축 기술은 이미지에서 데이터를 제거하지 않고 파일 크기를 줄입니다.

큰 이미지 파일은 로딩 시간에 많은 부담을 주어 웹사이트가 느려질 수 있습니다. 또한 서버에서 많은 공간을 차지할 수 있습니다.

따라서 사이트에 업로드하는 모든 이미지를 압축하는 것이 좋습니다.

손실 압축은 무손실 압축보다 더 효과적인 경향이 있습니다. 크기 축소로 더 많은 유연성을 제공하기 때문입니다. 유일한 단점은 손실 압축이 이미지 품질에 영향을 줄 수 있다는 것입니다.

2. 이미지 크기를 조정하고 올바른 치수를 사용하십시오.

웹 성능을 위해 이미지를 최적화하는 또 다른 효과적인 방법은 이미지의 크기를 조정하는 것입니다. 일반적으로 크기가 클수록 파일 크기가 커집니다.

따라서 이미지를 웹사이트에 업로드하기 전에 자르기를 고려할 수 있습니다. 선택한 이미지 편집 소프트웨어로 이 작업을 수행할 수 있습니다.

또한 이미지를 사이트에 업로드하면 WordPress에서 자동으로 이미지에 대해 다른 크기를 생성합니다. 여기에는 일반적으로 큰, 중간 및 작은 버전과 축소판이 포함됩니다.

이런 식으로 WordPress를 사용하면 독자에게 가장 적절한 이미지 크기를 제공할 수 있습니다. 또한 브라우저가 방문자의 장치에 따라 올바른 이미지 크기를 표시하도록 도와줍니다. 따라서 이러한 설정을 사용하면 웹 사이트의 응답성이 향상됩니다.

게시물에 이미지를 추가할 때 전체 크기가 아닌 큰 크기로 설정하는 것이 좋습니다. 마찬가지로 블로그 피드를 디자인하는 경우 추천 사진에 대해 더 큰 이미지 크기 대신 축소판을 선택할 수 있습니다.

필요한 것보다 더 큰 차원을 사용하면 사이트 속도에 불필요한 압력을 가하게 됩니다. 또한 서버에서 더 많은 공간을 차지하게 됩니다.

올바른 방법으로 이미지를 최적화하는 방법

다행히 웹 성능을 위해 이미지를 최적화하는 데 사용할 수 있는 몇 가지 도구가 있습니다. 이 섹션에서는 시작하는 데 도움이 되는 몇 가지 모범 사례를 살펴봅니다.

1. 이미지 압축 도구 또는 플러그인 사용

앞서 언급했듯이 압축은 이미지의 파일 크기를 줄이는 데 도움이 됩니다. Adobe Photoshop 또는 Microsoft Photos와 같은 이미지 편집 소프트웨어를 포함하여 많은 도구를 사용하여 사진을 압축할 수 있습니다.

TinyPNG와 같은 온라인 도구를 사용할 수도 있습니다.

이 도구는 손실 압축을 사용하여 WEBP, JPEG 및 PNG 파일의 크기를 줄입니다. 이미지를 업로드하기만 하면 TinyPNG가 압축해 드립니다.

또는 Imagify와 같은 강력한 이미지 최적화 플러그인을 사용할 수 있습니다.

사이트에 플러그인을 설치하고 활성화했으면 설정 > Imagify 로 이동하여 압축 기본 설정을 지정할 수 있습니다.

압축 수준을 적극적 으로 설정하는 것이 좋습니다. 이 설정은 이미지 품질에 눈에 띄는 차이 없이 파일 크기를 상당히 줄입니다.

준비가 되면 변경 사항 저장 을 클릭합니다. 이제 Imagify는 사이트에 업로드하는 모든 이미지를 자동으로 압축합니다.

2. WordPress 편집기에서 이미지 크기 조정

또한 더 빠른 로딩 시간을 위해 이미지 크기 조정의 중요성에 대해서도 이야기했습니다. 사진을 WordPress 사이트에 업로드하기 전에 컴퓨터에서 크기를 조정할 수 있습니다.

그러나 WordPress 내에서 사진 크기를 조정할 수도 있습니다. 게시물이나 페이지에서 이미지를 선택하고 오른쪽의 설정 패널에서 너비와 높이를 조정하기만 하면 됩니다.

또는 미디어 라이브러리 에서 이미지를 찾아 이미지 편집 을 선택할 수 있습니다. 이 작업을 수행하면 이미지를 자르고 새 크기를 설정할 수 있는 창으로 이동합니다.

보시다시피 WordPress 편집기를 사용하면 자동으로 생성된 이미지 크기 중 하나를 선택할 수도 있습니다. 블로그 게시물에서 그래픽을 사용하는 경우 전체 크기 가 아닌 큰 크기를 선택하는 것이 좋습니다. 이 설정은 품질 저하 없이 더 작은 이미지 크기를 렌더링합니다.

3. 최대 업로드 제한 변경

WordPress에는 최대 업로드 파일 크기가 있습니다. 이 금액은 호스팅 공급자가 할당한 리소스에 따라 다를 수 있습니다.

현재 최대 파일 크기를 확인하려면 WordPress 대시보드에서 미디어 > 새로 추가 로 이동합니다. 이 페이지에서 업로드 한도를 확인할 수 있습니다.

일반적으로 더 큰 파일을 업로드하지 않는 한 이 값을 변경할 필요가 없습니다. 그러나 다른 사용자가 필요 이상으로 큰 이미지를 업로드하지 못하도록 파일 크기 제한을 줄일 수 있습니다. 이 설정은 다중 작성자 블로그를 운영하는 경우 유용할 수 있습니다.

이렇게 하려면 호스팅 제공업체에 연락하여 최대 업로드 파일 크기를 변경하도록 요청할 수 있습니다. 또는 php.ini 파일을 편집하여 WordPress 업로드 제한을 변경할 수 있습니다.

4. 지연 크기 조정 스크립트

웹 성능을 위해 이미지를 최적화하는 또 다른 방법은 HTML 코드 내에서 스크립트의 배치를 조정하는 것입니다. JavaScript는 리소스가 매우 많으며 HTML에 포함된 모든 형태의 상호 작용으로 인해 로드가 지연될 수 있습니다.

코드 맨 아래에 있는 외부 JavaScript 페이지에 링크하는 것이 표준 관행입니다. 이를 통해 대화형 요소가 활성화되기 전에 DOM(문서 개체 모델)을 완전히 로드할 수 있습니다.

그러나 일부 JavaScript 스니펫은 DOM 전체에서 일반적으로 사용됩니다. 한 가지 예는 사용자가 버튼을 클릭할 때 수행할 작업을 알려주는 이벤트 리스너 "onclick"입니다.

따라서 스크립트를 사용하여 이미지를 최적화하는 경우 타이밍이 페이지 로드 시간에 영향을 줄 수 있습니다. Flying Scripts와 같은 플러그인을 사용하여 이 문제를 해결할 수 있습니다.

이 도구를 사용하면 사용자 활동이 없을 때까지 특정 스크립트 실행을 지연할 수 있습니다. 이 설정은 페이지를 로드하는 데 걸리는 시간을 줄이는 데 도움이 됩니다.

결론

이미지를 최적화하면 사이트 속도를 높이고 UX를 개선할 수 있습니다. 또한 Google의 핵심 Web Vitals는 사이트의 품질과 성능을 평가할 때 이미지 크기를 고려합니다.

이 게시물에서는 웹 성능을 위해 이미지를 최적화하는 몇 가지 효과적인 방법을 살펴보았습니다. 이러한 방법에는 플러그인으로 이미지 압축 및 WordPress 편집기에서 사진 크기 조정이 포함됩니다.

웹 성능을 위해 이미지를 최적화하는 방법에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!

이미지 출처: pixel2013/pixabay.com, elenabsl/Shutterstock.com을 통한 추천 이미지