Problema de escala de imagen en Outlook
Crear diseños de correo electrónico en HTML es un proceso bastante complejo y no siempre agradable. Esto se debe principalmente a que muchos clientes de correo electrónico no son compatibles con los estándares web modernos. Además, existe una gran cantidad de clientes y servicios de correo electrónico diferentes.
Cuando estaba redactando correos electrónicos en HTML, me encontré con el hecho de que en Outlook de escritorio (resulta que alguien más lo usa) las imágenes se mostraban en una escala extraña. Todas las imágenes estaban ampliadas. Resolví este problema de la siguiente manera. Agregué código específico de Outlook a la sección head y agregué algunos atributos a la etiqueta html. Después de agregar el código, las imágenes en Outlook para escritorio comenzaron a mostrarse normalmente.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> </head>
Outlook (especialmente las versiones de escritorio como Outlook 2016, 2019 y Office 365) ajusta la escala de las imágenes debido a la configuración de DPI (puntos por pulgada). Muchas versiones de Outlook usan Word como motor de renderizado, que maneja las imágenes de manera diferente a los navegadores. Si la imagen se ve borrosa o redimensionada, es probable que se deba a la escala automática de DPI de Outlook (125 % o 150 % en pantallas de alta resolución).
Microsoft Outlook es un cliente de correo electrónico y una aplicación de gestión de información personal ampliamente utilizada, desarrollada por Microsoft. Forma parte del paquete Microsoft 365 y está disponible tanto para plataformas de escritorio como web.
Publicaciones similares:
-
Cómo ocultar la barra de desplazamiento mediante CSS
Existen varias formas de ocultar la barra de desplazamiento mediante CSS, dependiendo de si desea eliminar por completo el desplazamiento o simplemente ocultar la aparien...
-
Cómo centrar un elemento verticalmente usando CSS (alineación vertical)
Existen varias formas de alineación vertical. En diferentes situaciones, existen diferentes métodos adecuados. Veamos algunos de ellos. 1. Uso de Flexbox El método más ...
-
Cómo añadir un favicon a un sitio web
Un favicon (abreviatura de «icono de favoritos») es un pequeño icono gráfico asociado a un sitio web. Se muestra en las pestañas del navegador, marcadores, historial de n...
Leave a Reply