PNG를 WebP로, 투명도를 지키며 가벼워지는 파일

덩치 큰 PNG를, 투명도를 지키면서 더 빨리 불러와지는 날렵한 WebP로 바꾸세요.

또는 여기에 이미지를 드롭하세요

PNG를 WebP로 변환하는 방법

PNG를 WebP로 변환하는 방법

그림을 드롭 칸에 던지거나 클릭해 하나 고릅니다. 파일이 닿는 그 순간 처리가 일어서고, 눌러야 할 단추는 어디에도 없으며, 흔한 그림이라면 순식간에 정리됩니다. 이어 다운로드 신호 한 번으로 원래 이름은 두고 끝자락만 바꾼 WebP가 써집니다. 한 장을 변환하면 브라우저에서 돌아가고, 여러 장을 건네면 함께 저희 서버로 올라갑니다. 같은 길이 설치 없이 손전화에도 책상 위 기기에도 응합니다. 한 장 더라면 이어서 다음 PNG를 떨구면 됩니다. 움직이는 PNG를 내밀어도 남는 것은 맨 앞 한 칸뿐이며, 여기서 태어나는 WebP는 흐르는 이음이 아니라 멈춘 한 장의 그림이기 때문입니다.

투명한 픽셀이 WebP로 통과함

투명한 픽셀이 WebP로 통과함

여덟 비트짜리 알파 층이 WebP 안쪽에 깃들기에, PNG의 맑은 점은 어느 것이든 WebP에서 똑같이 맑은 채 내려앉습니다. 하얗게 칠해지는 것도 없고, 오려낸 가장자리에 윤곽의 그늘도 뜨지 않으며, 나중에 손볼 일도 없습니다. 비침을 품은 PNG의 행선지로 JPG가 아니라 WebP를 미는 근거가 바로 여기에 있습니다. JPG는 알파를 갖지 못해 맑은 점을 한 가지 색으로 메울 수밖에 없으니까요. 간판 그림, 기호, 물건의 오림, 화면의 밑그림, 둥근 모서리의 갈무리 그림, 비치는 바탕에 올라탄 것이라면 무엇이든 흠 하나 없이 건너갑니다. 그를 위한 전환 단추 따위는 없고 그저 일어납니다. 알파를 짊어지는 일이 WebP가 빚어진 까닭에 짜여 있기 때문입니다.

PNG에서 WebP로 옮기는 이유

PNG에서 WebP로 옮기는 이유

얻는 것은 먼저, 비침도 매무새도 무너뜨리지 않고 크게 홀쭉해진 파일입니다. 공식으로 내놓인 잣대를 따르면 결손 없는 WebP는 견줄 PNG의 네 분의 삼쯤 무게로 졸아들고, 비침을 품은 결손 있는 WebP는 삼분의 일 언저리까지 가라앉습니다. 홀쭉한 그림은 그만큼 일찍 떠오르고, 검색 순위에 울린다고 알려진 Core Web Vitals의 한 축, 곧 가장 큰 요소의 그려짐 시간에 효과를 미칩니다. PageSpeed Insights는 다음 세대의 형식을 권하는 대목에서 묵은 PNG를 굳이 들추고, 옮겨 담으면 그 지적은 사라집니다. 읽는 쪽도 걱정할 까닭이 없습니다. 손꼽히는 네 가지 열람 프로그램이 모두 보탬 없이 WebP를 펼쳐 보이니까요.

품질 설정과 손실의 거래

품질 설정과 손실의 거래

