블로그 이미지 파일 JPG VS PNG VS WEBP 어떤것이 좋을까?

블로그 이미지 파일JPG , PNG, WEBP, CDN 어떤 것을 사용하는 것이 더 블로그 최적화에 , 상위노출에 도움이 될까요?

1. 블로그 이미지 파일 장단점

오늘은 블로그의 이미지 파일 사용에 있어서 각각 이미지 파일의 특성과 장단점을 명확히 비교해 보도록 하겠습니다. 과연 어떤 이미지 파일을 사용하는 것이 좋을까? 결정하시기 이전에 명확한 그 정의부터 확실히 찾아보도록 하겠습니다.

---

1.1.JPG 파일 VS JPEG?

 

JPG 정의

 

가장 보편적으로 많이 사용하게 되는 이미지 파일 포맷입니다. 일반적으로 파일 크기가 작은 편이라 빠르게 전달되기도 하고 , 접근도 가능한 파일입니다. 우선은 JPG파일과 JPEG파일은 어떤 차이가 있을까요? JPG파일과 JPEG파일은 사실 같은 파일이라고 하기도 하고 차이가 있다고 하기도 합니다. 이 고유명칭은 통합사진 전문가단체에서 개발하게 되었던 이미지 파일유형으로 알려져 있는데요. 사실 고유명칭은 영어로 파일이름의 풀네임을 떠올리신다면 맞습니다. 즉 '통합 Joint' 사진 'Phptographic'  전문가 'Experts' 단체 'Group'으로 부를 수 있습니다.

'손실압축 방법'의 표준으로 알려져 있습니다. 웹표준 확장자명은 'JPEG'가 아닌 'JPG'라고 합니다. 표기법의 차이인 것인데요. 이는 과거 확장자명에서 글자수 제한 으로 인해서 이렇게 통합되어 표준표기가 되어왔다고 전해지기도 합니다. 최근엔 거의 JPG로 통합되어 사용된다고 볼 수 있습니다.

 

JPG 단점

아무래도 '손실압축' 방식이라는 것이 단점이라면 단점이 되겠지요? 크기나 용량을 줄이기는 하지만, 이때 이미지 변환과 압축의 방법에서는 선이나 문자 표현을 뭉개며 줄여 주기 때문에 크기와 용량에 초점을 맞추신다면, 제법 유용하게 활용할 수 있으나 이미지와 사진의 퀄리티, 질적인 면에서 보신다면 좋지 않습니다. 이미지 파일의 용량이 적은 순서로 본다면 GIF < JPG < PNG 정도로 볼 수 있습니다.

 

1.2.PNG 파일

 

PNG 이미지 파일은 어떤 특징이 있을까요? PNG파일은 풀네임으로 보자면 'Portable Network Graphic' 파일로 특징지어집니다. 투명이나 반투명 배경의 그래픽 처리가 가능하다는 점이 가장 특징적인 점이고, 이러한 점에서 디자인을 하시는 경우 많이 사용하시게 되는 파일의 하나입니다.

 

PNG 장점

 

PNG파일의 가장 큰 장점은 무손실 압축 포맷으로 투명도를 조절할 수 있는 것에서 가장  훌륭한 파일형식으로 표현됩니다. 이는 GIF는 특정 하나의 색만으로 투명으로 지정, 반면 PNG파일의 경우는 완벽하게 불투명도 표현이 가능하다는 것이 최고의 장점입니다. 다른 파일을 비교하자면 JPG는 투명조절 기능이 전혀 없고, GIF는 투명이 되기는 하나 반투명이 되는 것은 PNG와 WebP 정도밖에 없습니다.

 

초기 인터넷 그림파일은 GIF 이미지를 사용하였으나, GIF문제점들을 개발하고 수정, 보완 하기 위해 만들어진 것으로 나온 것입니다. 상대적으로 압축에 있어서 압축효율이 좋은 파일로 선호되는 편이며, 그래도 손실압축에 의한 이미지 영향도는 적다고 볼 수 있습니다. 다만 웹상에서는 대부분 압축률이 더 좋은 JPG파일을 더 많이 사용하는 편입니다.

 

PNG단점

무손실 이미지 형태라 다른 이미지 포맷에 비해서 용량이 상대적으로 큰 편이라고 합니다. 따라서 블로그에서 사용하시기에는 용량이 적은 것이 아무래도 유리하니, PNG를 사용하기엔 적합한 요소가 없으리라 봅니다. 그렇다고 디자인을 위한 투명도를 손대어서 블로그 이미지 운영을 하시는 것은 아닐 테니 말이지요.

 

2. 블로그 이미지 파일

---

2.1. 가벼워야 한다

