투명한 배경이있는 JPEG

JPG는 투명한 배경을 허용하지 않습니다.

유일한 것은 당신이 할 수있는 것은 당신의 웹 사이트에 혼합되는 평면 컬러 배경을 갖는 것입니다. 웹 사이트 배경이 흰색이면 흰색 배경으로 만든 JPG를 만드세요.

그렇지 않으면 PNG로 저장하여 진정한 투명성을 허용하는 것이 좋습니다.

댓글

• 균일하지 않을 수 있으므로 혼합 배경색을 설정하는 것이 좋은 생각입니까?
• @Amessihel 아니요,하지만 ‘는 JPG 형식이 실제로 필요하고 투명성을 시뮬레이션해야하는 경우 유일한 옵션입니다.

JPEG는 투명도를 전혀 지원하지 않습니다.

대부분의 호환 옵션은 PNG를 사용하는 것이지만 무손실 압축이므로 사진 용 파일이 커집니다.

다른 옵션 무손실 (예 : PNG) 및 손실 압축 (예 : JPEG)을 모두 지원하고 두 가지 모두에서 투명성을 허용하는 새로운 WebP 파일 형식을 사용하는 것입니다. WebP 지원 은 요즘에는 상대적으로 좋지만 아직 보편적이지 않습니다 (특히 Safari 나 IE는 하지만 Edge는 그렇습니다).

댓글

• WebP와 관련하여 더 주목할만한 사항은 Safari가 현재 전혀 지원하지 않습니다 (모바일 또는 데스크톱 ). 이는 분명히 모든 iPhone을 포함하여 전체 브라우저 시장 점유율의 25 %를 제거합니다.
• WebP 브라우저 지원 .
• 고해상도 사진에서 투명도가 필요한 이유는 무엇입니까?
• @Crowley, ” 정보 ” 페이지를 고려하십시오. 회사 직원 사진 ‘
• @Mark 아직 투명성을 사용하여 이유를 찾을 수 없습니다. 촬영 배경을 적절하게 선택하는 것이 훨씬 간단합니다.

JPEG 형식으로는 처리 할 수 없습니다. 투명도 자체는 최신 브라우저에서 JPEG를 사용하여 투명도를 가질 수 있습니다.하지만 복잡합니다. SVG를 사용하여 투명도를 처리하는 클리핑 마스크를 만들어야합니다. Photoshop에서는 펜 도구로이 작업을 수행 할 수 있습니다. 그런 다음 Illustrator로 내 보내면 펜 도구 경로를 SVG로 변환 할 수 있습니다.

다음은 수행 방법에 대한 더 자세한 가이드 입니다. 그래서.

비결은 두 가지를 만드는 것입니다.

• JPG
• 클리핑

JPG는 충분히 쉽습니다. Photoshop에서 바로 출력하고 최적화하세요.

이제 SVG를 설정할 수 있습니다. SVG는 e 래스터 그래픽. SVG는 벡터 그래픽으로 유명하지만 “매우 유연한 이미지 형식입니다.

<svg> <image xlink:href="/images/chris.jpg" x="0" y="0"> </svg> 

경로를 얻으려면 펜 도구로 만든 경로를 Illustrator입니다. 이제 경로가 있으며 “SVG [.]로 쉽게 내보낼 수 있습니다.]

이제 필요한 경로 데이터를 얻었습니다 [.] 우리가 시작한 SVG에서 그것을 사용합시다. 그런 다음 해당 클립 경로를 다음에도 적용합니다.

<svg viewBox="0 0 921.17 1409.71"> <defs> <clipPath id="chris-clip"> <path d="[path data from Illustrator]" /> </clipPath> </defs> <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409"> </svg> 

또는 여기에 PNG를 JPEG가 포함 된 SVG로 변환하는 도구가 있습니다 . WebP에 비해 장점은 iOS를 포함하여 Internet Explorer (버전 9부터) 및 Safari (버전 3부터)에서 작동한다는 것입니다.

즉, 일반적인 표준은 실제로 JPEG 배경에 색상을 지정하는 것입니다. 웹 사이트와 일치 시키거나 최적화 된 8 비트 PNG를 사용하기 위해 (PNGQuant와 같은 도구를 사용하여 일반 32 비트 PNG로 변환).

코멘트

