WordPress 사이트에 매력적이고 명확하며 빠른 로딩 이미지를 갖는 것은 사용자/고객을 끌어들이는 가장 효과적인 방법 중 하나입니다. 자동차 대리점이 새 모델이 흠 없고 반짝이는지 확인하는 데 너무 많은 시간을 보내는 데는 이유가 있습니다. 제품의 시각적 영향은 종종 성공과 실패 사이에서 결정을 내리거나 깰 수 있습니다. 온라인 쇼룸도 다르지 않으며 이미지가 로딩 속도에 어떤 영향을 미칠 수 있는지에 대한 추가적인 복잡성이 있습니다. 로드하는 데 3초 이상 걸리면 사용자가 웹사이트를 떠날 것이라는 잘 사용되는 유명한 측정항목입니다. 웹 사이트가 로드되는 데 3초 이상 걸린다면 사이트에 있는 이미지가 그 이유의 일부일 가능성이 높습니다.

따라서 WordPress 사이트 소유자는 사이트에 있는 이미지가 사용자의 관심을 끌고 사이트가 빠르게 로드되도록 하기 위해 무엇을 할 수 있습니까? 초기 본능은 이미지를 1800x1400 크기 이미지에서 300x200 크기 이미지로 축소하는 것일 수 있습니다. 이는 이미지 파일 크기가 훨씬 작아지지만 결과적으로 이미지 품질과 사용자 경험이 저하되기 때문에 취해야 할 잘못된 조치입니다. 예를 들어 자동차 쇼룸 판매 웹사이트가 있는 경우 고객은 자동차를 정말 잘 살펴보고 모든 기능과 세부 사항을 볼 수 있기를 원할 것입니다. 이미지를 훨씬 더 작게 만들면 자동차에 대한 자세한 검사가 이제 불가능해지며 잠재 고객은 좌절하고 다른 곳을 찾게 됩니다.

그래서 당신의 선택은 무엇입니까? 고맙게도 고품질의 대용량 파일 크기 BMP, 시도되고 테스트된 JPEG부터 널리 알려지지 않은 새롭고 널리 알려지지 않은 WebP 형식에 이르기까지 수십 가지의 다양한 이미지 파일 옵션을 선택할 수 있습니다. 올바른 형식을 선택하는 것과 함께 "압축"이라고 하는 WP-Optimize 를 통한 프로세스를 사용하여 선택한 형식에 관계없이 이미지 파일 크기를 추가로 줄일 수 있다는 점을 기억하는 것이 중요합니다.

사이트 속도는 웹사이트를 크롤링하는 Google 봇이 검색 결과에서 사이트 순위를 지정할 때 관찰하는 가장 중요한 10가지 요소 중 하나입니다. 로딩 속도가 느리면 사이트 순위에 나쁜 영향을 미칠 수 있으며 첫 페이지부터 사이트를 쉽게 Google에서 색인 생성에 실패할 수 있습니다. Google은 검색 알고리즘에서 사이트 순위를 매기는 방법에 대해 매우 엄격하며, 느린 로딩 시간으로 인해 사이트가 열악한 사용자 경험을 제공한다는 것을 알게 되면 사이트를 크롤링하고 Google 검색을 통해 검색 가능하게 만드는 문제조차 겪지 않을 수 있습니다. .

어떤 이미지 형식을 선택해야 합니까?

고품질 이미지는 최신 WordPress 웹 사이트에서 매우 중요하므로 사용할 형식, 사이트 성능에 미치는 영향 및 파일 선택을 최대한 활용하는 방법을 알아야 합니다.

웹 사이트에서 가장 많이 사용되는 두 가지 이미지 파일 형식은 PNG와 JPEG/JPG입니다. w3techs 에 따르면 모든 웹사이트의 70% 이상이 이러한 파일 형식을 사용합니다. 사이트의 약 30%는 SVG를 사용하고 22%는 GIF를 사용합니다.

여기에서 이미지를 업로드하는 데 사용하는 파일 유형이 중요한 역할을 하므로 이미지 파일 유형이 중요합니다. 다양한 파일 형식이 있으므로 아래에서 가장 인기 있는 형식과 장단점을 살펴보겠습니다.

파일 유형으로 넘어가기 전에 래스터와 비트맵 이미지가 무엇인지와 같은 몇 가지 개념을 먼저 이해해야 합니다. 압축이란 무엇입니까? 손실 압축과 무손실 압축의 차이점은 무엇입니까?

압축 – 손실 대 무손실

