이미지를 좋아하지 않나요?

읽는 동안 텍스트를 매력적인 경험으로 바꿀 수 있습니다. 이미지는 블로그 게시물을 향상시키고 더 공유할 수 있게 하며 전체 사이트의 분위기와 브랜드를 설정합니다.

그거 알아요? 우리는 이미지에 반응하도록 고정되어 있습니다. 이것이 이미지를 콘텐츠에 통합하는 것이 블로그 마케팅에 사용할 수 있는 강력한 도구인 이유입니다.

그러나 주의하지 않으면 이미지가 전체 웹페이지 크기의 절반 이상을 차지할 수 있습니다. 불과 몇 년 전만 해도 웹 페이지의 평균 크기는 600–700K였습니다. 현재 평균은 2MB이며 매년 증가하고 있습니다.

대단합니다!

이러한 현상이 발생하는 주된 이유는 웹페이지에서 여러 이미지가 더 자주 사용되기 때문입니다. 크기가 적절하지 않고 최적화되지 않았습니다. 즉, 웹 친화적인 방식으로 저장되거나 컴파일되지 않고 대신 페이지가 부풀어 오릅니다.

그러나 우리 대부분은 이미지 최적화는 나중에 생각하고 재미있는 일을 즐기고 싶어합니다. 장대한 게시물을 작성하거나 틈새 시장에서 다른 블로거와 네트워킹하는 것과 같습니다.

그러나 페이지 팽창은 페이지 로딩 속도에 영향을 미친다는 것을 의미합니다. 고속 연결을 사용하는 경우 이것이 큰 문제라고 생각하지 않을 수 있지만 많은 방문자는 그렇지 않습니다. 또한 Google은 느린 로딩 페이지를 좋아하지 않으며 SEO에 부정적인 영향을 미칠 수 있습니다.

이미지를 최적화해야 하는 이유

당신은멋진 콘텐츠를 만들고 블로그를 홍보하고 다른 블로거와 인맥을 쌓는 데 수많은 시간을 소비하므로 잠재 방문자가 웹사이트가 로드되기도 전에 이탈하는 것은 절대 원하지 않습니다!

연구에 따르면 최대 40%의 방문자는 사이트를 로드하는 데 3초 이상 걸리면 뒤로 버튼을 클릭합니다.

3초가 실제로는 그리 길지 않다는 것을 알고 있지만 모바일 연결 상태에서 사이트를 로드하려면 1초가 영원처럼 느껴질 수 있습니다.

그리고 많은 방문자가 느린 모바일 연결을 사용할 수 있으므로 페이지 크기를 줄여야 한다는 것이 분명해집니다. 그리고 우리는 이미 페이지 크기 팽창의 가장 큰 원인이 무엇인지 알고 있습니다. 바로 이미지입니다.

불필요하게 큰 이미지도 호스팅 계정의 공간을 차지합니다. 귀하 중 일부는 "무제한" 저장 공간으로 호스팅을 할 수 있지만 많은 프리미엄 호스팅 제공 업체는 하위 계층 요금제에서 약 10GB의 저장 공간으로 제한합니다. 특히 같은 계정에서 이미지가 많은 여러 사이트를 호스팅하는 경우 빠르게 채워질 수 있습니다.

그렇다면 이미지가 사이트 속도를 늦추고 있는지 어떻게 알 수 있을까요? Google PageSpeed ​​Insights로 사이트의 속도를 테스트하세요.

Google에서 최적화되지 않은 이미지를 문제로 보고하는 경우 문제를 해결하기 위해 알아야 할 사항은 다음과 같습니다.

이미지 최적화 기본 사항

블로그의 이미지를 최적화할 때 해야 할 몇 가지 사항이 있습니다.인식: 파일 유형, 이미지 크기 및 치수, 이미지 제공 방법 및 이미지 압축.

이러한 각 영역을 자세히 살펴보겠습니다.

파일 유형

