Home Design webp 파일 포토샵에서 열고 저장하는 방법

webp 파일 포토샵에서 열고 저장하는 방법

새로운 이미지 포맷 webp

webp는 탁월한 무손실 및 기능을 제공한 이미지 포맷이다. webp 이미지는 png 파일 대비 26%, jpg 포맷보다 25-34% 정도 파일이 작다고 한다. 웹 사이트의 페이지를 보다 빠르게 로딩하기 위해서 개발된 새로운 이미지 압축 포맷이라고 보면 된다.

inline ad

참고문서 : https://developers.google.com/speed/webp/gallery1

webp 파일 포토샵에서 열기

Youtube 의 썸네일 이미지도 webp 파일로 활용하고 있다. webp 파일을 포토샵으로 가져왔을 때 에러 메시지가 뜨면서 열리지 않는다. 포토샵에서도 webp 파일을 열고 싶으면 webp 파일을 사용할 수 있도록 만든 plugin 을 폴더에 넣어주기만 하면 webp 파일을 열 수 있다.

Could net complete your request because it is not the right kind of document.

webp plugin 다운로드 및 플로그인 설치방법

아래 사이트에 접속하셔서 자신의 OS 환경에 맞는 파일을 다운로드 받으셔서 아래의 경로에 복사해서 넣어주면 된다.

다운로드 경로 : http://www.telegraphics.com.au/sw/product/WebPFormat

windows 64bit 를 사용하시는 분들은 아래 주소로 다운 받으시면 된다.
windows (64bit) : http://www.telegraphics.com.au/sw/files/WebPFormat-1.2b4-win64.zip

저는 포토샵 2019 버전을 사용하고 있어서 경로가 다음과 같다.
설치경로 : C:\Program Files\Adobe\Adobe Photoshop CC 2019\Plug-ins

포토샵에서 webp 파일 열기

유튜브에서 다운로드 받은 webp 파일을 한번 열어보았는데 파일이 열리는 것을 확인했습니다. 그렇다면 편집 후 webp 파일로 저장이 되는 지 확인해볼까요?

다른이름으로 저장하니깐 WebP 파일로 저장할 수 있는 옵션이 있는 것을 확인해보았습니다. 이제 webp 파일을 마음껏 수정 사용할 수 있겠네요.

RECENT POSTS

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...