Araluma는 WebP를 사진에도 도판에도 어울리도록 매만진 무손실 바로 앞 설정으로 적습니다. 그래서 늘 보는 크기에서는 본디 PNG와 빼닮았습니다. 이 선에서 멈춰 선 WebP는 이치로는 손실이라, 흠 없는 무손실 베낌에 견주어 자그마한 섬세함을 양보합니다. 간판 그림, 기호, 화면의 부품, 사진 같은 거의 모든 웹 일거리에서 그 틈은 눈에 들지 않습니다. 한 점씩의 정확함이 걸리는 자리, 이를테면 의료의 찍힘이나 갈무리용 원판에서는 PNG를 끌어안고 WebP는 써내는 몫으로 돌리십시오. 사진이라면 대체로 절반에서 칠 할 남짓의 줄어듦을 바랄 수 있고, WebP가 PNG에 본디 지닌 짜임새의 이로움이 그 위에 또 포개집니다.

PNG가 실제로 변환되는 곳

PNG가 실제로 변환되는 곳

이것은 몇 장을 건네느냐로 나뉩니다. PNG 한 장을 변환하면 작업 전부가 탭에서, 브라우저 자체의 이미지 엔진에서, 당신의 기기 위에서 일어나며 아무것도 올라가지 않고 파일에 대해 아무것도 적히지 않습니다. 직접 확인하세요, DevTools를 열고 그 한 장을 변환하는 동안 네트워크 패널을 열어 두고, 그것을 실어 나르는 나가는 요청이 0인 것을 세어 보세요. 한 줌을 함께 변환하면 저희 서버로 올라가, 모두 훑어 하나의 다운로드를 돌려줍니다. 그 다운로드는 약 2시간 안에 저희 서버에서 치워지고, 저장하는 그 순간 직접 지울 수 있습니다. 그렇게 한 장은 결코 브라우저를 떠나지 않고, 묶음은 당신이 가져갈 것을 짜 맞추는 데 필요한 동안만 저희 서버에 머뭅니다.

원본 PNG가 여전히 옳은 자리

원본 PNG가 여전히 옳은 자리

WebP는 사방으로 가지만 모든 문이 열리는 것은 아닙니다. 한 줌의 제작 소프트, 인쇄의 흐름, 사내 문서 장치는 여태 PNG를 바랍니다. 일부 운영체제는 PNG의 던져 넣기를 수월히 받지만 WebP에는 끼워 넣는 부품을 조릅니다. 책상 위 소프트로 거듭 열어 손대는 밑그림에는 무손실 PNG를 원판으로 삼아, 풀었다 다시 엮는 돌이의 줄어듦이 쌓이는 일을 피할 수 있습니다. WebP는 웹을 향한 써냄에 맡기고 PNG는 밑천대로 두십시오. 그러다 거꾸로 달려 WebP를 PNG로 되돌리고 싶어지면 webp-to-png 연장이 그 오감을 떠맡습니다.

사용 방법

  1. PNG를 건네기

    PNG를 페이지로 밀어 넣거나 선택기에서 찾으세요. 비치는 부분도 함께 옵니다. 한 장을 변환하면 당신의 기기에 머물고, 여러 장을 떨어뜨리면 저희 서버로 올라가 함께 다뤄집니다.

  2. 기대어 앉기

    당신은 더 할 것이 없습니다. 보통의 그림은 손가락을 드는 정도의 속도로 WebP가 되고, 변환 단계도, 길에서 도는 표시기도 없습니다.

  3. 줄어드는 것을 보기

    결과는 얼마나 큰 채로 나왔는지 알려 줍니다. 맑은 자리는 맑은 채로 남고, WebP는 시작한 PNG보다 눈에 띄게 가벼워야 합니다.

  4. 당신의 WebP를 챙기기

    다운로드를 한 번 누르면 밖으로 써냅니다. 옛 이름, 새 .webp 끝맺음. 줄지어 더 있나요? 저마다 페이지에 던지면 하나씩 통과합니다.

자주 묻는 질문

PNG를 WebP로 변환하면 투명도가 보존되나요?

