我创建了一个html简报。图像经过优化并加载到服务器。我使用链接在html简报上显示图像。
当我将简报上传到acumbamail时,它给我一个错误,说新闻通讯太大而且我有base64图像。
文件大小为19kbs。我如何处理base64图像?
Here is the corresponding codepen
以下是相应的HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>¿Listo para ver nuestros productos de la semana?</title>
<style type="text/css">
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
{
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.ExternalClass {
width: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
</style>
<style type="text/css">
.button-td, .button-a {
transition: all 100ms ease-in;
}
.button-td:hover, .button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
</style>
</head>
<body width="100%" height="100%" bgcolor="#2A2A2A" style="margin: 0;" yahoo="yahoo">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#2A2A2A" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">¿Listo para ver nuestros productos de la semana?</div>
<div style="max-width: 600px;">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
<tr style="background-color: white;">
<td style="padding: 8px 0; text-align: center"><img src="http://camaras-espias.com/newsletters/20170801/logo.png" width="100%" height="auto" alt="alt_text" border="0"></td>
</tr>
<tr style="background-color: white;"><td><p style="font-size: 14px; text-align: center;"><i>Newsletter nº 223• Echa un vistazo a nuestro nuevo producto!</i></p></td></tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 600px;">
<br>
<tr>
<td class="full-width-image" align="center" ><a href="http://www.camaras-espias.com/94-minicamara-mas-pequena-del-mundo-que-graba-en-alta-definicion.html"><img src="http://camaras-espias.com/newsletters/20170801/newproduct.png" width="100%" height="auto"></a></td>
</tr>
<tr>
<td><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;"><h1 style="text-align: center;">
Minicámara mas pequeña del mundo
</h1>
<h3 style="text-align: center;">149,90 €</h3>
¡nadie percibirá su presencia. Puede grabar sonido y posee visión nocturna invisible que se activará de manera automática cuando detecte que hay poca luz, tiene tantas ventajas, que hace imposible que no desees una para tu trabajo. ¿Te parece irresistible? Pues tenemos una esperándote. <br>
<br>
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #32C74B; text-align: center;" class="button-td"><a href="http://www.camaras-espias.com/94-minicamara-mas-pequena-del-mundo-que-graba-en-alta-definicion.html" style="background: #32C74B; border: 15px solid #32C74B; padding: 0 10px;color: black; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> ¡Lo quiero! </a></td>
</tr>
</table>
<br></td>
</tr>
</table></td>
</tr>
<tr>
<td class="full-width-image" align="center" ><a href="http://www.camaras-espias.com/817-marco-de-fotos-espia.html"><img src="http://camaras-espias.com/newsletters/20170801/banner.jpg" width="600" alt="alt_text" border="0" style="width: 100%; max-width: 600px; height: auto;"></a></td>
</tr>
<tr>
<td><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;"><h1 style="text-align: center;">
Marco de fotos espía
</h1>
<h3 style="text-align: center;">83,94 €</h3>
Los objetos espías se han convertido cada vez en más ocultos y es que en esta ocasión te traemos un marco de fotos tradicional, donde podrás colocar una foto tuya, de tus familiares o de quien tu quieras y además estar grabando tanto de forma continua como por detección de movimiento, tanto imagen como sonido, ¿no es espectacular? ¡Por un tiempo limitado el precio se ha reducido! ¡Consiga el suyo ahora! ¿Recuerda quién sospecharía que un marco de fotos los está grabando? <br>
<br>
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #32C74B; text-align: center;" class="button-td"><a href="http://www.camaras-espias.com/817-marco-de-fotos-espia.html" style="background: #32C74B; border: 15px solid #32C74B; padding: 0 10px;color: black; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> ¡Lo quiero! </a></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 40px 10px;width: 100%;font-size: 14px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #ffffff;">
¿Tienes alguna duda?<br>
<span>Por favor pregúntanos y estaremos encantados de responderte</span> <br>
<br>
<button type="button" style="padding: 10px; text-align: center; background-color:#32C74B; border-radius: 10px; "><a href="mailto:info@camaras-espias.com" style="color: white; font-size:18px; text-decoration: none;">info@camaras-espias.com</a></button>
</td>
</tr>
<tr> <td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #ffffff; text-align:center;">
<p><a style="color: #32C74B; font-weight: bold;" href="http://acumbamail.com/url/ver/22290138/" target="_blank">www.camaras-espias.com</a> · Teléfono <a style="color: #32C74B; font-weight: bold;">966 410 611</a></p>
</td>
</tr>
<tr>
<td>
<ul style="list-style-type: none; margin: 0; padding:0; text-align: center;">
<li style="display: inline;"><a href="https://www.facebook.com/camarasespia"><img width="50" height="50" src="http://camaras-espias.com/newsletters/20170801/facebook.png" width="512" height="512" alt="facebook"/></a></li>
<li style="display: inline;"><a href="https://plus.google.com/+CamarasEspiasTienda"><img width="50" height="50" src="http://camaras-espias.com/newsletters/20170801/google-plus.png" width="512" height="512" alt="google+"/></a></li>
<li style="display: inline;"><a href="https://www.pinterest.com/camarasespias/"><img width="50" height="50" src="http://camaras-espias.com/newsletters/20170801/pinterest.png" width="512" height="512" alt="pinterest"/></a></li>
<li style="display: inline;"><a href="https://twitter.com/CamarasEspias"><img width="50" height="50" src="http://camaras-espias.com/newsletters/20170801/twitter.png" width="512" height="512" alt="twitter"/></a></li>
<li style="display: inline;"><a href="https://www.youtube.com/user/containfo09"><img width="50" height="50" src="http://camaras-espias.com/newsletters/20170801/youtube.png" width="512" height="512" alt="youtube"/></a></li>
</ul></td>
</tr>
<tr><td style="text-align: center; font-size: 12px;"> <p><a style="color: white; text-decoration: none;" href="*|UNSUBSCRIBE_URL|*">Cancelar la suscripción</a> <a style=" color: white; text-decoration: none;" href="*|BROWSER_VIEW|*">Ver en el navegador</a></p></td></tr>
</table>
</div>
</center></td>
</tr>
</table>
</body>
</html>