이미지를 수정하여 사이트 속도를 높이는 방법은 무엇입니까?

최적화되지 않은(또는 제대로 최적화되지 않은) 이미지는 웹사이트의 로딩 속도가 느린 가장 일반적인 원인입니다.

웹사이트가 빠르게 로드될 수 있지만 이미지가 로드되지 않거나 로드하는 데 너무 많은 시간이 걸리면 39%의 사람들이 여전히 웹사이트 참여를 중단할 수 있습니다.

그리고 이미지는 전체 페이지 무게의 68%를 차지합니다(많은 양입니다!).

따라서 이미지를 최적화하지 않은 상태로 유지할 위험이 없습니다.

따라서 이러한 빠른 기술을 따라 이미지를 최적화하고 페이지 로딩 속도를 더 빠르게 하십시오.

시작하기 전에…

이미지가 실제로 사이트의 느린 로딩 속도에 책임이 있는지 아니면 더 많은 문제가 있는지 확인하십시오.
Google PageSpeed ​​Insights를 사용하여 사이트의 로딩 속도를 분석하십시오.

그런 다음 ' 진단 ' 및 ' 기회 '까지 아래로 스크롤합니다.

여기에서 로딩 속도에 영향을 미치는 모든 매개변수를 자세히 분석하고 개선할 수 있는 기회를 찾을 수 있습니다.

보고서에는 이미지 관련 문제도 언급되어 있습니다.

이것은 사이트의 로딩 속도에 영향을 미치는 이미지 관련(및 기타) 문제를 찾고 수정하는 가장 빠른 방법입니다.

그러나 함정이 있습니다. 도구는 페이지를 라이브로 푸시한 후 몇 주 후에만 이러한 문제를 찾을 수 있습니다. 로딩 속도는 Google 순위 요소이고 페이지가 느리게 로드되면 SERP 순위가 급락할 수 있기 때문에 기다리는 것은 현명하지 않습니다.

업로드하기 전에 이미지를 최적화하지 않으시겠습니까? 결국, 예방이 치료보다 낫습니다.

이 기술은 정확히 어떻게 하는지 알려줄 것입니다. 의 시작하자.

1. 올바른 이미지 형식 선택

웹사이트 소유자는 다음 네 가지 이미지 형식을 선호합니다.

• JPEG(또는 JPG – 공동 사진 전문가 그룹)

품질이 약간 저하된 압축 이미지 형식입니다. JPEG는 디테일과 색상이 많은 사진이나 이미지에 가장 적합합니다.

압축된 이미지 = 더 작은 파일 크기 = 더 빠른 로딩 속도

• PNG(휴대용 네트워크 그래픽)

로고와 같은 배경이 투명하고 색상이 적은 이미지에 적합한 고품질의 비압축 이미지 형식입니다.

PNG는 두 가지 형식으로 제공됩니다.

• PNG-8

팔레트는 256색으로 제한되어 있지만 파일 크기가 줄어들어 더 빨리 로드할 수 있습니다.

• PNG-24

제한된 색상 팔레트가 없습니다. 따라서 로드하는 데 더 오래 걸리는 더 무거운 파일입니다.

• GIF(그래픽 교환 형식)

GIF는 무손실 압축을 보장하면서 256색의 제한된 팔레트를 사용합니다. 애니메이션 이미지에 가장 적합합니다.

GIF는 로드하는 데 시간이 걸립니다. GIF보다 PNG-8 이미지를 사용하는 것이 좋습니다.

• SVG(확장 가능한 벡터 그래픽)

JPEG, PNG 및 GIF는 래스터 그래픽(픽셀 구성)이고 SVG는 벡터 그래픽(경로 구성)입니다. 따라서 SVG는 이미지 파일을 로드하기 위해 HTTP 요청이 필요하지 않습니다.

이 중 웹 사이트에 적합한 이미지 형식은 무엇입니까?

그것은 당신의 목적에 달려 있습니다.

통계적으로 PNG와 JPEG는 웹사이트에서 가장 많이 사용되는 형식입니다. 그리고 이미지 품질과 로딩 속도 사이의 균형 때문에 이상적인 선택입니다.

2. 이미지를 업로드하기 전에 크기 조정

크기를 변경하지 않고 이미지를 업로드하면 필요한 것보다 크기가 더 커질 수 있습니다.

