나는 client's 사이트에 변환된 로고를 한 번 발송했는데,투명한 배경이 있던 곳에 검은 직사각형이 다시 돌아왔다. 나는 그것에 대해 생각하지 않고 PNG 를 JPEG 로 변환했다. 이상한 부분은 내가 예상된 흰색 - 내가 읽은 모든 기사는 투명도 "white." 된다; 그것은 검정색이되었고, 나는 HTML 사양을 읽고 브라우저가 말한 것을 정확히하고 있다는 것을 알기 전에 내 코드가 깨 졌다고 가정하고 20 분을 보냈다.
그것이 이 가이드의 솔직한 주제입니다. The 이미지 포맷 변환기 Toolz.dev 에 browser's 자신의 캔버스 인코더에 얇은 래퍼입니다. 그 실제 장점을 제공합니다 - 아무것도 업로드,it's 인스턴트,그것은 오프라인으로 한 번로드 작동 - 그리고 대부분의 "어떤 이미지를 변환 어떤 format" 페이지가 인정하지 않을 것이다. 나는이 하나를 구축,그래서 I'll 당신에게 두 반쪽을 말해.
TL;DR: X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 이미지 포맷 변환기 브라우저가 열 수 있는 모든 이미지를 가져와서 다시 인코딩합니다 PNG, JPEG 또는 웹P- 그 세,그리고 그 세 만. AVIF,GIF, 또는 SVG 출력이 없습니다,도구는 browser's 캔버스 인코더를 사용하고 그 캔버스가 지원하는 것이기 때문에. 대상을 선택하고 품질 슬라이더를 드래그 (JPEG 및 WebP 만 - PNG 는 무시), 다운로드. 변환하기 전에 알아야 할 두 가지: JPEG를 타겟팅하면 투명도가 검정색으로 합성됩니다, 사양별, 그리고 EXIF 메타데이터가 제거되었습니다 모든 변환에서 캔버스는 다시 인코딩하면 픽셀만 전달되기 때문입니다. 파일을 축소하려면 파일과 페어링하십시오 이미지 압축기 그리고 the 이미지 크기 조정 도구.
이 변환기는 실제로 무엇을 지원합니까?
Let's 는 스코프를 먼저 제대로 가져옵니다. 왜냐하면 대부분의 포맷 가이드가 오버셀되는 곳이기 때문입니다.
입력: 파일 선택기가 수락합니다 image/*를 하고,파일을 평원에 불러옵니다 <img> 요소. 따라서 브라우저가 표시 할 수 있으면 도구는 PNG,JPEG, WebP,GIF, BMP,AVIF 및 대부분의 최신 브라우저에서 SVG 를 읽을 수 있습니다.
출력: PNG,JPEG, WebP. 세 개의 버튼. That's 리스트.
이유는 게으름이 아니라 it's the platform. 도구는 a 에 이미지를 그립니다 <canvas> 그리고 전화 canvas.toBlob(callback, type, quality). HTML 생활 표준은 모든 브라우저가 지원하도록 요구합니다 image/png 해당 호출의 경우 다른 형식은 선택 사항으로 남깁니다; 실제로는 image/jpeg 그리고 image/webp 어디서나 지원됩니다 image/avif 인코딩은 없습니다. AVIF 를 작성하거나 캔버스에서 GIF 를 작성하는 브라우저 API 가 없습니다. AVIF 출력을 제공하는 사이트는 WebAssembly 인코더를 배송하거나 (수백 킬로바이트 다운로드) - 훨씬 더 자주 - 서버에 이미지를 업로드하는 것도이 도구가하는 일이 아닙니다.
그래서 여기에 정직한 비교 테이블, 도구 우선:
| 당신은 원해요 | 이 도구는 | 왜 |
|---|---|---|
| PNG → JPEG | 예 | 캔버스는 인코딩합니다 image/jpeg |
| PNG → 웹P | 예 | 캔버스는 인코딩합니다 image/webp |
| JPEG → 웹P | 예 | 여기서 가장 유용한 변환 |
| WebP → PNG/JPEG | 예 | 여전히 can't 읽기 WebP 도구에 대 한 |
| AVIF → 웹피 | 예(avif 에서 오직) | 브라우저는 AVIF 를 해독합니다; can't 는 그것을 부호화합니다 |
| 무엇이든 → AVIF | 아니요 | 캔버스 AVIF 인코더가 존재하지 않습니다 |
| 애니메이션 GIF → 애니메이션 WebP | 아니요 | 안 <img> 캔버스에 하나의 프레임을 제공합니다 |
| 무엇이든 → SVG | 아니요 | SVG는 벡터입니다; 이것은 래스터 파이프라인입니다 |
| 200 파일 일괄 처리 | 아니요 | 한 번에 하나의 파일 |
AVIF 또는 애니메이션 WebP가 필요한 경우 다음을 사용하십시오 squoosh 지역적으로, cwebp/avifenc 명령줄에서,또는 당신의 빌드 pipeline's 이미지 단계. 나는 척보다 유용한 곳으로 당신을 보낼 것입니다.
JPEG가 투명 배경을 검은색으로 바꾸는 이유는 무엇입니까?
사양에 그렇게 나와 있고 클라이언트 이메일 후에야 그 사실을 알게 되었기 때문입니다.
JPEG 에는 알파 채널이 없습니다. 캔버스에 does't 가 알파를 지원하는 형식으로 직렬화하도록 요청하면 HTML Living Standard 는 명시적입니다: 비트맵은 a 에 합성되어야 합니다 솔리드 블랙 배경 인코딩하기 전에. 흰색이 아닙니다. 검정색. Chrome,Firefox 및 Safari 는 모두 이것을 따르므로 동작이 일관되고 모든 사람을 정확히 한 번 놀라게합니다.
그래서: 투명한 PNG 로고를 JPEG 로 변환하면 그 뒤에 블랙 박스가 제공됩니다. 매번. That's 는 공구에 있는 벌레가 아닙니다,it's 플랫폼은 일관되,질 슬라이더를 끌기의 아무 총계도 그것을 고치지 않습니다.
대신해야 할 일:
- 투명성을 유지하시겠습니까? 타겟 PNG 또는 웹P. 둘 다 알파를 가지고 다닙니다. WebP 는 보통 둘 중 작을 것입니다.
- 특별히 JPEG가 필요하십니까? 먼저 편집기에서 실제로 원하는 배경색에 이미지를 평평하게 만듭니다 그럼 변환.
- 사진만 변환하시나요? 사진은 투명도가 없어서 이런건 절대 안나오죠. Convert away.
이것은 사람들이 변환기로 이미지를 손상시키는 가장 일반적인 단일 방법이며, it's는 내부화할 가치가 있습니다: 알파는 파일의 속성이 아닌 형식의 속성입니다. JPEG를 선택하는 것은 알파 채널을 멀리 던지는 것을 선택하는 것입니다.
캔버스 재엔코드에서 또 무엇이 손실되나요?
캔버스는 픽셀을 보유합니다. 단지 픽셀입니다. 원본 파일의 다른 모든 것은 브라우저가 다시 인코딩될 때 폐기되며,이것이 사람들을 잡아냅니다:
EXIF 가 사라졌습니다. 카메라 제조사 및 모델, 렌즈, 노출, 캡처 날짜, 저작권 필드 등 GPS 좌표 모두 사라집니다. 이것은 우연에 의한 개인 정보 보호 승리입니다 - 당신이 게시하기 전에 전화 사진을 변환하는 것은 촬영 된 위치를 스트립 - 하지만 you're 기록 보관인 또는 당신이 생존을 위해 저작권 필드가 필요한 경우,어떤 캔버스 기반 변환기를 통해 원본을 실행하지 복사본을 변환합니다.
색상 프로필이 평평해집니다. Display P3 또는 Adobe RGB 와 같은 와이드 가무트 프로파일로 태그된 이미지는 실제로 sRGB 로 처리하는 캔버스에 그려집니다. 웹 이미지의 경우 이것은 어쨌든 원하는 것입니다. 인쇄 작업의 경우 isn't.
애니메이션은 하나의 프레임으로 축소됩니다. 안 <img> 요소는 보여주는 프레임이 무엇이든 캔버스를 건네줍니다. 12 초 애니메이션 GIF 에 드롭하면 you'll 은 하나의 스틸을 얻을 수 있습니다. 이 도구는 기능보다는 정품 거친 가장자리로 간주하는 이것에 대해 경고하지 않습니다.
다른 모든 것은 디코딩된 픽셀에서 다시 인코딩됩니다. 이는 우리에게 가장 중요한 하나의 규칙을 제시합니다.
세대 손실이란 무엇이며 어떻게 방지할 수 있나요?
손실 형식을 저장할 때마다 인코더는 데이터를 버립니다. 데이터를 버리고,디코딩하고, 더 많이 버리면 손상 화합물이 발생합니다. 이것은 생성 손실이며,it's 는 밈 템플릿이 팩스로 전송 된 것처럼 보이는 이유입니다.
규칙은 짧습니다: 항상 당신이 가지고있는 최고의 원본에서 변환, 결코 변환 된 사본에서.
구체적으로,JPEG → WebP → JPEG 는 원래 JPEG 보다 더 나쁘다,두 번 이상. 첫 번째 encode's 아티팩트는 충실하게 그들을 보존 비트를 지출 두 번째 인코딩에 의해 실제 이미지 세부 사항으로 취급 얻을. RAW 파일 또는 PNG 내보내기가있는 경우,거기서 시작.
There's는 사람들을 넘어뜨리는 결과입니다: JPEG를 PNG로 변환해도 품질이 복원되지 않습니다. PNG 는 무손실이므로 이미지를 완벽하게 보존합니다 - 이미 픽셀로 구워진 모든 압축 아티팩트를 포함합니다. 3 배 또는 4 배 더 큰 파일에서 동일한 손상된 이미지를 얻습니다. PNG-from-JPEG 는 you're 가 많은 편집 라운드를하려고 할 때 중간 단계로 가치가 있으며 각 저장시 다시 압축하지 않으려 고합니다.
실제로 어떤 형식을 선택해야 합니까?
형식 분류를 건너뛰세요; here's 내가 실제로 내리는 순서대로 결정.
사진인가요? WebP at 80–85. 파이프라인에 있는 것이 can't 읽기 WebP 인 경우 JPEG at 80–85.
투명성이 있나요? WebP. PNG 최대 호환성이 필요한 경우.
스크린샷, UI 모의, 차트, 또는 텍스트와 평면 색상이 있는 것? PNG,또는 WebP. JPEG's 이산 코사인 변환은 날카로운 모서리를 글자 주위에 보이는 모기 소음으로 번지게 합니다 - 연속 톤 사진용으로 1980 년대 후반에 디자인되었습니다 (형식은 ITU-T T.81 /ISO/IEC 10918-1 로 표준화됨) 그리고 텍스트는 정확히 최악의 경우 다루는 내용입니다.
소스를 제어하는 로고인가요, 아니면 아이콘인가요? 둘 다 아닙니다 - SVG를 사용하고, don't는 래스터 변환기를 전혀 통해 그것을 넣습니다.
이 뒤에 있는 사양의 경우: PNG는 ISO/IEC 15948이며 WebP는 마침내 다음과 같이 게시되었습니다 RFC 9649 구글이 그것을 발송한 후에 2024 년에,14 년. 크기에,Google's 자신의 비교 연구는 WebP 손실을 동등한 SSIM 에 JPEG 보다는 더 작은 대략 25–34%에 두고,PNG 보다는 더 작은 대략 26%에 WebP 무손실 그것 vendor's 수 vendor's 말뭉치 - 강한 힌트로 취급해,당신의 특정한 심상에 관하여 약속이 아닙니다. I'm 안락한 인용이 그들을,이유는 they've 가 진짜 스크린샷 및 사진에 나의 결과를 충분히 가깝게 일치했다는 것을 입니다. 당신의 것은 다를지도 모릅니다,이것이 공구가 당신이 개조하기 전에 당신에게 근원 크기를 보여주는 이유입니다.
Toolz.dev에서 이미지를 어떻게 변환하나요?
1 단계: 변환기를 엽니 다
로 이동 이미지 포맷 변환기. 설치할 것이 없고 계정이 없습니다.
2 단계: 이미지 업로드
업로드 영역을 클릭하고 파일을 선택합니다. 개체 URL 을 통해 브라우저에 로드됩니다 - 파일은 아무 곳에도 전송되지 않습니다. You'll 파일 이름과 그 크기를 볼 수 있습니다.
3 단계: 형식 판독을 확인합니다
도구가 보여줍니다 현재 → 대상. "Current"는 file's MIME 타입에서 읽혀지므로 a .jpg 파일 보고서는 다음과 같습니다 JPEG. 유용한 온전한 체크 때 누군가가 이름을 바꿨다 file's 실제로 변환하지 않고 확장, 이는 당신보다 더 많은 일이'd 생각.
4 단계: 목표물을 골라라
PNG, JPEG 또는 WebP.
5 단계: 품질 설정 - 적용된다면
품질 슬라이더(1~100, 기본값은 90) JPEG 및 WebP 에만 나타납니다. That's 고의: PNG 는 무손실이고 canvas.toBlob 품질 주장을 완전히 무시합니다 image/png, 따라서 아무 것도 하지 않는 슬라이더를 보여주는 것은 거짓말이 될 것입니다.
그것을 설정 하는 곳에 대 한: 90 기본값 이며 대부분의 콘텐츠에 대 한 원본과 거의 구별할 수 없습니다. 80–85 내가 실제로 작업 하는 곳입니다-의미 있게 더 작은,아직 깨끗 한. 60 아래 you'll 사진에 그것을 볼,그리고 텍스트 you'll 훨씬 더 빨리 그것을 볼.
6 단계: 변환 및 다운로드
히트 변환 & amp; 다운로드. 인코딩은 컴퓨터에서 발생하며 파일은 다음과 같이 저장됩니다 converted_<original-name>.<ext>. 차원은 정확하게 보존됩니다 - 변환기는 당신의 image's 를 통해 자신의 폭 및 고도 통과합니다,그래서 이 단계는 부호화를 바꾸고 다른 것은 없습니다.
변환 또는 압축 - 어느 것이 필요합니까?
사람들은 더 작은 파일을 원할 때 변환기에 도달하고 종종 that's 잘못된 도구입니다. 세 가지 다른 작업, 세 가지 다른 도구:
| 목표 | 도구 | 무엇이 변하는가 |
|---|---|---|
| 인코딩 변경하기 | 포맷 변환기 | 형식, 품질 |
| 동일한 형식, 더 작은 파일 | 이미지 압축기 | 품질만 |
| 픽셀 수가 적습니다 | 이미지 크기 조정 | 치수 |
그리고 가장 큰 승리는 거의 항상 한 사람이 건너 뛰는 것입니다. 4000×3000 사진을 1200px 너비의 레이아웃으로 제공하는 you're 인 경우 크기 조정은 모든 형식 선택을 결합한 것보다 낫습니다- you're 브라우저가 다운스케일링하고 어쨌든 버릴 픽셀의 90%를 버립니다. 먼저 크기를 조정한 다음 변환합니다. 그 순서로 작업을 수행하면 일상적으로 200KB 미만의 4MB PNG 가 필요하며 전체 크기 원본에서 영리한 형식 선택이 거의 이루어지지 않습니다.
구축 가치가 하나 더 습관: 원본을 유지. 무손실 마스터를 보관,배포 손실 파생 상품을 생성. AVIF-모든 곳이 마침내 도착하거나,그 후 다음 형식 때,you'll 은 후회를 확대하는 대신 깨끗한 소스에서 다시 내보냅니다.
자주 묻는 질문
어떤 이미지 형식이 웹사이트에 가장 적합합니까?
WebP, 대부분의 콘텐츠에 대 한. It's 사진에 대 한 JPEG 보다 작은 및 그래픽에 대 한 PNG 보다 작은, 그것은 투명성을 지원 하 고, 모든 현재 브라우저는 그것을 읽고-사파리는 마지막 홀드 아웃 및 버전 14 에 추가 된 지원. AVIF는 여전히 더 나은 압축 하지만 당신은 can't 브라우저 캔버스에서 그것을 생산; 빌드 단계 또는 데스크톱 인코더가 필요 합니다.
이 도구가 내 이미지를 AVIF로 변환할 수 있나요?
아니오. 변환기는 png,jpeg, webp 만 출력합니다,왜냐하면 browser's canvas 인코더를 사용하고 어떤 브라우저도 캔버스에서 AVIF 를 인코딩할 수 없기 때문입니다. 귀하의 브라우저는 디코딩 AVIF, 그래서 당신은 AVIF 파일을 변환 할 수 있습니다 에 WebP 또는 PNG 는 여기 - 그냥 다른 방향이 아닙니다. AVIF 출력의 경우 명령줄 인코더를 다음과 같이 사용하십시오 avifenc 또는 당신의 framework's 이미지 파이프라인.
JPEG로 변환한 후 투명 PNG가 검정색 배경을 얻은 이유는 무엇입니까?
JPEG 에는 알파 채널이 없고,HTML 사양에서는 알파 지원 없이 포맷으로 직렬화하는 캔버스는 이미지를 단색 검정색 배경에 합성해야 한다고 되어 있기 때문입니다. It's spec-mandated behavior,not a bug,and it's the same in every browser.pranciparity preserved 가 필요하다면 대신 PNG 나 WebP 로 변환하세요.
이미지를 변환하면 EXIF 데이터가 제거됩니까?
예 - GPS 좌표,카메라 설정 및 캡처 날짜를 포함한 모든 것. 도구는 이미지를 캔버스에 그리고 픽셀을 다시 인코딩하며 캔버스는 메타 데이터를 전달하지 않습니다. That's useful if you're stripping location data before posting a photo,and a problem if you need the metadata,so keep an unconverted original any way.
애니메이션 GIF 를 애니메이션 WebP 로 변환할 수 있습니까?
이 도구로는 안 됩니다. an 에 이미지를 로드합니다 <img> 요소 및 캔버스에 단일 프레임을 캡처, 그래서 애니메이션 GIF는 하나의 정지 이미지로 나옵니다. 애니메이션 WebP는 실제 멀티 프레임 인코더가 필요합니다 - 사용 gif2webp google's WebP 도구에서, 또는 어느 쪽보다 극적으로 작을 MP4로 애니메이션을 변환합니다.
JPEG를 PNG로 변환하면 품질이 향상됩니까?
아니. PNG 는 무손실,그래서 그것은 정확히 무엇을 보존 it's 주어진 - 이미 JPEG's 픽셀에 구운 압축 아티팩트를 포함. 당신은 훨씬 더 큰 파일에서 동일 보이는 이미지로 끝납니다. 손실 된 데이터가 손실됩니다; 형식 변경이 다시 가져 오지 않습니다.
파일 크기 제한이 있습니까?
하드 제한이 적용되지 않습니다. 실용적인 천장은 전체 이미지가 대략 너비 × 높이 × 4 바이트에서 캔버스 비트 맵으로 디코딩되기 때문에 device's 메모리입니다 - 8000×6000 사진은 인코딩이 시작되기도 전에 원시 픽셀로 약 192MB 의 RAM 이 필요합니다. 데스크탑 브라우저는 불만없이 일반적인 카메라 출력을 처리합니다; 오래된 전화는 매우 큰 파일로 어려움을 겪을 수 있습니다.
PNG 와 JPEG 의 차이점은 무엇입니까?
JPEG 는 손실과 사진에 대한 내장: 그것은 작은 파일에 도달하기 위해 미세 세부 사항을 폐기,그리고 투명성이 없다. PNG 는 그래픽,스크린 샷,로고 용으로 구축 무손실이다: 그것은 모든 픽셀을 정확하게 유지하고 투명한 배경을 지원,사진에 대한 더 큰 파일의 비용으로,그들 사이를 변환 할 수 있습니다,하지만 JPEG 는 알파 채널이 없기 때문에,JPEG 는 견고한 배경을 얻을로 저장된 투명 PNG 를 기억.
이미지를 WebP로 무료로 변환하려면 어떻게 해야 하나요?
PNG 또는 JPEG 를 로드하고 출력 형식으로 WebP 를 선택하고 더 작은 파일을 원할 경우 품질을 설정하고 다운로드하십시오 - 무료이며 브라우저에서 완전히 실행됩니다. WebP 는 일반적으로 웹을 위해 만들 가치가있는 변환입니다. 왜냐하면 JPEG 와 PNG 보다 작으면서도 여전히 투명성을 지원하며 모든 현재 브라우저에서 읽히기 때문입니다.
내 이미지가 서버에 업로드되나요?
아니요. 파일은 개체 URL 로 로컬에서 읽혀지고 브라우저에서 디코딩되고 브라우저에서 다시 인코딩되고 & # 39;s 캔버스로 저장되며 브라우저에서 저장됩니다. 직접 확인할 수 있습니다: DevTools 를 열고 네트워크 탭으로 이동하여 이미지를 변환하십시오 - you & # 39;ll 업로드가 표시되지 않습니다. 페이지가로드되면 변환은 Wi-Fi 꺼짐과 함께 작동합니다.
짧은 버전
브라우저 캔버스는 세 가지 형식에 대한 좋은 정직한 이미지 변환기이며 다른 모든 형식에 대한 나쁜 것입니다. PNG,JPEG, WebP 내에서 it's 인스턴트,개인, 무료이며,실제로 웹에 중요한 변환을 다룹니다: WebP 에 사진을 가져 오는 것. 그 세 가지 외에 can't 도움말,그리고 I'd 차라리 client's 홈페이지에 검은 직사각형으로 알아 내도록하는 것보다 그렇게 말합니다.
아무것도 변환하기 전에 투명도가 필요한지(JPEG가 아닌지), 메타데이터가 필요한지(원본을 유지한 다음), 이미지가 단순히 너무 많은 픽셀인지(그렇다면) 물어보세요 크기 조정 첫째). 그 세 가지를 올바르게하고 형식 선택은 쉬운 부분입니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 이미지 포맷 변환기 는 여기. 이미지 워크플로의 나머지 부분을 위해,there's the 이미지 압축기, 그만큼 이미지 크기 조정 도구 및 - 평면 배경 컷아웃용 - 배경 제거제. 더 넓은 그림은 에 있습니다 이미지 도구 가이드 그리고 the 이미지 압축 가이드.
