이미지를 최적화하고 더 이상 시간을 낭비하지 마십시오

HTTPArchive에 따르면 평균 웹사이트 크기는 2014년 1MB에서 2019년 2MB로 5년 만에 거의 두 배가 되었습니다. 물론 인터넷 액세스는 그 어느 때보다 빠르지만 여전히 웹사이트가 왜 이렇게 커졌습니까? 해답은 부분적으로 일반적인 멀티미디어 자산과 특히 이미지에 있습니다.

웹사이트가 더 이상 단순한 텍스트 페이지가 아닌 지 오래입니다. 이제 동적이며 이미지, 비디오, GIF로 가득 차 있습니다. 우리는 이러한 모든 자산이 거대한 해상도의 화면에서 멋지고 선명하게 보이길 원합니다.

웹사이트가 매우 느리게 로드되고 이미지를 최적화하지 않은 경우 좋은 소식이 있습니다. 오늘 WordPress 속도를 높이기 위해 할 수 있는 일을 배우게 될 것입니다. 웹사이트의 성능을 개선하고 이미지가 사용자 경험을 방해하지 않도록 하는 데 사용할 수 있는 도구를 살펴보겠습니다.

이미지 최적화가 중요한 이유

이미지 자산을 최적화하고 웹사이트를 가속화하는 데 사용할 수 있는 다양한 방법을 설명하기 전에 몇 분 정도 시간을 할애하여 그렇게 하는 것의 중요성을 이해하고 싶습니다.

이미지는 웹페이지의 전체 크기에 큰 영향을 미칩니다

처음에 말했듯이 웹사이트에 있는 이미지의 무게는 전체에서 중요한 비율을 나타냅니다. 예를 들어 다음 블로그 게시물을 고려하십시오. DevTips – WordPress가 URL을 추측하지 못하도록 막는 방법. 이것은 명확한 문제에 대한 빠른 솔루션을 제공하는 400단어 미만의 상당히 짧은 게시물입니다.

GTMetrix에 따르면 이 게시물을 로드하는 데 850KB의 데이터가 사용됩니다. 그런데 왜 이렇게 짧은 포스팅이 이렇게 많은 데이터를 사용하는 것일까요? 글쎄요, 이미지는 이 문제에 부분적으로 책임이 있습니다. 게시물의 추천 이미지만 해도 전체의 25%에 해당하는 200KB 이상의 무게가 납니다.

모바일 트래픽

statcounter에서 찾은 데이터에 따르면 웹 트래픽의 52%는 모바일 장치에서, 45%는 데스크톱에서 발생합니다. 그렇기 때문에 오늘날 작은 화면에서 잘 작동하는 반응형 디자인을 사용하는 데 많은 중점을 두고 있습니다.

확실히 당신 자신이 경험한 것처럼 모바일에서 인터넷 연결이 항상 좋은 것은 아닙니다(특히 출퇴근 중이거나 지하에 있는 경우). Statistia에 따르면 2019년 평균 속도는 약 14Mbps입니다. 따라서 모바일에서 웹 사이트의 속도를 높이려면 이미지를 포함하여 웹 사이트의 무게를 최대한 줄여야 합니다.

저장 및 데이터 전송 비용

적절한 치수의 이미지를 사용해야 하는 또 다른 이유는 돈입니다. 호스팅 제공업체가 계획을 제공하는 기준에는 웹사이트에서 사용하는 디스크 공간과 서버에서 방문자에게 보내는 데이터 양이 포함됩니다. 더 많은 디스크 공간을 사용하고 더 많은 데이터를 보낼수록 더 많은 비용을 지불해야 합니다.

이미지 크기를 줄이면 두 가지 요소가 모두 줄어들고 매달 약간의 비용을 절약할 수 있습니다.

이미지 최적화 작업

이미지 최적화에 대해 걱정해야 하는 이유를 알았으므로 이제 WordPress 사이트 속도를 높이기 위해 무엇을 할 수 있는지 알아보겠습니다.

#1 적절하게 크기가 조정된 이미지 업로드

새 DSLR 카메라에서 직접 제거한 사진을 업로드하는 사람들의 수는 놀랍습니다. 문제는 DSLR 카메라로 찍은 사진이 웹사이트에 넣기에는 너무 크고 무거울 수 있다는 것입니다.

가장 먼저 해야 할 일은 이미지를 웹사이트에 업로드하기 전에 적당한 크기로 줄이는 것입니다. 예를 들어, 당사 웹사이트에서 일반적으로 업로드하는 가장 큰 이미지는 게시물의 추천 이미지입니다. 우리는 이러한 이미지를 1200x800px로 제한하기로 결정했습니다. 이 다른 게시물에서는 이미지를 업로드하기 전에 빠르게 크기를 조정하고 압축하는 방법을 설명했습니다.

#2 테마를 조정하여 적절한 썸네일 생성