• 공정하게 말해서 클리핑 마스크가있는 SVG는 jpg가 아닙니다 . 클리핑 마스크는 원할 수도 있고 원하지 않을 수도있는 복잡성 수준입니다.
• @Scott 동의합니다. ‘ 아닙니다. 하지만 ‘ 요구하는 질문은 읽지 않습니다. ‘ ” 투명도를 포함하는 JPEG 파일 “이 아니라 ” 투명도가있는 JPEG로 웹용 이미지, ” 더 모호합니다. 또한 그것이 OP 또는 그들의 클라이언트가 의미하는 바가 아니더라도 내 답변의 정보는 향후이 질문을 검색하고 찾는 미래의 독자와 관련이있을 수 있다고 생각합니다. WebP에 대한 정보를 포함하거나 PNG 사용을 제안하는 것과 마찬가지로 ‘ 유효합니다.
• 부분 투명성이 필요한 경우 마스크를 사용해야합니다. 클리핑 대신 별도의 회색조 PNG).
• 이는 차를 바다 위로 운전할 수 있다는 말과 같습니다. 어서.
• Photoshop에서 펜 단계를 수행하여 SVG로 내보내기 위해 경로를 Illustrator로 내보내는 것은 프로그램을 완전히 오용하는 것처럼 보입니다. Illustrator에서 펜 단계를 수행하기 만하면됩니다. 즉, 이것은 문제를 지나치게 복잡하게 만들고 현대 관행에 너무 제한적인 것처럼 보입니다 (예 :이 옵션을 사용하면 ‘ 부분 투명성을 가질 수 없음). 이미지 형식에 ‘ 유연성이 있다면 PNG 만 사용하세요. 소스 이미지가 JPG 여야하는 경우 Joey가 제안한 것처럼 그레이 스케일 이미지 마스크로 마스킹을 수행해야합니다. 특정 요구 사항을 제외하고는 두 가지 합리적인 옵션이 있어야합니다.

JPEG 2000 (JP2라고도 함)은 투명도를 완벽하게 지원하지만 비정상적인 브라우저 지원 (Safari 만 지원)

나는 Lucian에 동의하고 PNG 만 사용하며 매우 잘 지원되며 많은 도구가 있습니다 (pngcrush, optipng , pngout …) 파일을 압축합니다. 비교는 여기 를 참조하세요.

tylisirn이 말한 내용과 관련하여 저는 파일 크기에 대한 우려를 이해합니다. 요즘 웹 페이지가 부풀어 오르는 표준입니다. 그러나 반면에 페이지로드 시간이 빠르면 사용자에게 좋은 인상을 남기고 SEO에 긍정적 인 영향을 미칩니다 .

댓글

• 관련 : 프로그레시브 이미지 렌더링
• @ beppe9000 링크 감사합니다. ! 그것을 읽는 동안 나는 페이스 북이 실제 이미지를 다운로드하는 동안 어떻게 흐릿한 썸네일을 플레이스 홀더로 사용하는지 상기시켰다. ‘ 실제로 점진적 로딩이 아니며 빈 공간 대신 산만 함이 더 많지만 미세 축소판은 무시할 수있는 공간 (~ 200 바이트)을 차지한다는 장점이 있습니다. 이 기술은 사용자 정의 메타 데이터를 지원하는 경우 JPEG (JPEG까지도 포함)에 확실히 적용 할 수 있지만 브라우저가이를 구현하는 데 관심이 없을 것이라고 생각하지 않습니다. ‘ = “d958e390fc”>

PHP 및 Imagick을 사용하면 배경을 동적으로 제거 할 수 있습니다. (예를 들어 fushia 색상 제거). ~ 런타임에 JPG에서 PNG / GIF를 생성합니다 (서버 과열을 방지하기 위해 폴더에 투명 이미지를 캐시 할 수 있음).

https://stackoverflow.com/questions/43544467/imagemagick-white-to-transparent-background-while-maintaining-white-object

댓글

• 멋진 옵션이지만 OP는 단순히 이미지 파일을 웹 사이트를 설계하고 호스팅하지 않는 ‘ 클라이언트입니다. 따라서 이미지 자체는 투명성을 지원해야합니다.

JPEG의 손실 압축 특성으로 인해 압축을 사용하면 색이 주변 영역으로 번지기 때문에 크로마 키잉을 위해 단색 배경으로 JPEG를 만드는 것은 권장되지 않습니다.