이미지를 다양한 크기의 화면 크기에 맞추려면 브라우저에서 이미지 크기를 조정해야 하므로 시간이 많이 걸리고 사이트의 로딩 속도에 영향을 줍니다.

업로드하기 전에 크기를 조정하면 이미지가 화면의 지정된 공간에 맞고 브라우저에서 더 빨리 로드됩니다.

이제 최적의 이미지 크기는 웹사이트마다 다릅니다. 웹사이트의 테마나 디자인에 따라 다릅니다.

대부분의 브라우저에 내장된 검사 도구를 사용하여 사이트에서 사용되는 이미지의 정확한 크기를 결정할 수 있습니다.

경쟁사 사이트에서 사용된 이미지의 크기를 확인하고 싶을 때도 같은 방법으로 하면 됩니다.

웹 페이지의 요소를 검사하고 이미지를 클릭하면 브라우저에서 정확한 이미지 크기를 표시합니다.

이미지 크기는 배너, 팝업, 버튼 등과 같은 목적에 따라 다를 수 있습니다. 다음은 대부분의 웹사이트에서 사용하는 인기 있는 이미지 크기 (픽셀 단위)입니다.

웹사이트에 업로드하는 이미지의 크기를 조정하기 위한 참조로 보관할 수 있습니다.

블로그 게시물 또는 기타 내부 콘텐츠 이미지의 너비와 높이는 각각 1500픽셀 및 1000픽셀을 초과해서는 안 됩니다.

이미지 크기를 효과적으로 조정하는 방법에는 여러 가지가 있습니다.

• 포토샵 사용하기

Photoshop은 사진 편집 전용 소프트웨어입니다. 크기를 조정하는 동안 이미지의 세부 사항과 선명도를 유지합니다.

이미지 > 이미지 크기 를 선택합니다. 대화 상자가 나타납니다. 현재 이미지의 크기를 보여줍니다.

새 이미지 파일 크기를 보려면 필요한 치수(너비 및 높이)를 입력하십시오. 확인을 클릭하면 크기 조정이 완료됩니다.

원하는 형식으로 파일을 저장하고 사이트에 업로드할 수 있습니다.

• 페인트 사용

Windows 그림판은 이미지를 업로드하기 전에 크기를 조정하는 것보다 간단한 대안입니다.

그림판에서 크기를 조정하려는 이미지를 엽니 다. 도구 모음의 옵션에서 크기 조정을 선택 합니다.

요구 사항에 따라 새 치수를 입력합니다. (페인트는 기본적으로 종횡비를 유지합니다.) 확인 을 클릭하고 이미지 크기를 조정합니다.

파일을 적절한 형식으로 저장한 다음 사이트에 업로드합니다.

• 워드프레스 플러그인 사용하기

WordPress를 사용하는 경우 Imsanity와 같은 플러그인을 사용하여 이미지 크기를 조정할 수 있습니다.

플러그인은 사용자가 지정한 크기 제한을 초과하는 이미지의 크기를 자동으로 조정하고 업로드된 이미지로 대체합니다.

3. 모든 이미지 압축

압축은 이미지 품질을 저하시키지 않으면서 파일 크기(바이트)를 최소화합니다.

이미지 전송 속도를 높이고 서버의 저장 공간을 줄이는 데 도움이 됩니다.

따라서 사이트에 업로드하기 전에 모든 이미지를 압축해야 합니다.

이미지의 파일 크기를 줄이는 두 가지 방법이 있습니다.

• 손실

손실 압축은 파일 크기를 크게 줄입니다. 날짜, 해상도, 치수, 색상, 장치 등과 같은 일부 픽셀 데이터 및 이미지 메타데이터가 제거됩니다.

이미지 품질이 저하되지만 사람의 눈은 압축되지 않은 이미지와 압축되지 않은 이미지를 구별하지 못합니다.

• 무손실

무손실 압축은 상대적으로 더 큰 파일 크기를 제공합니다. 픽셀 데이터를 변경하지 않지만 메타데이터의 세부 정보를 제거합니다. 따라서 이미지 품질에 손실이 없습니다.

이미지의 압축 수준을 선택할 수도 있습니다.

압축 수준(또는 백분율)이 높을수록 품질이 떨어집니다...

... 그리고 파일 크기가 작아집니다.

이제 언제 어떤 유형의 압축을 사용해야 하는지 궁금할 것입니다.

