El blog para emprendedores

3 consejos para optimizar un html mail

Publicado por Alejandra el 27 - Sep - 2015

Hace poco nos encontramos con un archivo en HTML, más puntualmente un mail, creado por el antiguo desarrollador. Casi nos da algo cuando intentamos descifrarlo, tablas sin cerrar, estilos mal resueltos… además de un diseño nefasto. En fin, había que ponerse en la tarea de limpiarlo para que pesara menos y se cargará correctamente en todos los proveedores de email. En este artículo queremos enseñarte 3 técnicas que puedes usar para limpiar código y optimizar tus archivos html mail.

1.  Revisar las imágenes:

Si el HTML tiene varias imágenes debemos asegurarnos que estas pesen lo menos posible. Habría que revisar una por una y guardarlas revisando su peso.

Esto hay que hacerlo con mucho ojo para que las imágenes no pierdan tanta calidad. Por ejemplo, un logo o un icono que guardaste en png24, puedes guardarlo en png8. Si la imagen va sobre fondo blanco apenas se notará el cambio.

Recuerda que las imágenes en JPG pesan mucho pero muchas veces son necesarias, por lo que sería ideal intentar ahorrar espacio con las demás técnicas.

 

2. Acortar los colores hexadecimales:

Los colores con 6 dígitos de código hexadecimal se pueden simplificar. Esto te ahorrará poco espacio: 300bytes pero algo es algo, y conseguirlo es realmente fácil.

Por ejemplo el blanco: #FFFFFF; puede escribirse más corto: #FFF; Así mismo todos los demás colores que encuentres así de fácil: #000000; por #000; ó #CCCCCC; por #CCC;

Si tu color es algo así: #FFFEFD; puedes acortarlo dividiéndolo en tres secciones y tomando la primera letra de las tres secciones. Por lo que el resultado sería: #FFF. No es exactamente el mismo color inicial pero te dará un resultado similar. Evidentemente hay colores que no puedes acortar, incluso cuando puedes (como en el ejemplo anterior) pero la diferencia de color se nota demasiado, es mejor no hacerlo; en estos casos no hay remedio pero conservas los colores originales de tu diseño, cosa que también es muy positiva. Recuerda que no se trata de dañar el diseño original. Simplemente de optimizarlo.

Ahora, ¿Sabrías decirnos qué color es este “#A13;” ?

3. Menos es más:

Existen compresores de archivos en internet, y lo que suelen hacer es eliminar comentarios y espacios. Pero muchas veces no queremos que se borre lo que comentamos en el código para que podamos entenderlo mejor en un futuro. Por eso decidimos comprimirlo nosotros mismos. Este es un tip que nos funcionó a nosotros, pero aún no hemos encontrado que nadie diga nada de esto. Pero funcionó, así que puedes intentarlo.

Al descifrar el código empezamos a ordenarlo siguiendo la jerarquía de las etiquetas; pero al introducir tantos espacios de línea, el archivo se hacia más pesado.  Lo acortamos así:

Y el archivo se volvió mucho más ligero. Así que puedes intentarlo.

Del mismo modo, este mail estaba hecho con tablas para definir los espacios “vacios” Así que eliminamos todo ese código y lo sustituimos por márgenes y paddings en las tablas y celdas necesarias.

Después de seguir estos 3 sencillos consejos para optimizar un email conseguirás un código HTML más limpio y podrás incluir más contenido interesante en tus emails.

Así que ¡Manos a la obra!

Deja tu comentario