지켜집니다. 온전한 알파 층을 WebP가 차리고 있으니, PNG의 맑은 조각은 WebP가 되어도 맑은 채로 머뭅니다. 비치는 PNG에서 디딜 적마다 행선지로 WebP가 JPG를 앞서는 까닭이 그 한 가지에 다 담깁니다. JPG는 알파가 모자라 맑은 점을 한 색으로 칠할 뿐이지만, WebP는 찾은 모습 그대로 오림을 둡니다. 비치는 바탕에 올라탄 간판 그림, 기호, 물건의 찍힘, 화면의 부품이 군더더기도 요구하지 않고 통째로 건너갑니다.

왜 PNG를 WebP로 변환하나요?

비침도 매무새도 둘 다 붙드는 홀쭉한 파일을 위해서입니다. 구글의 잣대로는 무손실 쪽이 같은 PNG의 네 분의 삼쯤 무게로 가볍게 굴러가고, 알파를 낀 손실 쪽은 삼분의 일 가까이로 내려앉습니다. 홀쭉한 그림은 일찍 닿고, 그것이 검색 순위에 무게를 싣는 Core Web Vitals의 잣대 가장 큰 요소의 그려짐 시간을 거듭니다. PageSpeed Insights는 그림 점검 속에서 다음 세대 형식의 기회로 PNG를 짚어 보이기까지 합니다. 게다가 Chrome과 Firefox에서 Safari와 Edge까지, 이름난 브라우저는 어느 것이나 거들 것 없이 WebP를 읽어 냅니다.

PNG에서 WebP로 변환하면 품질이 떨어지나요?

Araluma가 쓰는 무손실 바로 앞 설정이라면 사진도 도판도 늘 보는 크기에서 본디 PNG와 빼닮습니다. 여기에 멈춰 선 WebP는 이치로는 손실이라, 한 자밤의 섬세함이 더 작은 파일 쪽으로 흘러갑니다. 간판 그림, 기호, 사진 같은 나날의 웹 쓰임에서 그 틈은 눈에 들지 않습니다. 한 점씩의 정확함이나 갈무리 일거리에는 PNG를 끌어안고 WebP를 나르는 베낌으로 다루십시오. 변환은 당신의 PNG에 손가락 하나 대지 않고, 본디 그대로 기기에 자리를 틀고 있습니다.

WebP는 PNG보다 얼마나 작나요?

내놓인 잣대를 따르면 결손 없는 WebP는 같은 PNG의 네 분의 삼 언저리 무게에 그치고, 비침을 두른 결손 있는 WebP는 어림하여 삼분의 일까지 가라앉습니다. 실제 비는 그려진 속살에 따라 흔들려, 너른 빈자리와 한 색의 덩이를 품은 도판일수록 크게 득을 보고, 구석구석 그려 넣은 사진은 수수하나마 값어치 있는 깎임에 머뭅니다. 어느 쪽으로 기울든 WebP가 더 가볍고, 비침은 그대로 살아남습니다.

여기서 PNG를 WebP로 변환해도 안전한가요?

한 장을 변환하는지 여러 장을 변환하는지에 달려 있습니다. PNG 한 장은 브라우저 안에서 바로 다시 만들어지므로 그 파일은 보내지지 않고, DevTools를 열고 변환 도중 네트워크 패널을 보면 나가는 이미지 요청이 없는 것으로 확인할 수 있습니다. 여러 장을 한꺼번에 변환하면 저희 서버로 올라가 함께 다뤄지고, 그 다운로드는 약 2시간 안에 치워지며, 저장하자마자 직접 걷어낼 수 있습니다. 어느 쪽이든 당신의 다운로드를 짜 맞추는 것 이상으로 이미지가 남지 않습니다.

WebP는 모든 브라우저에서 동작하나요?

따지고 보면 두루 퍼졌습니다. Safari 14가 2020년에 나타나 Chrome, Edge, Firefox에 잇닿자 날것 그대로의 읽기가 어디에나 닿았습니다. 그것들을 한데 묶으면 사람들이 실제로 손에 쥐는 거의 온 브라우저가 됩니다. 예외는 참으로 해묵은 것들과 박힌 일부 표시기이며, 그것들을 품을 법한 상대에게는 PNG가 조심스러운 고름으로 남습니다. 요 다섯 해의 브라우저에 있는 이라면 누구든 걸림 없이 WebP를 얻습니다. 낱낱의 사정을 가늠하고 싶거든 caniuse.com의 WebP 칸이 받침의 형편을 펼쳐 줍니다.