웹상의 이미지는 일반적으로 PNG 또는 JPEG 파일 형식 또는 애니메이션용 GIF로 저장됩니다. 웹에 떠다니는 재미있는 애니메이션 GIF를 좋아하지 않는 사람이 어디 있겠습니까!

이제 기술적으로 괜찮습니다 이미지를 어느 형식으로든 저장하면 방문자의 브라우저가 웹 페이지를 표시하는 데 문제가 없습니다. – 그러나 최상의 품질과 최적화를 위해서는 다음 규칙을 따르십시오.

• JPEG – 사람, 장소 또는 사물이 등장하는 사진 및 디자인에 사용
• PNG – 그래픽에 가장 적합 , 로고, 텍스트가 많은 디자인, 스크린샷, 배경이 투명한 이미지가 필요한 경우
• GIF – 애니메이션이 필요한 경우에는 PNG

그래서 형식이 다른 이유 ?

음, PNG는 원본 이미지 품질을 유지하기 때문에 전통적으로 로고와 그래픽을 저장하는 데 사용됩니다. 아무도 흐릿한 텍스트와 픽셀화된 모양을 원하지 않습니다. 그러나 사진을 PNG로 저장하려고 하면 보기에는 멋질 것이지만 결과 파일 크기는 그다지 크지 않을 것입니다.

JPEG는 전통적으로 사진 저장에 사용됩니다. 파일 크기를 대폭 줄이기 위해 일부 이미지 데이터는 버려지지만 사진에는 다양한 색상과 자연스러운 변화가 포함되어 있기 때문에 품질 손실은일반적으로 사람의 눈에는 눈에 띄지 않습니다.

나중에 압축에 대해 자세히 알아보겠지만 지금은 사진용 JPEG와 텍스트/그래픽용 PNG 두 가지만 기억하세요.

이미지 크기

웹 페이지를 로드하고 작은 사진(예: 얼굴 사진)을 다운로드하는 데 시간이 걸리는 것을 본 적이 있습니까? 예를 들어, 너무 느려서 각 라인이 들어오는 것을 볼 수 있습니까? 어떻게 그렇게 작은 이미지를 다운로드하는 데 이렇게 오래 걸릴 수 있을까요?

그리고 큰 헤더 이미지가 발생하면 전체 페이지 로드를 지연시킬 수 있기 때문에 더 안타깝습니다.

이러한 현상이 발생하는 이유는 블로거가 이미지의 크기를 적절하게 조정하고 최적화하지 않았기 때문이며, 헤드샷 예시의 경우 DSLR 카메라에서 직접 전체 해상도 JPEG를 업로드했을 수 있습니다.

거대한 파일입니다!

웹 브라우저는 (보통) 이미지를 웹 페이지의 해당 위치에 잘 맞도록 원래 크기에서 크기를 조정합니다. 화면에는 작은 이미지로 보이는 것이 실제로는 브라우저에 의해 실시간으로 축소되는 거대한 10메가픽셀 사진일 수 있습니다.

이제 일부 웹 게시 플랫폼은 자동으로 전체 해상도 이미지의 다양한 변형을 다양한 형태로 생성합니다. 하지만 그렇지 않은 경우 Photoshop, Lightroom, Pixlr 또는 심지어 MS Paint와 같은 이미지 편집기에서 미리 이미지 크기를 조정해야 합니다. 차이를 의미할 수 있습니다50K 파일과 5MB 파일 사이입니다.

예를 들어 WordPress는 업로드된 이미지의 복사본을 3개(테마에 따라 그 이상) 자동으로 생성합니다. 이 복사본은 모두 다른 크기로 사용할 수 있습니다. 항상 전체 크기의 이미지를 사용하는 것보다 블로그 게시물에서.

대량의 스톡 사진 이미지를 업로드하는 습관이 있고 호스팅 계정의 공간을 절약하고 싶다면 WordPress 플러그인 Imsanity가 뒷짐을 지고 있습니다.

