Incrustar imágenes en correos HTML: Cómo crear el logo perfecto
Hay varias formas de incrustar imágenes en correos electrónicos, desde enlaces clásicos hasta incrustaciones directas. Pero, ¿qué método ofrece el mejor resultado? Aunque las etiquetas CID están perdiendo importancia, sigue siendo una regla de oro: menos es más.
Para garantizar el rendimiento de tus envíos, siempre debes comprimir las imágenes y comprobar los formatos de forma específica. Aquí descubre cómo integrar gráficos de forma profesional y por qué una prueba final de envío es indispensable para una pantalla sin errores.
Tabla de contenido
Incrustar en línea con la codificación Base64
La imagen está completamente incluida en el correo electrónico
La incrustación de imágenes en el correo electrónico requiere una cadena codificada en Base64. Entonces, primero, convierta la imagen al formato BASE64. Una vez que su imagen esté codificada, insértela en el correo electrónico con una etiqueta de imagen HTML estándar.
Siga los pasos a continuación para incrustar imágenes en sus correos electrónicos en línea con la codificación Base64.
- Reduzca el tamaño de la imagen para mantener el correo electrónico lo más pequeño posible
- Convierta la imagen a una codificación Base64. Puede encontrar los convertidores gratuitos correspondientes en la web.
Ventaja
- Sencillo
Desventajas
- Puede aumentar el tamaño de los correos electrónicos
- Mayor riesgo de bloqueo
Ejemplos HTML – Incrustar imagen con codificación Base64
- Ejemplo 1 – con enlace a un sitio web
- Ejemplo 2 – Cambiar el tamaño de la imagen html
Incrustación a través de un enlace
Así lo hace AMAZON & Co
Si echamos un vistazo a los correos electrónicos de Amazon, vemos que las imágenes de estos correos electrónicos se incluyen a través de un enlace URL.
«NO APRENDAS DE NADIE. APRENDE DE LOS MEJORES.», TÜV SÜD Academy, 2022
Siga los pasos a continuación para incluir imágenes en sus correos electrónicos a través del enlace.
- Reducir el tamaño de la imagen para que la menor cantidad de datos posible tenga que pasar por la red
- Sube las imágenes a un directorio de tu servidor o a cualquier otra carpeta pública en la nube
- Asegúrate de que la imagen esté disponible públicamente
- Enlace a las imágenes en su correo electrónico HTML con la ruta url completa
Ventajas
- Mantiene el tamaño del correo electrónico pequeño
- Requiere poco esfuerzo adicional
- Le permite realizar cambios en las imágenes después de enviarlas
Desventajas
- A veces sufre de problemas de bloqueo con algunos servicios
- Requiere descarga desde servidores externos
Ejemplo HTML – Insertar imagen con enlace URL
Integración vía CID
Las imágenes CID son una forma algo obsoleta de incrustar imágenes en correos electrónicos HTML.
La imagen se adjunta al correo electrónico y se vincula a él con una etiqueta HTML en el correo electrónico. Cuando el usuario abre el correo electrónico, la imagen se incrusta en el correo electrónico.
Ejemplo HTML – Insertar imagen a través de CID
Einbinden per CID
code
/code
Ejemplos de SAP ABAP
code
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
* Logo vom Applikationsserver lesen
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
DATA:
ls_soli TYPE soli,
itb_bcsy_text2 TYPE bcsy_text,
lv_filename TYPE localfile VALUE 'c:\mes.png',
lv_xstring TYPE xstring, " Logo-Dateiinhalt als xstring
lv_string TYPE string, " Datei von BASE64 in String umwandeln
lt_soli_tab TYPE soli_tab. " String in soli_tab umwandeln
itb_bcsy_text2 = itb_bcsy_text.
REFRESH: itb_bcsy_text.
LOOP AT itb_bcsy_text2 INTO ls_soli.
IF ls_soli CS '%%ADD_LOGO%%'.
* Datei zum binären Lesen öffnen
OPEN DATASET lv_filename FOR INPUT IN BINARY MODE.
IF sy-subrc IS INITIAL.
* Daten lesen
READ DATASET lv_filename INTO lv_xstring.
IF lv_xstring IS NOT INITIAL.
CALL FUNCTION 'SCMS_BASE64_ENCODE_STR'
EXPORTING
input = lv_xstring
IMPORTING
output = lv_string.
CALL METHOD cl_bcs_convert=>string_to_soli
EXPORTING
iv_string = lv_string
RECEIVING
et_soli = lt_soli_tab.
ENDIF.
* Datei schließen
CLOSE DATASET lv_filename.
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
* Ausgabe in Html
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
APPEND 'Das ist ein a - Anker Tag mit href und Title' TO itb_bcsy_text.
">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
APPEND '' TO itb_bcsy_text.
APPEND '
' TO itb_bcsy_text.
APPEND '' TO itb_bcsy_text.
">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
APPEND '' TO itb_bcsy_text.
APPEND '' TO itb_bcsy_text.
APPEND '' TO itb_bcsy_text.
">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
APPEND '' TO itb_bcsy_text.
APPEND '' TO itb_bcsy_text.
APPEND '' TO itb_bcsy_text.
ENDIF.
ELSE.
APPEND ls_soli TO itb_bcsy_text.
ENDIF.
ENDLOOP.
/code