이미지가 사용되는 방식에 따라 다음과 같은 회색조 무광택 이미지를 제공합니다. JEPG 형식에서 이미지 데이터의 그레이 스케일 구성 요소는 컬러 데이터보다 훨씬 높은 해상도로 저장되므로 표준 JPEG로 충분할 수 있습니다. 캔버스 API 등을 사용하여 결합해야합니다.

다른 사람들이 언급했듯이 더 나은 해결책은 알파 채널을 순진하게 지원하고 브라우저와 호환되는 PNG와 같은 형식을 사용하는 것입니다.

CSS3 mask-image 속성의 출현으로 JPEG에 외부 알파 마스크 이미지를 제공하여 알파 채널을 부여 할 수 있습니다. 부족합니다.

댓글

• 나는 ‘이 사실을 몰랐습니다. 하지만 ‘ 질문에 답하지 못하는 것 같습니다. ‘ OP가 웹 개발에 직접 관여하는 것 같지는 않지만 클라이언트의 잘못된 요청으로 벽에 부딪 혔습니다.
• 물론입니다. 그러나 유사한 솔루션을 찾는 다른 사람들에게는이 방법이 유용 할 수 있습니다.

엣지 케이스를 제외하고 다른 답변에 제시된 모든 실제 목적을위한 JPEG는 투명도를 지원하지 않습니다.

투명도를 지원하는 가장 일반적인 형식은 PNG, GIF 및 SVG입니다.

이 중 어느 것도 지원하지 않는 경우 파일 형식은 클라이언트에 적합하며 이상한 이유가 무엇이든 JPEG가 필요하므로 각 사용 사례에 대해 JPEG를 제공하기 만하면됩니다.

포스터를 제작하는 경우 포스터를 알려달라고 요청합니다. 색상을 지정하고 일치시킬 배경이있는 JPEG를 제공합니다. 단순히 종이에 인쇄하는 경우 흰색 배경이 좋습니다. 웹 사이트에서 사용할 경우 웹 사이트에서 사용되는 각 장소에 적합한 배경을 제공해야합니다.

힌트 : 각 사용 사례에 대해 요금을 청구해야합니다.

댓글

• 목록에 SVG를 포함하는 것은 다소 오해의 소지가 있습니다. ‘ 다른 두 형식과는 매우 다른 형식입니다.
• @ Abion47 IE9도 지원합니다 . 필요한만큼 크게 날려 버릴 수있는 SVG를 요구할만한 가치가있는 인쇄 회사라면 누구나 SVG를 요청할 것입니다.
• 당신은 제 요점을 오해합니다. 래스터 이미지로 시작된 이미지는 PNG 또는 GIF로 저장할 수있는 방식으로 SVG로 저장할 수 없습니다. OP ‘의 이미지가 원래 벡터 형식 이었다면 가능한 한 오랫동안 벡터 형식으로 유지해야합니다. 그러나 ‘ 이미지 구성 (예 : Photoshop) 인 경우, OP가 프로젝트를 다음으로 저장하기 위해 전체 프로젝트를 효과적으로 다시 실행하지 않는 한 SVG 배는 항해 한 지 오래되었습니다. SVG.

투명도가있는 PNG 이미지를 만든 다음 색상이 포함 된 SVG로 변환 할 수 있습니다. 정보는 JPEG로, 알파 채널은 회색조 마스크로 사용됩니다. 다음은 제가 작성한 도구입니다. https://github.com/igrmk/transpeg

예, 가능합니다.

패스 패널에서 클리핑 패스를 생성하기 만하면됩니다. 파일을 JPEG로 저장할 때 Photoshop은 JPEG 메타 데이터 섹션에 클리핑 경로를 저장합니다.

클리핑 경로는 클라이언트가 Photoshop에서 파일을 열 때만 적용되며 대부분의 다른 프로그램에서는 적용되지 않습니다. 특별히 웹 브라우저에는 없습니다.

댓글

• ” 고객이 제공하기를 원합니다. 웹용 이미지 (JPEG ”
• @Scott OTOH),이 대답과 JPEG2000은 실제로 다음과 같은 질문에 대답합니다. 쓴. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker 아니요 ‘ t, OP가 웹에서의 이미지 사용과 관련하여 이미지를 특별히 요청한 것으로 보이므로 Photoshop 전용 메타 데이터 기반 마스크 나 사실상 존재하지 않는 브라우저를 사용하는 JPEG 확장 이미지 형식이 아닙니다. 지원은 실제로 OP ‘의 실제 요구 사항을 질문에 쓰여진대로 해결합니다.