WordPress에 이미지를 업로드하면 WordPress에서 여러 썸네일을 생성합니다. 이 썸네일은 이미지의 더 크거나 작은 버전이 필요할 때를 아는 테마이기 때문에 테마에 의해 정의됩니다.

예를 들어 추천 이미지는 1200x800픽셀입니다. 다음 치수는 게시물 자체를 볼 때 효과적입니다.

이것은 분명히 다음과 같이 너무 많습니다.

그렇기 때문에 이 특별한 경우 테마는 게시물 목록 화면에서 사용되는 480x320px에 불과한 새로운 축소판 크기를 등록합니다.

테마가 적절한 썸네일을 생성하지 않는다고 생각되면 WordPress 문서를 읽고 set_post_thumbnail_size로 썸네일의 크기를 정의하는 방법 또는 set_post_thumbnail_size 로 추가 썸네일을 정의하는 방법을 아는 것이 add_image_size .

그리고 항상 그렇듯이 도움이 필요하면 아래 댓글 섹션에 알려주세요. 기꺼이 도와드리겠습니다(또는 이에 대한 게시물을 작성하시겠습니까?).

#3 이미지 크기를 현명하게 사용

WordPress는 미디어 라이브러리에 있는 이미지의 여러 축소판을 생성하므로 테마가 가능한 각 시나리오에서 최상의 이미지를 사용할 수 있습니다. 그러나 여기에 흥미로운 부분이 있습니다. 페이지와 게시물에 이미지를 삽입할 때 썸네일을 사용할 수도 있습니다.

게시물에 이미지를 삽입할 때 사이드바를 살펴보고 필요에 가장 적합한 크기를 선택하세요.

예를 들어 이렇게 좁고 작은 이미지를 넣으려면 작은 이미지(300x200px)가 완벽할 수 있습니다.

그러나 더 큰 이미지에 동일한 축소판을 사용하면 끔찍한 결과가 나타납니다.

해상도가 더 높은 버전을 사용하는 것이 좋습니다.

#4 적절한 이미지 형식 사용

다양한 이미지 형식이 있으며 각각 이미지를 압축하는 데에는 장단점이 있습니다. 가장 많이 사용되는 형식은 다음과 같습니다.

• PNG. WordPress 편집기의 스크린샷과 같이 사진이 없는 스크린샷을 공유하기 위한 훌륭한 이미지 형식입니다.
• JPG. 세계에서 가장 널리 퍼진 형식 중 하나입니다. 거의 모든 유형의 사진에서 매우 잘 작동하여 매우 높은 압축률을 허용합니다. 그러나 완벽하지 않습니다. 사진의 가장자리가 매우 날카로운 경우(예: 텍스트나 그림이 있는 경우) 낮은 압축률을 사용하거나 이미지에 보기 흉한 인공물이 생길 위험이 있습니다.
• GIF. 인터넷(및 소셜 미디어 플랫폼)의 왕. 애니메이션을 허용하는 형식 유형입니다. 솔직히 말해서, 지금 우리가 사용하는 모든 "GIF"는 더 나은 압축률과 더 높은 품질을 제공하는 실제로 (짧은) 비디오라고 생각합니다.

#5 사용하지 않는 이미지 삭제

시간이 지나면서 아무도 사용하지 않는 많은 레거시 이미지를 WordPress 사이트에 쉽게 보관할 수 있습니다. 빨리 삭제하고 싶다면 이 게시물에서 Toni가 방법을 설명합니다.

#6 지연 로딩 활성화

이미지는 웹사이트 속도를 느리게 하는 것입니다. 맞죠? 절대적으로 필요한 경우가 아니면 단순히 웹사이트에 이미지를 로드하지 말라고 지시하지 않는 이유는 무엇입니까? 그러면 속도가 빨라지겠죠? 지연 로딩을 입력합니다.

Lazy Loading은 매우 간단한 아이디어입니다. 방문자의 브라우저에 이미지가 표시될 때까지 이미지가 로드되지 않습니다. 예를 들어, 우리 웹사이트의 바닥글에 특정 이미지가 있는 경우 사용자가 웹사이트 끝에 도달하기 전에 이를 로드해야 하는 이유는 무엇입니까? 그들이 거기에 도착할 때까지 기다렸다가 일단 이미지를 로드하십시오(그렇지 않으면 이미지 로드를 저장하십시오!).

WordPress에는 많은 Lazy Loading 플러그인이 있습니다. SiteGround 이벤트와 같은 일부 호스팅 공급자는 설치에 이 옵션을 포함합니다. 대시보드에서 옵션을 찾아 활성화하기만 하면 됩니다.

오늘의 포스트가 웹로드 속도를 조금이나마 향상시키는 데 도움이 되었으면 합니다. 이렇게 쉽게 고칠 수 있고 좋은 결과를 얻을 수 있는 것은 거의 없습니다. 건배와 행운!

Unsplash에 있는 Icons8 팀의 주요 이미지입니다.