포토샵으로 webp 생성

어드비 포토샵은 23.2 부터 webp 포맷을 완변하게 지원하고 있습니다. 별도의 플러그인이나 설정없이 이미지를 webp로 생성하거나, webp 파일을 열어서 편집할 수 있습니다.

편집한 이미지를 webp로 저장하는 방법을 간단하게 살펴보면 아래와 같습니다.

1. 파일->사본 저장 클릭

2. 사본저장 창의 파일형식 스크롤메뉴에서 webp를 선택

3. 파일명 입력 후 저장 버튼을 누른 후 나오는 webp 옵션창에서 필요한 옵션을 선택하거나 조정하여 저장하면 완료

① 손실 없음은 png와 같은 무손실 압축을 의미합니다. webp는 무손실 압축의 경우 png보다 파일사이즈가 26% 더 작다고 합니다.

② 손실 을 선택하는 경우 jpg처럼 손실 압축으로 이미지를 저장합니다. 동등한 수준의 품질이라면 jpg에 비해 25%~34% 더 작다고 합니다. 품질은 50~75 사이면 블로그용으로 사용하기에 무리가 없습니다.

보다 자세한 내용은 어도비의 “Photoshop에서 WebP 파일 작업하기” 페이지에서 자세한 내용을 확인할 수 있습니다.

다른 포맷의 파일을 webp로 변환하는 방법

webp 로 이미지를 새로 생성하는 방법 외에도 기존 이미지 파일을 webp 포맷의 파일로 변환하는 것도 가능합니다.

바로 구글에서 제공하는 웹앱 Squoosh를 이용하는 방법과 가벼운 이미지 뷰어로 인기있는 꿀뷰를 이용하여 webp로 변환하는 방법 입니다.

Squoosh

구글에서 제공하는 웹 앱 squoosh를 이용하면 다른 포맷과 혹은 webp 압축 옵션에 따라 미리보기를 통해 직관적으로 비교할 수 있어 효과적으로 용량 대비 품질을 조정할 수 있습니다.

1. https://squoosh.app/ 에 접속합니다. 별도의 회원가입이나 로그인 없이 바로 이용할 수 있습니다.

2. 변환할 이미지를 불러옵니다. ① 의 아이콘을 눌러 직접 이미지를 불러오거나, ② “Paste” 눌러 클립보드에 복사한 이미지를 불러오거나, ③ 변환하려는 파일을 squoosh 을 열어놓은 브라우저 창에 끌어다 놓으면 됩니다.

3. 이미지를 불러오면 아래 화면과 같이 중앙의 ④구분선을 기준으로 Ⓐ,Ⓑ로 나누어져 있습니다.

구분선은 마우스로 클릭하여 좌우로 ⑤이동 가능합니다. 마우스휠이나 ⑥메뉴를 이용해 화면을 확대, 축소 할수 있습니다.

원본과의 비교뿐만 아니라, Ⓐ,Ⓑ 양쪽에 각각 다른 포맷과 압축옵션, 사이즈를 적용해 서로 비교해 볼 수 있습니다.

4. 패널에서 원하는 옵션을 조정해줍니다. 기본적인 사이즈 조정에서부터 알파채널에 대한 압축 옵션까지 설정이 가능합니다.

5. 옵션을 조정해 결과를 확인한 후 저장합니다. 좌우 하단에 버튼 ⑦, ⑧을 눌러 저장합니다.

파일은 Ⓐ, Ⓑ 양쪽 모두 각각 저장할 수 있습니다.

꿀뷰

이미지 뷰어로 많은 분들이 사용하시는 꿀뷰로도 jpg나 png 이미지를 간단하게 webp로 변환할 수 있습니다.

