Ада підпису електронної пошти - Як включити зображення логотипу і чи залишати його чітким?

Я знайшов пару корисних тем на цьому форумі щодо проблем, які виникають (відображення) зображень у підписах електронної пошти-- ось , наприклад, - і я шукав по всьому Інтернету, але все ще не знайшов хорошого рішення, яке достатньо вирішує проблему. Клієнту мого просто подобається, що логотип його компанії міститься в підписі його електронних листів, і проблеми, з якими я стикався, можуть бути зведені таким чином:

1. Я можу експортувати растеризовану версію логотипу з AI фактичного розміру, і він буде виглядати різким на робочому столі, але пікселізований / розмитий на високій щільності (наприклад, "сітківка"), таких як iPhone.
2. Як було запропоновано в потоці, на який я посилався, я можу експортувати логотип у 2-3 рази від фактичного розміру, що відображається, щоб орієнтуватися на дисплеї високої щільності, але логотип буде виглядати м'яким на дисплеях, що не містять високої щільності, коли його зменшують . Це особлива проблема в цьому випадку, оскільки логотип містить текст, який виглядає жахливо, коли він розташований у сукупності з фактичним текстом у браузері / клієнті електронної пошти.
3. Я розглядав .svgяк варіант, але, мабуть, підтримка не велика; і в цьому випадку я припускаю, що переважна більшість користувачів, які читають електронну пошту цього клієнта, будуть використовувати Outlook, тому те, що відображається належним чином лише в iOS / webkit / тощо, не є можливим варіантом.

Я зараз втрачаю і цікавлюсь, чи існує якийсь інший варіант. Я не впевнений, наприклад, чи можна реалізувати зображення високої щільності з відновлюваним lo-res в підписі електронної пошти?

Будь-які пропозиції / думки тут високо оцінені. Межує з комічним, наскільки складним виявилося це завдання.

Якби я був ти, я б відмовився від ідеї. Робота з наймом - найменша з ваших проблем, тому що в E-Mails просто немає підтримки.

Але проблеми починаються раніше. Більшість клієнтів електронної пошти знімають зображення та додають кнопку, де користувач може активувати зображення. Вся ця метушня лише за логотип - це занадто багато клопоту.

Я б просто написав сиг з простим текстом і ось це.

Але, можливо, ти не хочеш здаватися, щоб це могло бути чимось для твого

Або скористайтеся цією технікою:

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

Технічні рішення можуть бути:

1. Розмістіть зображення на сервері та просто вставте <img>тег із адресою. Сервер може використовувати метаінформацію HTTP-запиту, яка отримає зображення та надасть потрібний розмір зображення для пристрою.

2. Зробіть те ж саме з CSS, що знає розмір дисплея (але я не знаю, наскільки хороша підтримка цього в різних клієнтах електронної пошти) Але, по суті, ви можете додавати обидва зображення до пошти та використовувати CSS для різних розмірів дисплея для відображення дисплея правильне зображення (і ви навіть можете вказати спеціальне зображення для друку ...)

Сьогодні багато поштових клієнтів підтримують SVG (масштабована векторна графіка). Для цих клієнтів покажіть SVG. Це гарантовано не буде знищено за допомогою масштабування, оскільки воно читається як комп'ютерна програма (наприклад, намалюйте коло, потім намалюйте лінію, з'єднану з цим колом у 120 та 240 градусах тощо), тому процесор буде правильно виводити зображення, що не розмивається всередині підтримуючого програмного забезпечення.

Якщо ви дбаєте про старших клієнтів, існує різноманітна техніка резервного копіювання , але вам потрібно визначити, які резервні копії, якщо такі є, ви переймаєтесь (наприклад, про які клієнти електронної пошти ви турбуєтесь про те, щоб відобразити підпис у програмі). Я особисто вибрав метод, який давав майже універсальне покриття з мінімальними зусиллями, а не пробувати складне 100% покриття або без покриття - є приємний, який підтримує все, окрім Android 2.3, який, мабуть, рідкісний, і є лише чотири рядки код.

З іншого боку, CSS-медіа-селектори, ймовірно, теж повинні працювати. Якщо роздільна здатність екрана менше, скажімо, шириною 800 пікселів, використовуйте PNG або JPEG, які ви використовуєте сьогодні, інакше використовуйте SVG. Я впевнений, що будь-які пристрої із “сітківкою” підтримують SVG, або, принаймні, більшість.

Дійсно стара посада, але оскільки я годинами боровся з тим же питанням і просто трапилось вирішити це, я розповім, як я це зробив. Проблема, з якою я стикався, полягала в тому, що логотип компанії я добре відображав на настільних моніторах (навіть HD). Але він виглядав розмитим / нечітким, коли його бачили на телефоні сітківки. Образ, який я отримав від клієнта, був точно рівний розміру, про який ви просили. Проблема (суворо для розробників :) із дисплеями сітківки полягає в тому, що вони мають в чотири рази більше пікселів на одиниці, ніж у стандартних екранів. Отже, вам потрібно зображення вдвічі меншого розміру, яке потрібно на екрані. Наприклад, якщо ви хочете, щоб ваш логотип був шириною та висотою 124x48, створіть зображення розміром 248x28. Це означає, що він подвоює роздільну здатність зображення і вчетверо збільшує кількість пікселів. Потім використовуйте HTML, щоб змусити ваше нове зображення відображатися на половині його нової ширини, тобто<img src=”your_image.jpg” width=”124” />. Це повинно вирішити будь-яку пікселізацію або розмиття зображення. Ура

У мене була ця сама проблема! Супер засмучує, але я, нарешті, виявив, що, наприклад, використання графічного аркуша 120 пікселів (висота) на 300 пікс (ширина), наприклад, в Illustrator, потім експорт для екранів у форматі PNG 8 з роздільною здатністю 96 ppi працює добре для підписів Microsoft Outlook!