품질을 타협할 수 없는 경우 무손실 압축을 선택하십시오. 필요에 따라 적절한 압축 수준을 선택할 수 있습니다. 사진 및 웹사이트 이미지에 가장 적합합니다.

그러나 품질이 덜 중요하다면 손실 압축을 사용하십시오. 스크린샷이나 유사한 이미지에 항상 사용할 수 있습니다.

다음은 효율적인 이미지 압축을 제공하는 몇 가지 웹 도구입니다.

• 작은PNG
• 크라켄.io
• JPEG미니
• 트리마지

WordPress를 사용하는 경우 다음은 몇 가지 인기 있는 이미지 압축 플러그인입니다.

• 스무시
• 옵티몰
• EWWW 이미지 최적화
• 작은PNG
• 크라켄.io

4. 이미지(및 기타 콘텐츠)에 CDN 사용

CDN은 웹에서 더 빠른 콘텐츠 전달을 가능하게 하는 지리적으로 분산된 서버 네트워크입니다. 웹사이트의 성능과 속도를 향상시켜 훌륭한 사용자 경험을 제공합니다.

이미지(및 기타 콘텐츠)에 CDN을 사용하면 두 가지 방법으로 사이트 속도를 높일 수 있습니다.

첫째 , 이미지는 기본적으로 스토리지 서버에서 더 적은 공간을 차지하도록 최적화됩니다.

둘째 , 이미지는 서로 다른 지리적 위치에 있는 여러 서버에 저장됩니다.

따라서 사용자가 사이트를 방문할 때마다 원본 서버에서 이미지 파일을 로드할 필요가 없습니다. 대신 가장 가까운 CDN 서버에서 다운로드할 수 있습니다.

과학은 여전히 ​​데이터 전송 속도를 제한하기 때문에 CDN을 사용하면 페이지 로딩 속도를 향상시키는 데 도움이 됩니다. 원본 서버와 사용자 위치 간의 거리는 데이터 전송 속도에 영향을 줍니다.

사용자가 원본 서버에서 멀리 떨어져 있는 경우 이미지(및 기타 콘텐츠)를 다운로드하는 데 많은 시간이 소요됩니다. 로드하는 데 몇 초가 더 걸리더라도 사용자는 사이트에서 다시 이탈합니다.

그러나 CDN을 사용하면 사용자는 가장 가까운 네트워크 서버에서 이미지를 다운로드할 수 있습니다. 네트워크 서버와 사용자 위치 사이의 거리가 현저히 줄어들수록 빨라집니다.

따라서 이미지에는 CDN을 사용해야 합니다.

인터넷에서 무료로 사용할 수 있는 몇 가지 고품질 CDN이 있습니다. 당신은 그들 중 하나를 사용하고 더 빠른 이미지 로딩을 달성할 수 있습니다.

다음은 도움이 될 인기 있고 효율적인 CDN입니다.

• 클라우드플레어 CDN
• 아마존 클라우드프론트
• 구글 클라우드 CDN
• 임퍼바 CDN
• CDN77.com
• 검렛
• 빠르게
• 캐시플라이
• 바니시 소프트웨어
• 버니넷
• 5센트

5. 브라우저 캐싱 활성화

사용자가 사이트를 방문할 때마다 이미지, HTML 및 CSS 파일, JavaScript 파일, 미디어 파일, PDF 등과 같은 모든 웹사이트 리소스를 서버에서 다운로드해야 합니다.

브라우저 캐싱을 활성화하면 웹 브라우저에 사이트 리소스를 다운로드하여 임시 로컬 저장소에 저장하도록 지시합니다.

웹 브라우저에 다음에 대해 알릴 수도 있습니다.

• 캐시해야 하는 리소스와 캐시하지 않아야 하는 리소스.
• 특정 캐시 리소스를 보관해야 하는 시간입니다.

따라서 사용자가 사이트를 다시 방문할 때마다 서버가 아닌 로컬 저장소에서 리소스를 다운로드할 수 있습니다.

따라서 반복 방문자를 위해 웹 페이지를 더 빨리 로드하는 데 도움이 됩니다.

쉽게 달성할 수 있는 페이지 로딩 속도 향상을 보세요.

브라우저 캐싱:

100배 이상 빠릅니다.

대부분의 페이지 속도 테스트 도구는 같은 이유로 '브라우저 캐싱 활용'을 제안합니다.