세부 정보

좋은 원형 자르기 뒤에 있는 기술, 형식 및 작은 결정에 대한 팀의 메모.

WebP가 PNG보다 작아지는 원리
WebP는 따로 떨어진 두 방식으로 굴러갑니다. 무손실 방식은 자리와 색의 어림을, PNG의 DEFLATE를 웃도는 엔트로피의 단과 짝지어, 구글이 보인 잣대로 예사 그림에 어림 사분의 일쯤 나은 다짐으로 내려앉습니다. 손실 방식은 영상 현장에서 구역마다의 변환을 빌려, 눈이 겨우 채는 잔결은 떨구되 보이는 것은 붙드는 짜임입니다. 그림이 알파를 짊어질 때 WebP는 그 알파를 딴 길에서 무손실로 다지고 RGB 속살은 손실로 다루며, 그래서 비침을 두른 손실 WebP가 매무새가 같아도 PNG의 삼분의 일 가까이로 빚어질 수 있습니다. PNG의 DEFLATE는 무손실만 알아, 손실 길이 맺는 지각의 흥정에는 손이 닿지 않습니다. 그 짜임의 갈라짐이야말로 크기 차의 밑동입니다.
알파 채널 자세히
두 형식 모두 한 점마다 여덟 비트만큼의 알파를 실어, 말갛게 비운 바닥에서 빈틈없이 채운 꼭대기까지 짙기를 적습니다. 기기의 그림 장치가 묵은 그림을 새 형식으로 갈아 엮을 적에, 점마다 빨강 초록 파랑과 투명도의 값을 읽어 내고, 그 투명도를 RGB가 어찌 다뤄지든 아랑곳없이 다짐의 단으로 곧장 흘려보내 흠 없이 보존합니다. 그리하여 바닥에 닿은 말간 점이든, 그 둘 사이 어딘가의 어슴한 점이든, 꼭대기에 닿은 빽빽한 점이든, 저마다 새 그림에서 한 치 어긋남 없는 자리를 차지합니다. 너그러이 드리운 그늘이나 맑은 바탕 위에 매끈히 다듬은 글자를 두른 표상에서는, 그 가녀린 테두리의 보드라움이 한 올도 잃지 않고 옮아갑니다. 묵은 사진 형식은 이 재주를 부리지 못합니다. 담는 그릇에 투명도의 칸을 두지 않아, 무엇을 적기에 앞서 그림을 바탕 빛깔 위에 짓눌러 합쳐야 하기 때문입니다.
Core Web Vitals와 이미지 형식 선택
가장 큰 요소의 그려짐 시간이라는 잣대는, 화면 틀 안에 가장 도드라진 부위가 다 떠오르기까지의 사이를 잽니다. 읽을거리의 대다수에서 그 부위는 머리의 큰 그림에 닿고, 검색 쪽은 이 수치를 윗자리 노출의 실마리 묶음에 들입니다. 묵은 PNG는 오로지 무게의 무거움 탓에 이 잣대를 떨구기 쉬워, 사천 화소 급 사진이면 몇 메가로 부풀지만, 무손실에 거의 닿은 WebP로 갈아 끼운 같은 그림은 자릿수가 다르게 얇아집니다. 진단 연장은 다음 세대 형식의 조언 가운데 이 점을 콕 짚어, 물러나야 할 상대로 PNG를 듭니다. 맨 먼저 눈에 드는 길목에 눌러앉은 PNG를 가벼운 형식으로 바꿔 끼우는 한 수는, 재어지는 빠르기를 끌어올리는 데 빼어난 효험을 지닙니다. 퍼짐의 발자취도 든든해, 손꼽히는 네 브라우저는 2011년에서 2020년에 걸쳐 차례로 이 형식을 품었고, 뒤늦은 것도 바탕의 갈이를 틈타 따랐습니다.
손실 출력과 거의 무손실 설정
WebP는 0에서 100까지의 됨됨이 손잡이를 내밀어, 수가 높을수록 잔결을 많이 붙들고 그만큼 바이트를 들입니다. Araluma는 그 손잡이를, 사진, 화면의 도판, 기호라는 낯익은 웹의 갈래를 가로질러 충실함과 크기의 흥정을 맞추려 고른 무손실 바로 앞 한 점에 멈춥니다. 이 한 점에서 써냄은, 보통의 화면까지의 사이에서는 본디 PNG와 가려지지 않습니다. 엄밀히는 참된 무손실 적음에 견주어 비트의 섬세함이 얼마쯤 미끄러지므로, 풀어낸 WebP와 본디 PNG를 바이트마다 견주면 자잘한 수의 틈이 떠오르지만, 사진 바탕에서는 죄다 사람 눈의 문턱 아래 앉습니다. 의료의 찍힘, 위성의 그림, 무손실이 굳은 율인 갈무리 보존에서는 PNG를 끌어안고 WebP를 밑그림 베낌이 아니라 오로지 나름의 써냄으로 다루는 것이 옳은 한 수입니다.
메타데이터의 거동
묵은 그림을 새 형식으로 뒤집으면 써냄에서 촬영과 저작의 적바림 칸들이 말끔히 쓸려 나가는데, 세 갈래 큰 열람 엔진이 하나같이 그렇게 합니다. 빛깔의 적바림은 그것들이 갈림길에 서는 대목입니다. 두 엔진은 sRGB의 표딱지를 새 그림에 얹은 채 간직하고, 또 한 엔진은 빛깔 적바림까지 통째로 걷어 냅니다. 그리하여 갈아 엮인 그림은 어디서든 sRGB로 탈 없이 읽히지만, 본디 그림에 박힌 너른 빛깔 영역의 표딱지, 곧 Display-P3나 Adobe RGB나 ProPhoto RGB 따위는 그 한 엔진을 건너서는 살아남지 못합니다. 그 어긋남은 빛깔이 목숨인 솜씨꾼의 일터에서 매섭게 물어뜯으니, 참된 빛깔의 곧음이 곁따라야 할 적에는 빛깔 속살을 작정하고 적어 넣는 갈이 연장을 골라 쓰거나, 그 일에 맞춘 적바림 손질꾼을 빌려 뒤늦게 표딱지를 도로 박아 넣으십시오.
PNG를 둘 때와 WebP로 충분할 때
셈은 단숨에 마칩니다. 그림이 마침내 누리집의 면이나 응용으로 향하고 보는 이가 2020년 이후의 어느 열람기든 쓴다면, 새 형식으로 써내는 편이 옳습니다. Figma나 Sketch나 Affinity Designer 같은 빚는 소프트 안에서 펼쳐야 한다면, 먼저 당신이 손에 쥔 바로 그 판이 새 형식을 받쳐 주는지 살피십시오. 들쑥날쑥하니까요. 박는 일로 향한다면 태반의 박기 장치가 새 형식을 거들떠보지 않으니 묵은 그림 형식이나 TIFF에 기대십시오. 편지로 부쳐 나간다면 편지 연장이 요즘 형식을 얼마나 변덕스레 다루는지를 떠올려, 묵은 형식이 야무진 내기입니다. 그리고 몇 번이고 손질해 거듭 적어 두는 밑감이라면 묵은 그림을 본판으로 끌어안으십시오. 흠 없음에 거의 다다른 새 형식은 나무랄 데 없는 건넴의 형식이고, 묵은 형식은 갈무리와 손질에는 더 나은 한 벌로 남습니다. 야무진 흐름은 묵은 그림을 밑천으로 붙들고 누리집으로는 새 형식을 띄워 보냅니다.