이메일 서명 지옥-로고 이미지를 포함하고 선명하게 유지하는 방법?

이 포럼에서 이메일 서명으로 이미지를 표시하는 문제 ( 예 : 여기 )와 관련하여 유용한 스레드가 몇 개 발견되었으며 웹 전체를 검색했지만 여전히 좋은 해결책을 찾지 못했습니다. 충분히 문제를 해결합니다. 내 고객은 회사 로고가 이메일 서명에 포함되기를 원하며, 발생한 문제는 다음과 같이 요약 할 수 있습니다.

1. 실제 크기로 AI에서 래스터 화 된 로고 버전을 내보낼 수 있으며 데스크탑에서는 선명하게 보이지만 iPhone과 같은 고밀도 디스플레이 (예 : "레티 나")에서는 픽셀 화 / 흐리게 보입니다.
2. 내가 언급 한 스레드에서 제안한 것처럼, 고밀도 디스플레이를 대상으로하기 위해 실제 표시 크기의 2-3 배로 로고를 내보낼 수 있지만 로고가 축소되면 비 고밀도 디스플레이에서 로고가 부드럽게 보입니다 . 로고에 텍스트가 포함되어 있기 때문에 브라우저 / 이메일 클라이언트에서 실제 텍스트와 병치 할 때 끔찍한 것처럼 보이기 때문에이 경우 특히 문제가됩니다.
3. 나는 .svg옵션으로 간주 했지만 분명히 지원은 크지 않습니다. 이 경우 클라이언트의 전자 메일을 읽는 대다수의 사용자가 Outlook을 사용한다고 가정하므로 iOS / webkit / etc에서만 제대로 렌더링되는 것은 실행 가능한 옵션이 아닙니다.

나는이 시점에서 상실하고 있으며 다른 가능한 옵션이 있는지 궁금합니다. 예를 들어 전자 메일 서명에 loreres fallback으로 고밀도 이미지를 구현할 수 있는지 확실하지 않습니까?

여기에 제안이나 의견이 있으면 대단히 감사하겠습니다. 이 과제가 얼마나 어려웠는지는 코믹한면과 맞 닿아 있습니다.

내가 당신이라면 아이디어를 버릴 것입니다. 전자 메일 내에서는 단순히 지원이 없기 때문에 고용 처리는 최소한의 문제입니다.

그러나 문제는 더 일찍 시작됩니다. 대부분의 이메일 클라이언트는 이미지를 제거하고 사용자가 이미지를 활성화 할 수있는 버튼을 추가합니다. 로고에 대한이 모든 소란은 너무 번거 롭습니다.

나는 단지 시그니처를 평문으로 작성하고 그 것입니다.

그러나 아마도 당신은 포기하고 싶지 않아서 이것이 당신의 무언가가 될 수 있습니다.

또는이 기술을 사용하십시오 :

http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/

기술 솔루션은 다음과 같습니다.

1. 서버에서 이미지를 호스팅하고 <img>주소가 있는 태그 만 포함 하십시오. 서버는 HTTP 요청의 메타 정보를 사용하여 이미지를 가져오고 장치에 적합한 이미지 크기를 제공 할 수 있습니다.

2. 표시 크기 인식 CSS와 동일하게 수행하십시오 (그러나 다양한 전자 메일 클라이언트 에서이 기능을 얼마나 잘 지원하는지 잘 모르겠습니다).하지만 기본적으로 메일에 두 이미지를 추가하고 다양한 표시 크기에 CSS를 사용하여 올바른 이미지 (및 인쇄를 위해 특수 이미지를 지정할 수도 있습니다 ...)

오늘날 많은 메일 클라이언트는 SVG (Scalable Vector Graphics)를 지원합니다. 해당 고객의 경우 SVG를 표시하십시오. 컴퓨터 프로그램처럼 읽히므로 (예 : 원을 그린 다음 120 및 240도에서 해당 원에 연결된 선을 그리는 등) 스케일링에 의해 손상되지 않도록 보장되므로 프로세서는 흐릿하지 않은 이미지를 올바르게 렌더링합니다 내부 지원 소프트웨어.

이전 클라이언트에 관심이있는 경우 다양한 대체 기술 이 있지만 관심있는 대체 (있는 경우) (예 : 서명을 표시하려는 이메일 클라이언트)를 결정해야합니다. 개인적으로 복잡한 100 % 적용 범위를 사용하거나 적용하지 않고 최소한의 노력으로 거의 보편적 인 범위를 제공하는 방법을 선택하고 싶습니다 .Android 2.3을 제외한 모든 것을 지원하는 멋진 방법이 있습니다. 암호.

반면에 CSS 미디어 셀렉터도 작동해야합니다. 화면 해상도가 800 픽셀보다 작 으면 오늘날 사용하는 PNG 또는 JPEG를 사용하고 그렇지 않으면 SVG를 사용하십시오. "레티 나 디스플레이"장치가 SVG를 지원하거나 최소한 대다수를 지원할 것이라고 확신합니다.

정말 오래된 게시물이지만 몇 시간 동안 같은 문제로 어려움을 겪고 방금 해결하려고했기 때문에 어떻게했는지 설명하겠습니다. 내가 직면 한 문제는 회사 로고가 데스크탑 모니터 (HD조차도)에 잘 표시되었다는 것입니다. 그러나 망막 디스플레이 폰에서 보았을 때 흐릿하거나 흐릿하게 보였습니다. 클라이언트에서 얻은 이미지는 요청한 크기와 정확히 동일했습니다. 레티 나 디스플레이의 문제점은 엄격히 표준 화면보다 단위 영역에 4 배 더 많은 픽셀이 있다는 것입니다. 따라서 필요한 것은 화면에서 원하는 크기의 두 배 이미지입니다. 예를 들어 로고의 너비와 높이를 124x48로 설정하려면 248x28의 이미지를 만드십시오. 이것이하는 일은 이미지 해상도를 두 배로 늘리고 픽셀 수를 네 배로 늘리는 것입니다. 그런 다음 HTML을 사용하여 새 이미지를 새로운 너비의 절반으로 표시하십시오.<img src=”your_image.jpg” width=”124” />. 이렇게하면 이미지 픽셀 화 또는 흐림 현상이 해결됩니다. 건배

나는이 같은 문제가 있었다! 매우 실망 스럽지만 마침내 예를 들어 Illustrator에서 120px (높이) x 300px (너비) 대지를 사용하고 96ppi 해상도의 PNG 8로 화면을 내 보내면 Microsoft 전망 서명에 효과적이라는 것을 알았습니다!