Inferno sulla firma e-mail - Come includere un'immagine del logo e renderla nitida?

Ho trovato un paio di discussioni utili su questo forum rispetto ai problemi posti dalla (visualizzazione) immagini nelle firme delle e-mail - qui , per esempio - e ho cercato in tutto il web, ma non ho ancora trovato una buona soluzione che risolve sufficientemente il problema. Un mio cliente vorrebbe semplicemente che il logo della sua azienda fosse incluso nella firma delle sue e-mail e i problemi che ho riscontrato possono essere riassunti come segue:

1. Posso esportare una versione rasterizzata del logo dall'intelligenza artificiale a dimensioni reali, e apparirà nitida sul desktop ma pixel / sfocata su display ad alta densità (ad esempio "retina") come l'iPhone.
2. Come suggerito nel thread a cui ho fatto riferimento, posso esportare il logo 2-3 volte la dimensione effettiva visualizzata per indirizzare i display ad alta densità, ma il logo apparirà morbido sui display non ad alta densità quando viene ridimensionato . Questo è un problema particolare in questo caso in quanto il logo contiene testo, che sembra terribile se accostato a testo reale nel browser / client di posta elettronica.
3. Ho considerato .svgun'opzione, ma a quanto pare il supporto non è eccezionale; e in questo caso suppongo che la stragrande maggioranza degli utenti che leggono l'e-mail di questo client utilizzeranno Outlook, quindi qualcosa che viene visualizzato correttamente solo in iOS / webkit / etc non è un'opzione praticabile.

A questo punto sono perplesso e mi chiedo se ci siano altre possibili opzioni là fuori. Non sono sicuro, ad esempio, se è possibile implementare un'immagine ad alta densità con fallback lo-res in una firma e-mail?

Eventuali suggerimenti / approfondimenti qui sono molto apprezzati. È al limite del comico quanto si sia rivelato difficile questo compito.

Se fossi in te abbandonerei l'Idea. La gestione delle assunzioni è il minore dei tuoi problemi, perché semplicemente non c'è supporto nelle e-mail.

Ma i problemi iniziano prima. La maggior parte dei client di posta elettronica elimina le immagini e aggiunge un pulsante in cui l'utente può attivare le immagini. Tutta questa confusione per un solo logo è davvero una seccatura.

Vorrei solo scrivere il sig con testo in chiaro e questo è tutto.

Ma forse non si vuole rinunciare così questo potrebbe essere qualcosa per la vostra

O usa questa tecnica:

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

Le soluzioni tecniche potrebbero essere:

1. Ospita l'immagine su un server e incorpora un <img>tag con l'indirizzo. Il server potrebbe utilizzare le meta-informazioni della richiesta HTTP che recupererà l'immagine e fornirà la giusta dimensione dell'immagine per il dispositivo.

2. Fai lo stesso con CSS di dimensioni di visualizzazione (Ma non so quanto sia valido il supporto per questo in vari client di posta elettronica) Ma essenzialmente puoi aggiungere entrambe le immagini alla posta e usare CSS per varie dimensioni di visualizzazione per visualizzare il immagine corretta (e puoi persino specificare un'immagine speciale per la stampa ...)

Oggi molti client di posta supportano SVG (Scalable Vector Graphics). Per quei clienti, mostra un SVG. È garantito che non venga distrutto dal ridimensionamento, perché si legge come un programma per computer (ad es. Disegna un cerchio, quindi disegna una linea collegata a quel cerchio a 120 e 240 gradi, ecc.), Quindi il processore renderà correttamente un'immagine non sfocata all'interno del software di supporto.

Esistono diverse tecniche di fallback se ti interessano i client più vecchi, ma dovrai determinare quali fallback, se ce ne sono, a cui tieni (ad es. Quali client di posta elettronica ti preoccupano di mostrare la firma). Personalmente sceglierei un metodo che ha fornito una copertura quasi universale con il minimo sforzo piuttosto che provare una copertura complicata al 100% o nessuna copertura - ce n'è uno carino che supporta tutti tranne Android 2.3, che è probabilmente raro, ed è solo quattro righe di codice.

D'altra parte, anche i selettori di supporti CSS dovrebbero probabilmente funzionare. Se la risoluzione dello schermo è inferiore, diciamo 800 pixel di larghezza, usa il PNG o il JPEG che usi oggi, altrimenti usa un SVG. Sono abbastanza certo che qualsiasi dispositivo "display retina" supporterebbe SVG, o almeno la maggior parte lo farebbe.

Post davvero vecchio ma dato che stavo lottando per ore con lo stesso problema e mi è capitato di risolverlo, descriverò come l'ho fatto. Il problema che ho dovuto affrontare era che il logo aziendale che avevo visualizzato bene nei monitor desktop (anche in HD). Ma sembrava sfocato / sfocato quando visto su un telefono con display retina. L'immagine che ho ricevuto dal cliente era esattamente uguale alla dimensione richiesta. Il problema (rigorosamente per gli sviluppatori :) con i display Retina è che hanno quattro volte più pixel in un'area unitaria rispetto agli schermi standard. Quindi ciò di cui hai bisogno è un'immagine del doppio delle dimensioni che desideri sullo schermo. Ad esempio, se vuoi che il tuo logo abbia larghezza e altezza 124x48, crea un'immagine di 248x28. Ciò che fa è, raddoppia la risoluzione dell'immagine e quadruplica il numero di pixel. Quindi utilizzare HTML per forzare la visualizzazione della nuova immagine a metà della nuova larghezza, ad es<img src=”your_image.jpg” width=”124” />. Ciò dovrebbe risolvere qualsiasi pixel o sfocatura dell'immagine. Saluti

Ho avuto questo stesso problema! Super frustrante, ma alla fine ho scoperto che l'uso di una tavola da disegno da 120 px (altezza) da 300 px (larghezza), ad esempio, in Illustrator, quindi esportare per gli schermi come PNG 8 con una risoluzione di 96 ppi funziona bene per le firme di Outlook di Microsoft!