이미지는 사이트에서 로드하는 데 최대 시간이 걸리므로 이미지 캐싱을 활성화하면 사이트의 로드 속도가 크게 향상됩니다.

다음 두 가지 방법으로 사이트 이미지에 대한 브라우저 캐싱을 활용할 수 있습니다.

• .htaccess 사용

브라우저 캐싱을 구현하기 위해 가장 일반적으로 사용되는 방법입니다. .htaccess 파일에 몇 줄의 브라우저 캐싱 코드를 추가하여 활성화할 수 있습니다.

코드에서 캐시해야 하는 리소스 유형과 로컬 메모리에 유지되어야 하는 기간을 정의합니다. (당신의 필요에 따라)

사용자가 더 빠르게 로드할 수 있도록 이미지(및 기타 리소스)가 모두 설정되었습니다.

• 플러그인 사용(WordPress 사이트용)

플러그인은 .htaccess 파일 내에 브라우저 캐싱 코드를 추가하여 프로세스를 자동화합니다. 그러나 그들과 함께 많은 개인화 옵션을 찾지 못할 수도 있습니다.

다음은 브라우저 캐싱을 활성화하여 WordPress 사이트 속도를 높이는 몇 가지 플러그인입니다.

• W3 총 캐시
• WP 가장 빠른 캐시
• WP Cloudflare 슈퍼 페이지 캐시
• WP 슈퍼 캐시
• 하이퍼 캐시
• 혜성 캐시

이를 통해 이미지의 로딩 시간을 상당히 줄일 수 있습니다.

보너스: 이미지에 대체 텍스트 추가

대체 텍스트는 이미지에 표시되는 내용을 명확하게 나타내는 이미지에 대한 간략한 설명입니다.

다음 세 가지 이유로 중요합니다.

• 사용자가 저속 인터넷 연결을 사용하고 이미지를 로드하는 데 시간이 걸리는 경우 브라우저는 이미지 대신 대체 텍스트를 표시합니다.
• 화면 판독기는 시각 장애가 있는 사용자가 이미지의 모든 내용을 이해할 수 있도록 대체 텍스트를 소리내어 읽습니다.
• 검색 엔진은 페이지 내용을 더 잘 이해하고 적절하게 순위를 매기기 위해 대체 텍스트를 사용합니다.

이제 이미지에 대한 대체 텍스트를 작성하는 것은 매우 쉽습니다. 당신은 당신의 아이에게 이미지를 어떻게 설명할 것인지에 대해 생각해야 하고 당신의 손에는 훌륭한 대체 설명이 있습니다.
예를 들어, 아래 주어진 이미지에 대한 올바른 대체 텍스트는 다음과 같습니다: 공중에서 점프하는 고양이.

이미지를 명확하게 설명합니다. 사용자는 이미지를 보지 않아도 이미지가 무엇인지 알 수 있습니다.

따라서 사이트에 업로드하는 모든 이미지에 대체 텍스트를 추가해야 합니다.

그러나 이미 이미지를 업로드했다면 무료 웹사이트 분석기를 사용하여 대체 텍스트가 없는 이미지를 쉽게 찾을 수 있습니다.

사이트의 모든 이미지를 분석하고 alt 속성이 누락된 총 이미지 수를 보여줍니다.
더보기 를 클릭하면 수정해야 하는 이미지의 URL이 표시됩니다.

이러한 이미지의 대체 텍스트를 최적화하고 사이트의 사용자 경험을 향상시킬 수 있습니다.

또한 Google 이미지 검색 결과에서 더 나은 성능을 보이는 이미지를 확인할 수 있습니다. 대체 텍스트는 이미지에 대한 가장 중요한 SEO 순위 요소 중 하나이기 때문입니다.

그래서, 그것은 당신에게 윈-윈 상황입니다!

이미지를 최적화하여 사이트 속도 향상

모바일 인터넷 사용이 계속 증가함에 따라 더 빠르고 더 원활한 사이트를 모색할 것입니다.

즉, 이미지를 최적화하지 않은 상태로 두는 것은 절대 해서는 안 되는 실수입니다. 속도가 느린 경우 위의 기술을 사용하여 이미지를 최적화하십시오.

Google PageSpeed ​​인사이트로 사이트를 다시 테스트하면 속도가 크게 향상되는 것을 느낄 수 있을 것입니다!

내가 언급한 기술을 적용했습니까? 어느 것이 가장 효과적이라고 생각하십니까? 네 생각을 말해봐.