Piekło z podpisem e-mail - Jak dołączyć obraz logo i zachować ostrość?

Znalazłem kilka przydatnych wątków na tym forum w odniesieniu do problemów związanych z (wyświetlaniem) obrazów w podpisach e-mailowych - tutaj na przykład - i szukałem w Internecie, ale nadal nie znalazłem dobrego rozwiązania, które wystarczająco rozwiązuje problem. Mój klient po prostu chciałby, aby logo jego firmy było zawarte w podpisie jego e-maili, a napotkane problemy można streścić w następujący sposób:

1. Mogę wyeksportować zrasteryzowaną wersję logo z AI w rzeczywistym rozmiarze, i będzie wyglądać ostro na pulpicie, ale piksele / rozmyte na wyświetlaczach o wysokiej gęstości (np. „Siatkówka”), takich jak iPhone.
2. Jak zasugerowano w wątku, do którego się odwołałem, mogę wyeksportować logo 2-3 razy w stosunku do rzeczywistego wyświetlanego rozmiaru, aby celować w wyświetlacze o wysokiej gęstości, ale logo będzie wtedy wyglądać miękko na wyświetlaczach o niskiej gęstości, gdy zostanie zmniejszone . Jest to szczególny problem w tym przypadku, ponieważ logo zawiera tekst, który wygląda okropnie, gdy zestawiony z rzeczywistym tekstem w przeglądarce / kliencie poczty e-mail.
3. Rozważyłem .svgjako opcję, ale najwyraźniej wsparcie nie jest świetne; i w tym przypadku zakładam, że zdecydowana większość użytkowników czytających wiadomości e-mail tego klienta będzie korzystać z programu Outlook, więc coś, co renderuje się poprawnie tylko w iOS / webkit / etc, nie jest realną opcją.

W tej chwili jestem zagubiony i zastanawiam się, czy jest jakaś inna możliwa opcja. Nie jestem pewien, na przykład, czy możliwe jest zaimplementowanie obrazu o wysokiej gęstości z rezerwowym odtwarzaniem w niskiej rozdzielczości w podpisie e-mail?

Wszelkie sugestie / spostrzeżenia tutaj są bardzo mile widziane. Komiczne jest to, jak trudne okazało się to zadanie.

Gdybym był tobą, porzuciłbym Pomysł. Obsługa wynajmu to najmniejszy z twoich problemów, ponieważ po prostu nie ma wsparcia w wiadomościach e-mail.

Ale problemy zaczynają się wcześniej. Większość klientów poczty e-mail usuwa zdjęcia i dodaje przycisk, w którym użytkownik może je aktywować. Całe to zamieszanie dla samego logo jest zbyt wielkim problemem.

Po prostu napisałbym sig tekstem jawnym i to wszystko.

Ale może nie chcesz się poddać, więc może to być coś dla ciebie

Lub użyj tej techniki:

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

Rozwiązaniami technicznymi mogą być:

1. Umieść obraz na serwerze i po prostu umieść <img>tag z adresem. Serwer może użyć meta-informacji żądania HTTP, które pobierze obraz i dostarczy właściwy rozmiar obrazu dla urządzenia.

2. Zrób to samo z CSS obsługującym rozmiar ekranu (ale nie wiem, jak dobre jest wsparcie dla różnych klientów e-mail). Zasadniczo możesz jednak dołączyć oba obrazy do wiadomości e-mail i użyć CSS do wyświetlania różnych rozmiarów odpowiedni obraz (możesz nawet określić specjalny obraz do wydrukowania ...)

Obecnie wielu klientów poczty obsługuje SVG (Scalable Vector Graphics). Dla tych klientów pokaż SVG. Gwarantuje się, że nie zostanie zniszczony przez skalowanie, ponieważ czyta się jak program komputerowy (np. Narysuj okrąg, a następnie narysuj linię połączoną z tym okręgiem pod kątem 120 i 240 stopni itp.), Więc procesor poprawnie wyrenderuje nierozmyty obraz wewnątrz oprogramowania pomocniczego.

Istnieje wiele technik zastępczych, jeśli zależy Ci na starszych klientach, ale musisz określić, które awarie, jeśli w ogóle, na których Ci zależy (np. Których klientów e-mail obawiasz się o pokazanie podpisu). Osobiście wybrałbym metodę, która zapewniłaby prawie uniwersalną ochronę przy minimalnym wysiłku, zamiast próbować skomplikowanego 100% zasięgu lub bez pokrycia - istnieje fajna metoda, która obsługuje wszystkie oprócz Androida 2.3, co jest prawdopodobnie rzadkie i składa się tylko z czterech linii kod.

Z drugiej strony prawdopodobnie powinny również działać selektory mediów CSS. Jeśli rozdzielczość ekranu jest mniejsza niż, powiedzmy 800 pikseli, użyj formatu PNG lub JPEG, którego używasz dzisiaj, w przeciwnym razie użyj SVG. Jestem całkiem pewien, że każde urządzenie z „wyświetlaczem siatkówki” będzie obsługiwać SVG, a przynajmniej większość.

Naprawdę stary post, ale skoro przez wiele godzin borykałem się z tym samym problemem i właśnie go rozwiązałem, opiszę, jak to zrobiłem. Problem, z którym się spotkałem, polegał na tym, że logo firmy wyświetlałem dobrze na monitorach stacjonarnych (nawet HD). Ale na telefonie z wyświetlaczem siatkówki wyglądał rozmazany / niewyraźny. Obraz, który dostałem od klienta był dokładnie taki sam, jak rozmiar, o który prosiłem. Problem (tylko dla deweloperów :) z wyświetlaczami Retina polega na tym, że mają one cztery razy więcej pikseli w obszarze jednostkowym niż standardowe ekrany. Potrzebujesz więc obrazu dwukrotnie większego niż chcesz na ekranie. Na przykład, jeśli chcesz, aby Twoje logo miało szerokość i wysokość 124 x 48, utwórz obraz o wymiarach 248 x 28. Powoduje to podwojenie rozdzielczości obrazu i czterokrotność liczby pikseli. Następnie użyj HTML, aby wymusić wyświetlanie nowego obrazu w połowie jego nowej szerokości, tj<img src=”your_image.jpg” width=”124” />. Może to rozwiązać problem pikselizacji lub rozmycia obrazu. Twoje zdrowie

Miałem ten sam problem! Super frustrujące, ale w końcu odkryłem, że użycie obszaru roboczego 120px (wysokość) na 300px (szerokość), na przykład, w programie Illustrator, a następnie eksportowanie do ekranów jako PNG 8 o rozdzielczości 96 ppi działa dobrze dla podpisów Microsoft Outlook!