webp(웹피)란 무엇인가?
인터넷을 하다 보면 저장하고 싶은 이미지가 있으신데,
그럴 때 막상 다운받아 보면 생소한 확장자에
이게 뭐지 하는 파일을 보게 되실 때가 있습니다.
바로 ".webp" 인데요.
크롬브라우저에서 많이 들 볼 수가 있습니다.
거의 뭐 익스플로러를 제외하고는 모든 곳에서 지원을 하는 방향입니다.
구글에서 2010년 만든 이미지포맷이죠.
읽기로는 "웹피"라고 합니다.
속성을 보시면 확장자가 .webp라고 되어있죠?
이걸 만든 이유를 아시나요?
헝~! 놀라실 겁니다.
구글서버에 들어가는 바로 돈 때문입니다.
구글은 엄청난 인터넷 트래픽을 사용하며
웹을 운영하는데 이미지 포맷의 최적화만 하더라도
어마어마한 자금과 서버의 속도를 올릴 수 있기에
이 "webp"를 개발하였습니다.
[png, webp, jpg 용량차이 비교]
실제로도 압축정도에 따라
퀄리티 대비 용량이 확 줄며
웹상에 사용하기에 JPG, PNG보다 우수합니다.
압축정도는 png(원본), webp(70%), jpg(3)
[ jpg를 webp 수준의 용량으로 줄일 경우 비교 ]
jpg는 용량에 비해 화질이 너무 떨어졌네요. 0o0
jpg를 최대 압축한 결과 30kb까지 줄일 수 있었고
결과는 참담할 정도로 깨지는 것을 알 수 있죠.😂
압축정도는 webp(70%), jpg(0, 최대)
그럼 다음은 마지막으로
png원본과 webp 고화질과 비교를 해보도록 하죠
[ webp의 고퀄과 png원본과의 용량차이를 비교 ]
용량은 줄었고
거의 차이를 못 느낄 정도로 고퀄입니다.
압축정도는 png(원본), webp (100%, 고퀄)
위 비교 이미지 역시
저는 포스팅을 위해 webp를 사용하되 100% 고퀄을 사용했습니다.
용량대비 옳은 비교를 위해 100%를 사용하였고
보통 통상적으로 기본 설정인 70%를 사용하시면
기본 "jpg"와 "png"에 비해 1/10 정도의 열 배 가까운 용량을 줄일 수 있어요. o0o;
＼（〇_ｏ）／
[블로그 포스팅에 유리한 점]
혹 블로그를 운영하시나요?
볼로그 포스팅 작성 시 구글 노출을 위한 꿀팁!
"webp"의 확장자를 사용해 보심을 추천드립니다.
보통 자기 식구는 먼저 챙긴다고
블로그 포스팅 역시 구글검색 "SEO"에서 "webp" 확장자에
좀 더 우수한 점수를 부여한다는 이야기가 있습니다.
믿거나 말거나~
확실한 것은 용량이 줄고 가벼운 만큼
SEO에 높은 점수를 받는 것은 사실입니다.
또한? 어마어마한 사실을 알려드리죠!
간혹 "구글 서치콘솔"에서 "이미지가 화면보다 크다"
"콘텐츠 폭이 화면보다 넓음"
"클릭할 수 있는 요소가 서로 너무 가까움"
이런 오류 보셨죠?
이런 오류중에
콘텐츠 이미지와 관련된 영향이 있다 생각되시면
JPG나 PNG를 쓰지 마시고 webp를 써보세요.
사실 PNG까지는 괜찮은데 JPG에서
오류가 빈번히 일어날 수 있습니다.
설마 이거였어?라고 놀라실 수 있어요!
참고로 webp를 쓰시고
블로그포스팅 내에서 드래그 줄이는 것이 아닌
실제 사이즈를 줄여버리거나 테두리를 주는 등의
에디트 효과를 줄경우 webp 확장은 사라지고
포트팅에서 지원하는 기본 확장자로 바뀌어버리니 조심!
에디트 효과는 직접 포토샵 같은
외부 프로그램에서 만들어 webp로 변환 후
넣으셔야 하는 번거로움이 있습니다.
^^;
자 이제 설명과 비교는 충분히 되었고
이제 본론인 사용법을 알아볼까요?
"webp" 플러그인(plug in) 설치와 사용방법
포토샵 하위버전에서 webp를 불러들이면 오류가 납니다!
"올바른 유형의 문서가 아닙니다. 요청한 사항을 완료할 수 없습니다."
"could not complete your request because it is not the right kind of document"
그래서
"플러그인"을 설치해 줘야 합니다
[플러그인 다운로드]
어도비에서는 Photoshop 23.1 이하용을 위한 플러그인 다운로드를 마련하였습니다.
| "Webp" 플러그인(plug in) 직접 다운로드 링크 |
|
| Windows(x64) | https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Win_x64.8bi |
| macOS(zip 압축 해제) | https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Mac_Universal.zip |
어도비 꺼라 안심하고 다운로드 가능해요~ ^^
[플러그인 설치]
다운 로드받은 파일을 복사하여
| windows | C:\Program Files\Common Files\Adobe\Plug-Ins\CC |
| macOS | /Library/Application Support/Adobe/Plug-Ins/CC |
해당하는 OS의 위 경로에 "붙여 넣습니다"
포토샵을 재실행합니다.
"끝~"
입니다만~ ^^;
mac의 경우 추가 사항이 있습니다.
해당되는 경우 아래의 지시를 따르시면 됩니다.
격리 플러그인(macOS만 해당)
macOS 10.15 이상에서 플러그인 차단을 하면
"개발자를 확인할 수 없어서 WebPShop.plugin을 열 수 없습니다"라는 메시지가 뜹니다.
서명되지 않은 플러그인의 경우 발생합니다. 격리하는 가장 쉬운 방법은 WebPShop 플러그인을
설치한 경로 윈도우로 드래그 후 올바른 버전과 경로를 가져오는 것입니다.
격리하려면 주소 창에서 다음 코드를 실행합니다(파인더 > 응용 프로그램 > 유틸리티).
sudo xattr -r -d com.apple.quarantine /Library/Application\ Support/Adobe/Plug-Ins/CC/WebPShop.plugin
[포토샵에서 webp 플러그인 사용방법]
플러그인이 제대로 작동되었는지 한번 실행해 보도록 하겠습니다.
요~~ 잘 열립니다~!
그럼 Ctrl + Alt + S를 실행해 볼까요?
저장 파일 형식을 지원하는지 한번 보겠습니다.
오~ 맨 아래 이렇게 webpshop (webp) 저장이 가능하도록 메뉴가 생겼습니다.
저장을 하면 설정메뉴가 떠요~!
"Webp" 저장 시 대화창이 하나 뜨고
퀄리티와 메타데이터 설정이 가능합니다.
좋은 건 실시간으로 용량대비 화질을 볼 수 있어요!
캡짱! 물론 JPG도 그렇고 화질을 실시간으로 다 볼 수 있다는 게
포토샵의 장점인 것 같습니다.
예전에는 없었는디...
조선시대대 포토샵을 아직 사용 중이라 최근에 알았다능..
나만 몰랐눙..(⊙ˍ⊙)a
2023.10.02 - [분류 전체보기] - "나가사와 마리나" 어린이 같은 귀여움, 반전적인 몸매와 비키니 모음
2023.10.02 - [분류 전체보기] - "나가오 마리야(永尾まりや)" 평범하지만 섹시하고 매력적인 그녀의 사진 모음
https://jjinddaworld.tistory.com/
외계인 지구에 상륙기
지구에 적응하는 외계인
jjinddaworld.tistory.com