원본 이미지의 크기를 조정하고 좀 더 다루기 쉬운 것으로 대체하므로 전체 크기의 이미지를 게시물에 삽입해도 나쁘지 않습니다.

활성화되면 Imsanity는 기존 이미지를 검색하고 그에 따라 크기를 조정할 수도 있습니다.

이미지 제공

방문자에게 이미지를 제공하는 방법은 이미지 자체를 최적화하는 것이 아닙니다. , 하지만 페이지 로드 시간에 큰 영향을 미칠 수 있습니다.

대부분의 블로거는 호스팅 계정에서 바로 이미지를 제공하며 일반적으로 괜찮습니다. CDN(Content Delivery Network)에서 이미지를 호스팅하면 큰 차이를 만들 수 있습니다.

CDN은 전 세계 데이터 센터에 전략적으로 배치된 웹 서버로 구성됩니다. 이 서버는 이미지의 복제본을 호스팅하고 방문자의 브라우저가 웹사이트에서 이미지를 요청하면 CDN은 자동으로 브라우저를지리적으로 가장 가까운 서버입니다.

즉, 예를 들어 유럽 방문자는 미국이나 다른 지역이 아닌 로컬 유럽 서버에서 제공되는 이미지를 받게 됩니다. 응답 시간과 네트워크 대기 시간이 줄어들기 때문에 이미지 다운로드 속도가 훨씬 빨라져 페이지 로드 시간이 줄어듭니다.

Blogging Wizard는 Sucuri(보안을 위한 방화벽과 CDN 포함)를 사용하지만 다른 품질 공급자가 있습니다. Amazon의 Cloudfront 또는 KeyCDN과 같습니다. 엄밀히 말하면 CDN이 아닌 인기 있는 CloudFlare도 CDN을 무료로 제공하며 대부분의 공유 호스팅 패키지에서 쉽게 설정할 수 있습니다.

이미지 압축

이미지, 고급 손실 이미지 압축보다 파일 크기를 줄이는 것은 없습니다.

Visme 또는 Photoshop과 같은 대부분의 이미지 편집 도구는 파일 크기 감소가 가장 좋기 때문에 손실 JPEG 압축을 사용하여 파일을 저장합니다. 따라서 이미지 품질은 약간 떨어지지만 손실 이미지 압축을 사용하면 큰 이미지가 웹에 적합한 크기로 줄어듭니다.

Photoshop을 사용하는 많은 사용자가 웹용으로 저장 기능을 볼 수 있을 것입니다. 이미지 최적화의 전부이자 끝입니다. 그리고 PicMonkey 또는 Visme와 같은 온라인 이미지 편집 도구도 이미지를 최적화합니다.

그러나 Photoshop 또는 기타 편집 도구에서 "최적화된" 이미지를 가져오고 크런치하고 압축할 수 있는 도구가 있다는 것을 알고 계셨습니까? 추가로 40%(또는 그 이상), 여전히 사람의 눈과 거의 동일하게 보입니까?

다음은 이미지를 웹에 적합한 상태로 만드는 데 도움이 되는 무료 및 유료 도구입니다.

데스크톱 도구

ImageAlpha / ImageOptim

Mac 사용자의 경우 ImageOptim은 PNG 이미지(주로 스크린샷)를 업로드하기 전에 최적화하기 위해 매일 사용하는 무료 데스크톱 도구입니다. 이러한 도구는 사용하기 쉽고 파일을 드래그 앤 드롭하기만 하면 되지만 한 번에 하나의 이미지를 수행해야 합니다.

프로 팁 : 기술에 정통한 사람을 위한 ImageOptim– 이미지의 전체 폴더를 한 번에 최적화할 수 있는 CLI.

ImageAlpha는 손실 PNG 압축기이며 PNG 파일 축소에 놀라운 일을 할 수 있는 반면 ImageOptim은 고급 무손실(손실 옵션 포함) 압축을 수행합니다. PNG, JPEG 및 GIF 파일에서 불필요한 메타데이터를 제거합니다.

