Email địa ngục chữ ký - Làm thế nào để bao gồm một hình ảnh logo và giữ cho nó sắc nét?

Tôi đã tìm thấy một vài chủ đề hữu ích trên diễn đàn này liên quan đến các vấn đề được đặt ra (hiển thị) hình ảnh trong chữ ký email - ví dụ ở đây - và tôi đã tìm kiếm trên web, nhưng vẫn không tìm thấy giải pháp tốt nào đủ giải quyết vấn đề. Một khách hàng của tôi chỉ đơn giản muốn logo của công ty anh ấy được bao gồm trong chữ ký email của anh ấy và các vấn đề tôi gặp phải có thể được tóm tắt như sau:

1. Tôi có thể xuất phiên bản rasterized của logo từ AI ở kích thước thực và nó sẽ trông sắc nét trên màn hình nền nhưng bị mờ / mờ trên màn hình mật độ cao (ví dụ: "võng mạc") như iPhone.
2. Như được đề xuất trong luồng mà tôi đã tham chiếu, tôi có thể xuất logo với kích thước gấp 2-3 lần thực tế, hiển thị để nhắm mục tiêu vào màn hình mật độ cao, nhưng logo sau đó sẽ trông mềm mại trên màn hình không mật độ cao khi được thu nhỏ . Đây là một vấn đề cụ thể trong trường hợp này vì logo chứa văn bản, trông rất tệ khi được nối với văn bản thực tế trong trình duyệt / ứng dụng email.
3. Tôi đã xem xét .svgnhư một lựa chọn, nhưng rõ ràng sự hỗ trợ không lớn; và trong trường hợp này, tôi cho rằng phần lớn người dùng đang đọc email của khách hàng này sẽ sử dụng Outlook, do đó, một cái gì đó chỉ hiển thị đúng trong iOS / webkit / etc không phải là một lựa chọn khả thi.

Tôi đang thua lỗ vào thời điểm này và tự hỏi liệu có bất kỳ lựa chọn nào khác ngoài đó không. Tôi không chắc chắn, ví dụ, nếu có thể thực hiện một hình ảnh mật độ cao với dự phòng lo-res trong chữ ký email?

Bất kỳ đề xuất / hiểu biết ở đây được nhiều đánh giá cao. Nó giáp với hài hước rằng nhiệm vụ này đã trở nên khó khăn như thế nào.

Nếu tôi là bạn, tôi sẽ từ bỏ Ý tưởng. Xử lý thuê là vấn đề ít nhất của bạn, bởi vì đơn giản là không có hỗ trợ trong E-mail.

Nhưng các vấn đề bắt đầu sớm hơn. Hầu hết các ứng dụng email loại bỏ hình ảnh và thêm một nút nơi người dùng có thể kích hoạt hình ảnh. Tất cả sự phiền phức này chỉ vì một logo là quá nhiều rắc rối.

Tôi sẽ chỉ viết sig với văn bản gốc và đó là nó.

Nhưng có lẽ bạn không muốn từ bỏ vì vậy đây có thể là một cái gì đó cho bạn

Hoặc sử dụng kỹ thuật này:

http://blog.mailchimp.com/keep-high-d mật-displays-from-uglifying-your-emails/

Giải pháp kỹ thuật có thể là:

1. Lưu trữ hình ảnh trên một máy chủ và chỉ cần nhúng một <img>thẻ với địa chỉ. Máy chủ có thể sử dụng thông tin meta của Yêu cầu HTTP sẽ tìm nạp hình ảnh và cung cấp kích thước hình ảnh phù hợp cho thiết bị.

2. Thực hiện tương tự với CSS nhận biết kích thước hiển thị (Nhưng tôi không biết khả năng hỗ trợ này tốt như thế nào trong các Khách hàng E-Mail khác nhau) Nhưng về cơ bản, bạn có thể nối cả hai hình ảnh vào thư và sử dụng CSS cho các kích thước hiển thị khác nhau để hiển thị hình ảnh bên phải (và thậm chí bạn có thể chỉ định một hình ảnh đặc biệt để in ...)

Nhiều ứng dụng thư hiện nay hỗ trợ SVG (Đồ họa vectơ có thể mở rộng). Đối với những khách hàng đó, hãy hiển thị một SVG. Nó được đảm bảo không bị phá hủy bằng cách chia tỷ lệ, vì nó đọc giống như một chương trình máy tính (ví dụ: vẽ một vòng tròn, sau đó vẽ một đường kết nối với vòng tròn đó ở 120 và 240 độ, v.v.), vì vậy bộ xử lý sẽ hiển thị chính xác hình ảnh không bị mờ bên trong phần mềm hỗ trợ.

Có nhiều kỹ thuật dự phòng nếu bạn quan tâm đến khách hàng lớn tuổi, nhưng bạn sẽ cần xác định dự phòng nào, nếu có, bạn quan tâm (ví dụ: khách hàng email nào bạn quan tâm về việc hiển thị chữ ký). Cá nhân tôi chọn một phương pháp mang lại sự bao phủ gần như toàn cầu với nỗ lực tối thiểu thay vì thử bảo hiểm 100% phức tạp hoặc không có phạm vi bảo hiểm - có một phương pháp tốt hỗ trợ tất cả trừ Android 2.3, có lẽ hiếm, nhưng chỉ có bốn dòng mã.

Mặt khác, các bộ chọn phương tiện CSS cũng có thể hoạt động. Nếu độ phân giải màn hình nhỏ hơn, giả sử rộng 800 pixel, hãy sử dụng PNG hoặc JPEG mà bạn sử dụng ngày hôm nay, nếu không hãy sử dụng SVG. Tôi khá chắc chắn rằng bất kỳ thiết bị "màn hình retina" nào cũng sẽ hỗ trợ SVG, hoặc ít nhất là phần lớn sẽ.

Bài viết thực sự cũ nhưng vì tôi đã phải vật lộn với cùng một vấn đề trong nhiều giờ và chỉ tình cờ giải quyết nó, tôi sẽ mô tả cách tôi đã làm nó. Vấn đề tôi gặp phải là logo công ty tôi đã hiển thị tốt trong màn hình máy tính để bàn (thậm chí HD). Nhưng nó trông mờ / mờ khi nhìn thấy trên điện thoại màn hình retina. Hình ảnh tôi nhận được từ khách hàng chính xác bằng kích thước yêu cầu. Vấn đề (đúng với các nhà phát triển :) với màn hình retina là chúng có số pixel gấp bốn lần trong một đơn vị so với màn hình tiêu chuẩn. Vì vậy, những gì bạn cần là một hình ảnh có kích thước gấp đôi mà bạn muốn trên màn hình. Ví dụ: nếu bạn muốn logo của mình có chiều rộng và chiều cao là 124x48, hãy tạo một hình ảnh có kích thước là 248x28. Điều này làm là, nó tăng gấp đôi độ phân giải hình ảnh và tăng gấp bốn lần số pixel. Sau đó, sử dụng HTML để buộc hình ảnh mới của bạn hiển thị ở một nửa chiều rộng mới của nó, tức là<img src=”your_image.jpg” width=”124” />. Làm điều này sẽ giải quyết bất kỳ pixel pixel hoặc làm mờ. Chúc mừng

Tôi có vấn đề này như nhau! Siêu bực bội, nhưng cuối cùng tôi đã thấy rằng sử dụng bản vẽ nghệ thuật 120px (chiều cao) 300px (chiều rộng), ví dụ, trong Illustrator sau đó xuất cho màn hình dưới dạng PNG 8 với độ phân giải 96 ppi hoạt động tốt cho chữ ký triển vọng của Microsoft!