SEO에 적합하도록 이미지를 최적화하는 방법 (전체 안내서)

웹 사이트의 성능은 웹 사이트 접근성 가이드 라인에 따라 선택한 특정 웹 호스트에서 사용하는 이미지 파일 크기에 이르기까지 여러 가지 요소에 따라 달라집니다.

그러나 적절한 크기로 포맷하면 수정으로 인해 품질이 떨어질 수 있습니다. 좋은 소식은 몇 가지 기술과 요령으로 최적의 이미지 품질을 유지하고 적절한 크기를 얻을 수 있다는 것입니다.

이미지 최적화 란 무엇입니까?

이미지 최적화 치수큰 이미지가 있으면 웹 페이지가 상당히 느려질 수 있습니다. 이렇게하면 로딩 시간이 단축되고 사이트 방문자의 전반적인 경험이 줄어 듭니다..

파일 크기를 줄이는 것은 이미지 최적화입니다. 이를 위해 스크립트 또는 플러그인을 사용할 수 있습니다.

그러면 페이지로드 시간이 더 빨라집니다. 무손실 및 손실 압축은 가장 일반적인 두 가지 최적화 방법입니다..

이미지 포맷의 장점

웹상의 평균 이미지 크기웹 페이지 총 중량의 약 54 %가 이미지 때문인 것으로 추정됩니다.

웹 사이트 최적화 작업을 할 때는 이미지 때문에 이미지가 첫 번째 작업이어야합니다. 이미지 형식화의 장점은 다음과 같습니다.

  • 향상된 페이지 로딩 속도
  • 백업을 만드는 것이 더 빠릅니다
  • 적은 서버 저장 공간이 필요합니다
  • 올바른 SEO 플러그인으로 SEO 개선
  • 적은 대역폭이 사용됩니다

이미지 최적화로 성능을 향상시키는 방법

목표는 허용 가능한 품질과 최저 파일 크기의 균형을 맞추는 것입니다. 이 작업을 수행하는 방법은 여러 가지가 있습니다. 업로드하기 전에 이미지를 압축하는 것이 일반적인 옵션입니다. 이 목적을 위해 도구 또는 플러그인을 사용할 수 있습니다 (여기에는 몇 가지가 있습니다).

사용하는 압축 유형과 파일 형식을 고려해야합니다. 올바른 조합으로 이미지 크기를 최대 5 배 줄일 수 있습니다.

다양한 파일 형식 및 압축 유형을 실험하여 요구에 가장 적합한 조합을 결정하십시오..

최고의 파일 형식을 선택하십시오

최상의 파일 형식을 선택하려면 사용 가능한 파일 형식을 알아야합니다. 이것들이 가장 일반적입니다 :

  • JPEG : 이 유형은 무손실 및 무손실 최적화를 활용합니다. 품질 수준을 조정하여 파일 크기와 품질의 균형을 잘 맞출 수 있습니다.
  • PNG : 이 유형은 파일 크기가 더 크지 만 이미지 품질은 더 높습니다. 손실 또는 무손실 압축을 사용할 수 있습니다.
  • GIF : 이것은 애니메이션 이미지에 이상적입니다. 무손실 압축 만 사용할 수 있습니다. 256 색만 사용합니다.

이미지 파일 형식

다른 옵션이 있지만 가장 일반적이고 사용하기 쉬운 옵션 중 하나입니다. 다른 옵션으로는 JPEG XR 및 WebP가 있습니다. 모든 브라우저가이 두 가지를 지원하지는 않습니다..

그러나 실행 가능한 선택이 될 수 있습니다. 예를 들어, 비슷한 JPEG 이미지와 비교할 때 평균적으로 WebP를 사용하면 파일 크기가 30 % 줄어 듭니다..

이 두 가지 옵션에 대한 보편적 인 지원이 없기 때문에 적절한 자원을 제공하려면 서버 또는 응용 프로그램에 추가 논리가 필요합니다.

  • 이미지 최적화는 WebP 및 JPEG XR 제공을 포함하여 일부 CDN에서 제공하는 서비스입니다.
  • 클라이언트를 감지하고 사용 가능한 최상의 이미지 형식을 제공하고 지원되는 형식을 확인하여 추가 응용 프로그램 논리를 추가 할 수 있습니다.
  • 특정 오픈 소스 도구는 적절한 자산의 대화, 최적화 및 서비스를 자동화합니다.