블로그 이미지 파일에서의 가장 중요한 것은 아마도 SEO최적화에 맞게 업로드한다면 첫 번째로는 '가벼움' '적은 용량'이 아닐까 생각합니다. 블로그에서 점수를 높게 받는 것은 아무래도 블로그 로딩 속도와 가벼운 블로그이어야만 더 좋은 평가를 받기 때문입니다.

 

2.2.JPG VS PNG 파일 적용

 

물론 이는 사용자의 선택입니다. 다만 블로그에서 다른 멋진 웹사이트나 홈피처럼 디자인 기능을 강조하면서 투명도나 불투명도를 활용하신다면 당연히 PNG파일이 더욱 유용할 것입니다. 하지만 대부분 블로그에서는 콘텐츠 내용의 이해를 돕기 위한 수단으로 보조적으로 이미지를 사용하기 때문에, 참고자료로 가볍게 이미지를 넣는 작업으로 사용하신다면 JPG를 사용하시는 것이 더 유리할 것으로 생각됩니다.

 

3.Webp 특징과 장단점

---

3.1.Webp 정의

Webp파일은 아직은 모든 브라우저에서 다 나타나지는 않는 것 같습니다. 다만 ,  Webp 파일은  상대적으로 월등한 압축률을 보이는 이미지 파일로 블로그 로딩 속도도 상당히 빠르며 데이터 용량도 적게 차지하는 파일이라 블로그에서 이미지로 사용하기에 괜찮은 옵션입니다.

Webp 장점

장점으로는 무엇보다 높은 압축률입니다. 용량이 상당히 많이 줄어들 수 있기 때문에 다른 이미지 파일과는 비교가 되지 않는 장점이 있습니다. 다만 Webp의 큰 단점도 아직은 있습니다.

 

Webp단점

가장 큰 단점은 아직 지원이 되지 않는 브라우저들이 있다는 것입니다. 기본적으로 크롬이나 모바일 브라우저 같은 곳에서는 문제가 없지만, 이러한 부분들이 걱정이 되신다면 그냥 JPG, 또는 PNG 파일로 사용하시는 것이 더 좋을 수도 있겠습니다. 자세한 글은 아래를 참고해 보시기 바랍니다. 저의 경우에는 webp를 주로 사용하는 편입니다. 내용은 아래를 확인해 보세요.

2023.03.01 - [블로그 운영/티스토리] - 블로그 사진 webp , 웹피로 제작하면 장점이 많을까?

블로그 사진 webp , 웹피로 제작하면 장점이 많을까?

 

 

4.CDN 정의 및 장단점

---

4.1.CDN이란?

 

사실 티스토리 블로그나 네이버 블로그를 운영하시는 경우에는 호스트 등의 서비스를 유료로 사용하시는 것이 아니기 때문에 용량에 대한 걱정을 하실 필요가 없습니다. 저의 경우에는 워드프레스 블로그를 운영하기 때문에 용량을 줄이는 목적으로 CDN을 사용하고 있는데요. CDN서비스는 호스트 서버용량을 줄여주기도 하지만, 블로그 자체에 부하를 주지 않기 때문에 블로그 로딩 속도를 올려 주어서 블로그 지수를 높이는데도 도움을 주게 됩니다. 아래 정리해 보도록 하겠습니다.

• 서버용량의 부하를 줄여 줍니다.
• 사이트 로딩 속도를 올려 줍니다.
• 서버용량을 적게 사용하여 호스트 비용을 절감해 준다.
• CDN이용만으로 보안등급이 올라간다

CDN에 대한 자세한 정보는 아래글을 참고해 보시기 바랍니다. 여기서는 카페 24 호스트를 사용하시는 경우의 워드프레스에서 적용하여 이미지를 전송해 주는 방식으로 카페 24 호스팅 비용에 부하를 주지 않는 장점을 설명해 보았습니다.

2023.03.25 - [블로그 운영/블로그 고급설정] - CDN적용법, 워드프레스 웹하드 용량 줄이는 방법

CDN적용법, 워드프레스 웹하드 용량 줄이는 방법

다른 블로그에 대해 궁금하시다면 아래를 참고해 보시기 바랍니다.

[블로그 운영/블로그 고급설정] - 애드센스 고수익 비법_내부링크를 현재 창으로 열게 설정

[블로그 운영/블로그 고급설정] - 블로그 제목 작성의 비밀 - 블로그 글쓰기 원칙

[블로그 운영/티스토리] - 티스토리 사이드바 광고, 멀티플렉스 광고 적용방법

티스토리 사이드바 광고 , 멀티플렉스 광고 적용방법

블로그 제목 작성의 비밀 - 블로그 글쓰기 원칙

애드센스 고수익 비법_내부링크를 현재 창으로 열게 설정