Com utilitzar imatges retina en campanyes d’e-mail màrqueting

Categoria: Email màrqueting

Ja saps la importància d’aconseguir que els teus e-mails siguin responsive i s’adaptin a tot tipus de dispositiu. Per sort, si utilitzes un editor com el d’Acrelia News pots oblidar-te de totes les qüestions tècniques que implica aconseguir que el teu butlletí sigui multi-dispositiu. 

Però a més de tots els dispositius i mides de pantalla, hi ha un altre element que entra en joc en l’e-mail màrqueting i que pot causar-te més d’un mal de cap: les pantalles retina o d’alta resolució DPI. 

Què és una pantalla retina

En 2010, Apple va llançar Iphone 4 que incorporava entre altres millores, una pantalla retina, la primera del mercat dirigida a consumidors finals.

Aquestes pantalles d’alta resolució, tenen una alta densitat de píxels (com norma més de 300px per polzada), per la qual cosa l’ull humà no es capaç de distingir-los des d’una distància de visualització normal, fent que les imatges i els textos es vegin de forma molt més nítida respecte a una pantalla convencional.

Com afecten el meu e-mail màrqueting

Si no optimitzem les nostres imatges, els usuaris que les visualitzin des de dispositius amb pantalla retina probablement veuran imatges més borroses. 

Veiem un exemple:

 

La imatge de la dreta té una resolució de 900px mentre que la de l’esquerra 300px, ambdues es mostren a una mida de 300px. Clarament la imatge de l'esquerra es veu més nítida. 

Quan la imatge de la dreta es mostra en una pantalla retina, el dispositiu duplica píxels amb la mateixa informació per adaptar-la i mostrar-la. En canvi, si la imatge té una alta densitat de píxels, com la de l'esquerra, això no és necessari.

Com optimitzar les meves imatges per pantalles retina

Optimitzar les imatges per pantalles retina és molt fàcil: has de desar-les al doble o més de resolució de com es mostraran. És a dir, si la imatge original té 580x200 píxels, hauries de crear-la amb una mida mínima de 1150x400px per millorar la seva visualització.

 No obstant, treballar amb imatges de major mida implica també major pes i ja saps que el pes en l’e-mail màrqueting, importa: pot afectar a la teva entregabilitat, que l’usuari consumeixi més dades des dels dispositius mòbils i fer que el contingut de l’e-mail es carregui més lent.

Llavors... Utilitzo imatges retina o no?

Has de valorar si realment l’ús d’imatges retina millora l’experiència dels teus subscriptors i si és necessari que les utilitzis en totes les teves campanyes i/o en tots els elements gràfics del teu butlletí.

Si estàs utilitzant moltíssimes imatges, molt grans o que no tenen elements amb un alt contrast, millor treballa amb imatges de la forma habitual, la càrrega serà molt més ràpida i milloraràs l’experiència de l’usuari, ja que es mostraran i descarregaran més ràpidament.

Per exemple, en les dues imatges que trobaràs a continuació, la versió de la dreta ocupa quasi 6 vegades més que la de l’esquerra i la diferencia de qualitat és inapreciable:

 

En canvi, logotips, icones o imatges amb text milloraran substancialment en pantalles retina si les optimitzes.

 

Com reduir el pes de les imatges retina

Si has decidit  utilitzar imatges retina, existeixen 2 tècniques que poden ajudar a baixar el pes de les mateixes.

Crear imatges de compressió

Consisteix a crear imatges de grans dimensions i desar-les a baixa qualitat. Seguint amb l’exemple previ: si vols mostrar una imatge amb una mida de 580x200 píxels, desa-la amb una mida 4 cops major (2320x800px) a qualitat baixa. La majoria de programes d’edició d’imatges com Photoshop permeten ajustar la qualitat de les imatges de manera molt senzilla:

Encara que vegis la nova imatge molt pixelada,  quan la mostris a 580x200 píxels es veurà nítida i el pes de la imatge serà molt reduït.

Comprimeix les imatges després de crear-les

Una altra opció, és que guardis les teves imatges d’alta resolució de la manera habitual i les optimitzis a posteriori. Existeixen programes online que permeten comprimir imatges sense comprometre la seva qualitat reduint la seva mida considerablement, com tinypng.com o jpegmini.com.

No et perdis res del nostre blog i uneix-te al nostre Telegram https://t.me/acrelianews

---

Articles relacionats