크기 대 압축 품질

압축률이 낮 으면 품질이 높아지지만 파일 크기는 일반적으로 더 큽니다. 압축률이 높으면 반대가됩니다. 파일은 작지만 품질이 저하되는 경향이 있습니다..

이미지 품질 대 압축

이상적으로는 웹 페이지의 전체 무게에 총 1-2MB가 필요합니다. 따라서 얼마나 많은 이미지를 사용해야하는지 고려하고 이 숫자를 약 1.5로 나누십시오. 이것은 최고의 로딩 속도를 허용하는 이미지 당 크기를 제공합니다.

무손실 대 손실 최적화

이들은 두 가지 유형의 압축을 사용합니다. 그들이하는 일을 이해하는 것이 중요합니다 :

  • 무손실 대 손실 압축무손실: 데이터를 압축하며 필터입니다. 이미지를 렌더링하기 전에 압축을 풀어야합니다. 그러나 품질은 저하되지 않습니다. 무손실 압축을 수행하는 몇 가지 도구가 있습니다.
  • 로시: 이것은 일부 데이터를 제거하며 필터입니다. 이미지의 품질이 저하되므로 축소 정도를 염두에 두십시오. 다양한 이미지 편집기 및 도구를 사용하여 이미지 품질 설정을 조정할 수 있습니다.

무손실 또는 무손실 구성의 최적 구성은 도입 된 아티팩트와 파일 크기 간의 상충 관계 및 이미지 내용과 같은 자체 기준에 따라 다릅니다..

모든 이미지에 적용되는 단일 범용 설정은 없습니다. 궁극적으로 다른 이미지를 가지고 놀면서 어떤 것이 가장 적합한 지 확인하고 싶습니다..

크기에 맞게 이미지 크기 조정

WordPress와 같은 사이트의 반응 형 페이지 덕분에 미디어 라이브러리에 여러 파일 크기가 제공됩니다. 브라우저는 가장 적합한 크기를 선택하여 다운로드 할 수 있습니다. 브라우저가 선택한 크기는 기기의 해상도에 따라 다릅니다..

워드 프레스에서 이미지 크기 조정

원본 파일은 그대로 유지됩니다. 원하는 경우 플러그인을 사용하여 원본을 저장하지 않고 디스크 공간을 절약 할 수 있습니다.

이미지 교체 및 제거

웹 페이지에 모든 이미지가 필요합니까? 그렇지 않은 경우 불필요한 것을 제거하십시오. 그러나 모두 콘텐츠와 관련이있는 경우 더 크거나 낮은 품질의 이미지를 더 나은 옵션으로 바꾸는 것이 좋습니다.

경우에 따라 웹 글꼴 및 CSS 효과가 이미지를 대신하면서 페이지에서 멋진 시각적 미학을 제공 할 수 있습니다. 웹 서체를 사용하면 멋진 서체가 유용성을 향상시키고 페이지에보다 맞춤화 된 모양을 제공 할 수 있습니다.

또한 가독성과 브랜딩을 향상시킬 수 있습니다. 가독성 문제없이 텍스트를 쉽게 검색하고 선택하고 크기를 조정할 수 있는지 확인하십시오..

CSS 효과에는 그림자 및 그라디언트와 같은 요소가 포함됩니다. 이것들도 더 많은 브랜딩을 할 수 있습니다. 애니메이션은 모든 확대 / 축소 수준과 해상도로 웹 페이지에 시각적 인 매력을 제공 할 수 있습니다. 이미지 파일과 비교하면 바이트의 일부입니다..

래스터 대 벡터 이미지

래스터 대 벡터

래스터 및 벡터는 기본 이미지 파일 유형 중 두 가지입니다. 래스터 이미지를 만드는 데 픽셀 기반 프로그램, 스캐너 또는 카메라가 사용됩니다.