내 PNG 이미지의 경우 먼저 ImageAlpha를 통해 이미지를 실행합니다.

여기서 스크린샷 이미지가 103K에서 28K로 줄었습니다.

그런 다음 ImageOptim을 통해 실행하여 10%를 추가로 절약했습니다.

JPEGmini

JPEG 파일의 경우 사용 가능한 데스크톱 JPEGmini 앱으로 최적화합니다. Mac과 Windows 모두에서 사용할 수 있습니다.

라이트 버전을 사용하면 하루에 최대 20개의 이미지를 무료로 최적화할 수 있으며 한도를 제거하는 데 $19.99의 비용이 듭니다.

프로 팁 : 플러그인을 통해 JPEGmini를 Photoshop 또는 Lightroom에 통합하려는 고급 사용자는 다음을 위해 Pro 버전을 구입할 수 있습니다.$99.99.

온라인/클라우드/SaaS 도구

TinyPNG

고품질 온라인 이미지 압축 도구를 찾고 있다면 TinyPNG(JPEG 최적화 파일도 이름에도 불구하고)는 최대 20개의 5MB 이하 이미지를 브라우저로 드래그하고 한 번에 최적화할 수 있는 웹 앱입니다.

또한 개발자 API가 있으며 WordPress를 만듭니다. 업로드 시 이미지를 자동으로 최적화할 수 있는 플러그인을 사용할 수 있습니다.

TinyPNG는 매달 500개의 무료 이미지 최적화를 제공하며 그 이후에는 볼륨에 따라 이미지당 $0.002–0.009의 비용이 청구됩니다.

이제 500개 월별 이미지가 많은 것처럼 들릴 수 있지만 WordPress가 다양한 크기의 각 이미지에 대해 3~5개의 변형을 만드는 경우가 많다는 사실을 고려할 때 500개의 이미지가 다작 블로거에게 그렇게 많은 것 같지는 않습니다. 운 좋게도 이미지당 비용은 예산에 적합합니다.

EWWW Image Optimizer

돈을 쓸 준비가 되어 있지 않고 최적화에 신경쓰고 싶지 않은 경우 이미지를 수동으로 업로드하면 WordPress용 무료 EWWW Image Optimizer 플러그인이 업로드된 이미지를 자동으로 최적화할 수 있습니다.

손실 압축을 수행하는 프리미엄 구독을 선택할 수 있지만 무료 버전은 무손실 압축만 수행하므로 비용 절감은 ' t 거의 상당합니다. 그래도 시간을 절약할 수 있고 없는 것보다 낫습니다.

참고: 전체 개요를 확인하려면 다음을 확인하세요.이미지 압축 도구에 대한 게시물입니다.

결말

일부 사람들은 2017년까지 평균 웹페이지 크기가 3MB에 근접할 것으로 예상하므로 지금이 이미지 최적화를 시작할 때입니다.

모든 방문자가 고속 연결을 사용하는 것은 아니며 페이지 팽창 및 느린 페이지 로드 시간이 잠재적으로 Google 순위에 영향을 미칠 수 있습니다. 말하자면 부담을 덜기 위해 오늘 이미지를 최적화하는 습관을 들이십시오.

이미지 크기에 주의를 기울이고 너무 큰 스톡 사진이나 디지털 카메라의 이미지를 적절한 크기로 조정하세요. 크기.

다음으로 JPEGmini와 같은 데스크톱 앱이나 TinyPNG 또는 Kraken과 같은 클라우드 도구를 사용하여 최신 이미지 압축을 활용하세요. 가능한 경우 플러그인을 사용하여 WordPress에 통합하세요.

마지막으로, 게시 플랫폼은 원본 이미지의 크기가 조정된 변형을 자동으로 생성합니다. 블로그 게시물에 원본 전체 크기가 아닌 이 중 하나를 선택하십시오.

관련 자료: PDF 파일의 크기.