혹시 꿀뷰가 설치되어 있지 않다면 반디소프트( https://kr.bandisoft.com/honeyview/ )에서 다운 받을 수 있습니다.

1. 원하는 이미지를 꿀뷰로 불러옵니다.

2. ①편집을 누른후, 펼쳐진 메뉴에서 ②이미지 변환을 클릭합니다.

파일을 마우스 오른쪽 클릭해 펼쳐진 메뉴에서 꿀뷰로 변환이나 꿀뷰로 보기를 눌러 불러올 수도 있습니다.

3. 저장이미지 포맷⑤에 스크롤 메뉴를 클릭하여 변환하려는 webp를 선택한 후 품질을 선택합니다.

필요한 경우 이미지 회전③이나 사이즈 변경④ 및 저장위치 설정⑥이 가능합니다.

4. 하단의 시작 버튼을 누르면 변환이 완료됩니다.

그 외 webp로 변환하는 방법

그외에도 Convertio 등과 같이 웹을 통해 제공되는 변환서비스들도 있습니다.

보통 변환할 수 있는 이미지 갯수에 제한이 있지만, 블로그 포스팅 용도로 사용하기에는 부족하지는 않을 것 같습니다.

다만, webp로 변환하는 목적이 이미지 파일의 용량을 줄이는데 있는만큼 최대 효율의 용량 감소를 위해서는 Squoosh와 같이 압축 옵션에 따른 이미지 품질 변화를 바로 확인할 수 있는 툴을 이용하는 것이 더 유용하리라 생각됩니다.

The post webp로 변환하는 방법 Squoosh 꿀뷰 appeared first on 하우소.

블로그 이미지 용량 줄이기 그 이유는?

워드프레스로 블로그 운영을 시작하면 보통은 한동안 검색을 통한 방문자가 없습니다.

글을 발행하는게 이제 아주 조금이나마 살짝 익숙해지는 어느 시점에선가 그 고요함과 적막함이 느껴지는 순간이 불현듯 찾아 옵니다.

왜 방문자가 없을까? 어떻게 하면 방문자가 늘어날까? 고민하면서 마치 기우제를 드리는 마음으로 이것저것 하나둘 뒤져보고 손보게 됩니다.

구글 페이지스피드 인사이트

아마 그때 제일 먼저 눈에 들어오는게 페이지스피드 인사이트( 바로가기 : https://pagespeed.web.dev/ ) 가 아닐까 싶습니다.

페이지스피드 인사이트는 구글 SEO 의 웹성능 지표인 코어 웹 바이탈을 분석할 수 있도록 구글에서 제공하는 측정도구입니다.

성능, 접근성, 권장사항, 검색엔진 최적화 총 네가지 지표에 대해 수치로 분석하고 개선사항을 안내해줍니다.

성능을 제외한 접근성이나 권장사항, 검색엔진 최적화 3개의 항목은 인간이 어느 정도 이해할 수 있는 언어로 되어 있기 때문에 어찌어찌 점수를 끌어올릴수 있었습니다.

하지만 성능 항목에 대한 개선 사항은 좀처럼 이해하기 어려운 말로 되어 있어 개선에 어려움이 있었습니다. 딱 한가지 빼고요.

컨텐츠가 포함된 최대 페인트 요소 (LCP)

바로 LCP(Largest Contentful Paint) 입니다. 페이지스피드 인사이트 페이지에선 컨텐츠가 포함된 최대 페인트 요소 라고 표현되어 있습니다.

직관적으로 이해하기 어려운 용어였는데, 검색해보니 이미지 또는 텍스트 블록과 같은 웹 페이지의 가장 큰 부분을 로드하는 데 걸리는 시간을 의미한다고 합니다.

그리고 LCP의 개선을 위해선 CDN 을 이용하거나, 지연로딩을 구현하거나, 이미지의 파일사이즈를 줄이는 최적화가 필요하다고 합니다.

CDN도 모르고 지연로딩도 모르지만 일단 이미지 용량을 줄이는 건 할 수 있잖아요? 그럼 해야죠.

블로그 이미지 용량 줄이기 좋은 포맷

일단 이미지가 많이 포함된 글을 하나 선택하고 포함된 이미지를 다시 작업해 교체했습니다.

화면캡쳐한 걸 그대로 사용하다보니 화면캡쳐 기본 포맷인 png로 이미지들이 업로드되어 있었습니다.

png 형식은 무손실 압축 이미지 포맷이기 때문에 동일한 품질의 jpg에 비해 사이즈가 큽니다.

jpg는 사이즈가 작은만큼 품질이 낮음

우선 사이즈를 줄이고 품질을 낮춰 jpg로 저장하여 교체한 후 페이지인사이트에서 측정해보니 효과가 있습니다.

성능 항목의 스코어가 큰 폭으로 상승했습니다. 하지만 만족스럽지 않았습니다.

스코어 표시는 여전히 주황색인데다 용량만 생각해서 품질을 극단적으로 낮췄더니 이미지가 구립니다. 어차피 구리다면 용량이라도 더 작았으면 좋겠습니다.

새로운 포맷 avif, heic, webp의 호환성

검색해보니 jpg에 비해 압축률이 높은 새로운 이미지 포맷이 있었습니다. avif, heic, webp 세가지 였습니다.

그 중 avif와 heic 는 webp에 비해서도 압축률이 더 높지만, 비교적 최근 발표된 포맷으로 아직은 웹환경에서의 호환성이 좋지 않았습니다.

그에 반해 webp는 다른 두 포맷에 비해 나온지 오래된 포맷이라 이제는 거의 모든 웹브라우져에 호환이 가능합니다.

jpg나 png 만큼은 아니어도 다른 두 포맷에 비해서는 생성이나 변환이 수월한 편입니다. 포토샵에서도 23.2 버전부터 webp를 완벽하게 지원합니다.

구글에서 제공하는 Squoosh ( https://squoosh.app/ ) 를 이용해 쉽게 변환도 가능했습니다.

블로그 이미지 용량 줄이기 결과

페이지스피드 인사이트에서의 성능지표 스코어가 jpg에 비해서도 대폭 상승했습니다.

스코어를 100점까지 맞출수 있다면 좋겠지만, 현재로선 여기까지가 한계가 아닐까 싶습니다.

나중에 블로그가 좀 더 자리를 잡으면 그때 최적화가 잘될 유료 테마를 구매하는 것도 좋은 방법이 아닐까요?

webp로 변환하는 방법은 “webp로 변환하는 방법 Squoosh” 이 글을 참고해주세요.

The post 블로그 이미지 용량 줄이기 위한 가벼운 이미지 포맷 webp appeared first on 하우소.