이들은 인터넷에서 널리 사용되며 더 일반적으로 사용됩니다. 벡터 소프트웨어는 벡터 이미지를 만드는 데 사용됩니다. 실제 제품, 엔지니어링, CAD 및 3D 그래픽에 사용되는 이미지에 공통입니다..

벡터 이미지는 해상도와 줌에 독립적입니다. 기하학적 모양이 관련되면 벡터가 이상적입니다. 이미지가 복잡하고 풍부한 디테일과 불규칙한 모양이있는 경우 래스터 이미지가 선호됩니다..

래스터 그래픽은 각 픽셀의 개별 값을 사각형 격자 안에 인코딩하여 이미지를 나타냅니다. 벡터 그래픽은 점, 선 및 다각형을 사용하여 이미지를 나타냅니다..

고해상도 화면 의미

장치 픽셀과 CSS 픽셀을 포함하는 두 가지 다른 픽셀 유형을 구별하는 것이 중요합니다. 하나의 CSS 픽셀에 여러 장치 픽셀이 존재할 수 있습니다. 더 많은 장치 픽셀로 화면의 세부 사항이 세밀 해짐.

CSS 픽셀 대 장치 픽셀더 높은 장치 픽셀 수를 최대한 활용하려면 이미지 자산에 더 자세한 정보가 있어야합니다.

이 작업은 선명한 이미지를 생성 할 수 있으므로 벡터 이미지에 이상적 어떤 해상도로 렌더링 될 때.

래스터 이미지는 픽셀 단위로 이미지 데이터를 인코딩하기 때문에 더 어려워집니다. 픽셀이 증가함에 따라 래스터 파일 크기가 증가하는 동안.

따라서 고해상도 화면에는 이점을 얻기 위해 고해상도 이미지가 필요합니다. 벡터 이미지는 고해상도 화면에 적합 해상도 독립적이므로 항상 선명한 결과를 제공하기 때문에.

해상도에 관계없이 이미지 최적화 기술은 동일하다는 것을 기억하십시오.

벡터 이미지 최적화

모든 최신 브라우저에서 SVG (Scalable Vector Graphics)를 지원합니다.

이는 2 차원 그래픽에 이상적이며 형식은 XML 이미지 기반입니다. SVG 파일은 원하는 텍스트 편집기를 사용하거나 대부분의 벡터 기반 소프트웨어 유형을 사용하여 손으로 만들 수 있습니다.

SVG 파일의 크기를 줄이려면 축소해야합니다. SVG 파일을 압축 할 때 GZIP를 사용해야합니다.

래스터 이미지 최적화

픽셀 격자는 래스터 이미지를 구성합니다. 개별 픽셀은 2 차원 격자에 있습니다. 예를 들어, 10,000 픽셀의 시퀀스는 100 x 100 픽셀의 이미지를 구성합니다. 모든 픽셀은 투명성과 색상 정보를 인코딩합니다.

래스터 헤비RGBA 값은 각 픽셀별로 저장됩니다. 여기에는 다음이 포함됩니다.

  • 적색 통로
  • 블루 채널
  • 녹색 통로
  • 알파 (투명도) 채널

256 개의 음영 (값)이 브라우저에 의해 내부적으로 할당됩니다. 채널당 8 비트로 변환됩니다. 픽셀 당 4 바이트입니다. 따라서 그리드 크기를 사용하여 파일 크기를 계산할 수 있습니다. 파일 크기가 매우 커지는 데별로 걸리지 않습니다..

따라서 이미지 파일의 크기를 줄이려면 몇 가지 전략이 있습니다.

  • 이미지의 심도를 줄입니다. 작은 색상 팔레트를 사용하여이 작업을 수행 할 수 있습니다.
  • 개별 픽셀이 저장하는 데이터를 최적화.

툴 및 파라미터 튜닝

모든 이미지에 적합한 완벽한 이미지 도구, 최적화 매개 변수 또는 형식은 없습니다. 이미지 내용 및 해당 기술 및 시각적 요구 사항에 따라 사용해야 할 내용이 결정됩니다.