두 압축 유형 모두 파일 크기를 줄이는 것을 목표로 하지만 실제로 중요한 것은 제거하는 것입니다. 손실 압축에서; 이미지 품질과 관련된 중요한 데이터가 제거됩니다. 이것은 컴퓨터가 이미지를 재구성하는 데 문제가 있을 수 있으므로 경우에 따라 픽셀화되는 이미지에 반영될 수 있습니다.

무손실 압축에서는 이미지에 있는 관련 없는 데이터(예: 메타데이터)가 줄어들어 파일 크기를 줄이는 데 도움이 됩니다. 이 과정에서 이미지 품질은 전혀 영향을 받지 않습니다.

래스터 대 벡터

가장 일반적으로 사용되는 이미지 파일 형식은 일반적으로 래스터 기반입니다. 즉, 모든 픽셀과 연결된 고정 RGB 색상 값이 있고 해당 픽셀이 모두 결합되어 전체 이미지를 만드는 데 사용됩니다.

이러한 파일 형식의 예로는 jpg, png 및 gif가 있습니다.

또는 벡터 이미지는 픽셀화되지 않고 무한히 확장될 수 있는 모양과 선을 사용하여 생성됩니다. 벡터는 사용자가 이미지 품질에 영향을 주지 않으면서 값을 변경할 수 있도록 하는 수학 공식을 사용하여 생성됩니다.

이제 이미지의 기본 사항을 살펴보았으므로 이제 다양한 파일 형식의 세부 정보를 볼 수 있습니다.

JPEG:

압축된 이미지 데이터가 포함된 디지털 이미지 형식입니다. 10:1 압축 비율로 JPEG 이미지는 매우 컴팩트하여 사용됩니다. JPEG 형식은 중요한 이미지 세부 정보를 포함하며 인터넷에서 사진 및 기타 이미지를 공유하는 데 가장 널리 사용되는 이미지 형식입니다. JPEG 이미지의 파일 크기가 작기 때문에 사용자는 사이트에 추가 저장 공간 없이도 수천 개의 이미지(예: 아트 사이트)를 저장할 수 있습니다.

JPEG는 사진에 잘 작동하는 손실 압축 파일 형식이지만 PNG와 같은 그래픽 작업 시 다른 형식을 사용하는 것이 좋습니다.

JPEG 이미지 파일 예. 업로드 시 디테일과 품질이 유지된 것을 확인할 수 있습니다.

PNG:

PNG는 널리 사용되는 비트맵 이미지 형식이며 "Portable Graphics Format"의 약자입니다. 이 형식은 GIF(Graphics Interchange Format)의 대안으로 만들어졌습니다. PNG에는 24비트 RGB 색상 팔레트, 회색조 이미지 포함 및 투명한 배경 표시와 같은 몇 가지 훌륭한 기능이 있습니다. 무손실 데이터 압축 방법은 고품질 이미지 또는 그래픽 작업 시 PNG 이미지에서도 사용됩니다. PNG 이미지는 또한 기존 JPEG 형식보다 이미지에 대한 더 많은 제어 및 옵션을 사용자에게 제공할 수 있으므로 이미지 편집에 자주 사용됩니다.

PNG는 또한 무손실 압축 알고리즘을 사용하므로 이 형식이 JPG보다 더 많은 데이터를 보유할 수 있습니다. PNG 이미지 파일을 사용할 때 사용자는 이러한 이미지를 투명한 배경으로 저장할 수도 있습니다. 이 형식을 사용하여 사용자는 명확한 배경을 표시할 수 있는 레이어 이미지로 작업할 수 있습니다(예: 배경 벽이 아닌 아래 이미지의 꽃만). 사용자가 필요 없이 다른 이미지에 이미지를 추가할 수 있습니다. JPEG 이미지와 마찬가지로 잘라내고 기존 배경을 제거합니다. 이것이 다이어그램 및 일러스트레이션과 같은 그래픽에 선호되는 주요 이유 중 하나입니다. PNG는 표준 사진을 업로드하는 것보다 그래픽 작업을 하는 사용자에게 더 인기가 있는 것으로 알려져 있습니다.

PNG 이미지는 고품질을 유지하면서 이미지를 더 잘 제어할 수 있습니다.

GIF:

메시징 앱에서 전송되는 수많은 짧은 클립에서 "GIF"라는 용어를 가장 잘 알고 있을 것입니다. GIF는 "Graphics Interchange Format"의 약자로 주로 오디오 없이 애니메이션을 지원하는 데 사용됩니다.

