l3khub.com

블로그 이미지 최적화 하기

이번 글에서는 블로그 포스팅을 할 때 삽입하는 이미지를 용량이 작으면서도 화질에 영향이 없도록 변환하는 방법에 대해서 알아보도록 하겠습니다. 선명한 화질에 용량이 작은 이미지는 SEO에도 긍정적 영향을 미치기 때문에 꼭 알아두시면 도움이 될 것입니다. 

블로그-이미지-최적화하기-썸네일

블로그 이미지 최적화 하기




여러분은 블로그에 그림을 삽입할 때 어떤 포맷을 사용하시나요? JPEG, PNG, WebP 등 많은 이미지 포맷이 있고 각각의 장단점이 있지만, 이 중에서도 WebP 포맷은 구글에서 JPEG와 PNG의 장점만을 모아 만든 이미지 포맷입니다. 이번 글에서는 각 이미지 포맷의 장단점을 알아보고 WebP로 쉽게 변환하는 방법에 대해서 설명하도록 하겠습니다.

1. JPG, PNG, WebP 포멧의 장단점 비교

형식 장점 단점
JPEG
  • 널리 지원되고 호환성이 좋음
  • 복잡한 이미지에 대해 작은 파일 크기
  • 사진과 현실적인 이미지에 적합
  • 조정 가능한 압축 수준
  • 손실 압축으로 인한 품질 저하 가능
  • 투명성에 대한 제한적인 지원
  • 아티팩트 및 세부 정보 손실
PNG
  • 무손실 압축으로 이미지 품질 유지
  • 투명성을 완전히 지원
  • 날카로운 모서리를 가진 그래픽에 적합
  • 가변 투명도 수준 지원
  • 복잡한 이미지의 큰 파일 크기
  • 고급 기능에 대한 제한적인 지원
  • 사진에 최적화되지 않음
WebP
  • 좋은 이미지 품질로 작은 파일 크기
  • 손실 및 무손실 압축 모두 지원
  • 투명성 및 애니메이션 지원
  • 웹 및 모바일 애플리케이션에 적합
  • 오래된 브라우저에서의 제한적인 지원
  • 일부 응용 프로그램에서의 제한적인 호환성
  • 높은 압축률에서 압축 아티팩트* 발생
  • 제한된 편집 도구 및 소프트웨어 지원

2. WebP 이미지 포맷으로 쉽게 변환하기

이미지 포맷을 변환하거나 용량을 줄이는 방법은 여러가지가 있습니다. 이미지 용량을 줄이는데 가장 많이 쓰이는 방법은 tinypng.com 사이트에서 파일들을 드래그 앤 드롭하는 방법입니다. 그러나 이 방법은 사이트에 들어가서 파일들을 업로드 하고 압축된 파일을 다시 다운로드해야 하기 때문에 조금 번거롭습니다. 

또 다른 방법으로는 무료로 사용할 수 있는 PhotoScape를 활용하는 방법입니다. 
PhotoScape는 파일별로 또는 일괄로 파일 타입과 화질을 설정할 수 있어 편리하게 사용할 수 있지만 프로그램을 실행해야 하는 번거로움이 있습니다.

포트스케이프를-활용한-WebP파일-변환

오늘 제가 소개해 드릴 방법은 꿀뷰(Honeyview)를 사용하여 tinypng.com과 PhotoScape보다 훨씬 간단하고 편리하게 용량이 작으면서 화질이 떨어지지 않는 WebP 이미지 포맷으로 변경하는 방법입니다. 

우선 https://www.bandisoft.com/honeyview/ 사이트에서 꿀뷰를 다운로드 후 설치합니다.

반디소프트-홈페이지에서-꿀뷰-다운로드-및-설치

설치가 완료되었다면 윈도우 파일탐색기를 실행해서 변환할 파일이 있는 폴더로 이동합니다. 

윈도우탐색기로-파일이-있는-폴더로-이동하여-파일선택후-마우스오른쪽키-클릭

원하는 파일 위에서 마우스 오른쪽키를 클릭하여 나오는 메뉴에서 "꿀뷰로 변환(2)"를 선택하면 아래와 같은 포맷변환 화면이 나오는데 여기서 WebP와 70%를 선택하고 시작을 클릭하면 WebP로 변환이 완료됩니다 (제가 실행해 보니 70% 정도로 해도 화질에 큰 차이가 없었습니다)

꿀뷰에서-WebP-포맷으로-변경

만약 여러파일을 한번에 변환할 때는 아래와 같이 변환할 모든 파일을 마우스로 선택한 후 마우스 오른쪽키를 눌러 "꿀뷰로 변환(2)"를 클릭합니다.

변환할-여러파일을-한번에-선택

그 후 아래와 같은 창이 나오면 여기서 "시작"을 클릭합니다. 

변환할-모든파일을-한번에-변환

꿀뷰를 사용하면 tinypng.com에 들어가서 드래그 앤 드롭을 하거나, 포트스케이프와 같이 프로그램을 실행할 필요없이 윈도우 파일탐색기에서 간단한 조작으로 여러파일을 일괄로 변경할 수 있습니다. 

일괄로-WebP-이미지-포맷으로-변경된-파일들


오늘은 위와 같이 쉽고 편하게 블로그 이미지를 최적화하는 방법에 대해서 알아보았습니다. 블로그 이미지가 커서 고민이시거나 tinypng.com 이 번거롭다고 느껴지신다면 꿀뷰를 활용해 보세요. 상당히 편하다는 것을 느끼실 것니다. 


*아티팩트는 이미지나 영상 압축 과정에서 발생하는 비정상적인 변경 또는 불완전한 표현을 의미합니다. 압축 알고리즘은 데이터의 크기를 줄이기 위해 정보를 일부 손실하거나 변형할 수 있습니다. 이로 인해 이미지나 영상에 일부 품질 손실이 발생할 수 있습니다. 
아티팩트는 주로 압축 알고리즘의 결과물로 나타나는데, 일반적인 아티팩트 유형으로는 블록화, 블러링, 계단 현상, 색상 변형, 경계 불명확성 등이 있습니다. 이러한 아티팩트는 이미지나 영상의 세부 정보나 원래의 품질을 일부 손상시킬 수 있습니다.




To Top