좋은 설정 세트를 찾으면 나중에 비슷한 이미지에 사용하여 시간을 절약 할 수 있습니다. 그러나 모든 이미지를 압축하기 위해 동일한 설정을 사용해야한다고 가정하지 마십시오..

몇 가지 일반적인 도구에 대해 배우면 올바른 선택을하는 데 도움이됩니다. 이 4 가지가 가장 많이 사용됩니다.

  • 기 프실: 다양한 GIF 이미지를 최적화하고 만들 수 있습니다.
  • Optipng: 무손실 PNG 최적화를 위해 사용됩니다.
  • p 트란: JPEG 이미지를 최적화 할 수 있습니다..
  • 팡 콴트: 손실 PNG 최적화를 허용하는 데 사용됩니다.

확장 된 이미지 자산 제공

이미지 최적화를 수행 할 때 고려해야 할 기본 기준은 두 가지입니다.

  • 이미지의 총 픽셀 수 최적화.
  • 이미지의 각 픽셀을 인코딩하는 데 필요한 바이트 수 최적화.

이미지 형식 트리이미지 파일의 크기는 개별 픽셀 인코딩에 필요한 총 바이트를 곱한 총 픽셀. 이거 야. 웹 사이트에서 이미지 파일의 최적 크기를 결정하려고 할 때이 점을 명심하십시오..

이 때문에 이미지를 최적화하는 가장 효과적이고 쉬운 방법은 자산을 브라우저에 의도 한 크기로 표시해야하는 더 많은 픽셀을 배송하지 않는 것입니다..

그래서, 브라우저를 사용하여 이미지의 크기를 조정하지 마십시오. 이로 인해 저해상도로 표시 될 수 있습니다. 또한 많은 추가 CPU 리소스를 사용합니다.

일반적으로 게재 된 모든 단일 자산에 대해 정확한 표시 크기를 보장 할 수는 없습니다. 그러나 모든 불필요한 픽셀을 최소로 유지해야합니다..

또한 큰 자산을 디스플레이 크기에 최대한 가깝게 제공해야합니다..

이미지 최적화 점검표

여기에있는 모든 정보를 통해 이미지를 최적화하여 웹 페이지 속도를 높일 수 있습니다. 여전히 아름다운 이미지를 사용할 수는 있지만 페이지 로딩 시간이 크게 느려지지 않습니다..

이것은 방문자를 행복하게하고 웹 사이트의 전반적인 기능을 향상시킵니다. 이미지를 최적화 할 때 다음 점검 목록을 고려하십시오.

  • 벡터 형식은 크기와 해상도에 독립적이므로 고해상도 및 여러 장치에서 작동하므로 벡터 형식을 고려하십시오..
  • 모든 SVG 자산은 압축 및 축소되어야합니다. 불필요한 메타 데이터를 제거합니다.
  • 래스터 형식의 경우 최적의 품질 설정으로 재생하십시오. 이것은 많은 바이트를 절약 할 수 있습니다.
  • 각 자산에 대해 기능 요구 사항을 파악하고 래스터 이미지에 가장 적합한 형식을 선택하십시오..
  • 일관된 이미지 최적화를 보장 할 수있을 때마다 자동화.
  • 자연스런 이미지 크기와 디스플레이 크기가 최대한 비슷하도록 스케일 된 이미지 제공.

요약하면 과학과 예술 대 이미지 최적화가 있습니다. 고도로 개발 된 알고리즘과 기술은 과학의 역할을합니다.

개별 이미지 압축에 관한 명확한 답변의 부족은 기술입니다. 궁극적으로, 당신은 놀면서 실험해야합니다. 이를 통해 이미지 파일을 최적으로 선택하고 웹 페이지 속도에 영향을주는 방식을 선택할 수 있습니다.

Wix와 같은 타사 웹 사이트 제작자의 인기와 정교함이 높아짐에 따라 디자이너는 조잡 해지기는 쉽지만 템플릿을 때리거나 사이트를 처음부터 새로 만들 때 좋은 이미지 최적화 프로세스를 개발하고 유지하는 데 집중할 수 있습니다..

참조 및 이미지 크레딧 :

  • PicupMedia.com
  • 컴퓨팅. 홈 DNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author