JPEG 및 PNG와 달리 GIF는 더 틈새 시장에 사용되며 일반적으로 정적 이미지에 사용되지 않습니다(가능하지만). WordPress 사이트에서 GIF를 사용하는 경우 방문자에게 간단한 애니메이션이나 프로세스를 보여주기 위한 것일 가능성이 큽니다. GIF는 색상 범위가 제한되어 있으며 단순한 그래픽에 가장 적합합니다. 그들은 무손실 압축을 사용하며 JPG보다 작은 경향이 있습니다. 일반적으로 GIF는 로딩 시간을 증가시킬 수 있고(주어진 파일 크기) 256색으로 제한되므로 사이트에서 드물게만 사용하는 것이 좋습니다.

GIF 이미지의 예. 애니메이션 제작을 위해 원본 이미지의 품질을 크게 낮췄습니다.

SVG:

SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 형식입니다. JPEG와 같은 픽셀 기반 래스터 이미지 파일과 달리 벡터 파일은 그리드의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다. 즉, SVG와 같은 벡터 파일은 품질을 잃지 않고 크기를 크게 조정할 수 있으므로 로고 및 복잡한 온라인 그래픽에 이상적입니다.

벡터는 단순한 그래픽, 모양 및 일러스트레이션에만 가장 적합합니다. SVG는 특히 로고가 반응형이어야 하고 Chrome, Firefox, Edge 및 Opera를 포함한 대부분의 브라우저에서 지원되는 경우에 좋은 선택입니다.

로고에 사용할 SVG 형식의 해바라기 예.

BMP:

BITMAP은 이제 오래된 이미지 형식으로 간주됩니다. BMP는 압축 부족으로 인해 파일 크기가 커질 수 있는 무손실 이미지 형식으로 이미지를 로드합니다. 로딩 속도의 중요성과 사이트 작성자가 이미지 크기를 최소로 유지하려는 방식(SVG 및 JPEG 형식의 인기는 말할 것도 없고)을 고려할 때 이 형식은 온라인 이미지에 거의 사용되지 않습니다.

BMP 형식으로 업로드할 때 이미지의 원래 품질은 유지되지만 파일 크기가 사이트 속도를 크게 저하시키므로 권장하지 않습니다.

웹피:

이 이미지 형식은 2010년 Google에서 만들어졌으며 손실 및 무손실 압축 성능이 더 우수하다는 등 JPEG 및 PNG에 비해 몇 가지 장점이 있기 때문에 사이트에 많은 이미지를 업로드하는 사람들에게 인기를 얻기 시작했습니다.

또한 WebP는 향상된 압축 성능을 감안할 때 일반적으로 JPEG 또는 PNG 형식보다 작은 파일 크기로 업로드하고 사이트 공간을 덜 차지하므로 더 빠르게 로드할 수 있습니다. 모든 브라우저에서 지원되는 것은 아니지만 Chrome, Firefox, Edge 및 Opera를 포함하여 가장 널리 사용되는 모든 브라우저에서 지원됩니다.

JPEG 및 PNG만큼 잘 알려져 있지는 않지만 WebP는 미래에 선택되는 이미지 형식이 될 수 있습니다.

결론:

WordPress 사이트에서 사용할 수 있는 이미지 형식은 여러 가지가 있지만 이미지의 목적을 평가하는 것이 중요합니다. 예를 들어 귀하의 사이트가 웨딩 사진 작가를 위한 것이라면 여전히 빠르게 로드되고 사용자 친화적인( JPEG ) 고품질 이미지를 유지하기를 원할 것입니다 . 그러나 온라인 포스터 상점에서 이미지를 판매하는 경우 가능한 한 많은 세부 정보와 이미지 정보를 유지하기를 원할 것입니다( PNG ).

일반적으로 온라인 상점, 블로그, 포트폴리오, 소셜 미디어 또는 소셜 미디어 사이트에 표준 이미지를 업로드하는 경우 표준 JPEG 형식으로 이미지를 업로드한 다음 WP-Optimize를 사용하는 것이 좋습니다. 이미지를 더 압축하려면

그러나 이미지를 미래에 대비하고 로드 속도를 최대한 개선하려는 경우 WebP는 여전히 높은 수준의 세부 정보를 유지하면서 우수한 손실 및 무손실 압축을 제공할 수 있습니다. 무엇을 결정하든 항상 시장을 선도하는 압축을 위해 WP-Optimize를 사용하여 이미지를 압축하십시오.