as the title implies i recently designed an email template but the images wont show despite me uploading them to the internet (i believe thats how its done). I havent tried any paid hosting services but at my knowledge I dont think that would matter. If someonecould help me I would be eternaly grateful
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,inital-scale=1.0 shrink-to-fit=no">
<title>FMTC Safety</title>
<style type="text/css">
@media screen and (max-width:600px) {
.review-image{
margin-left: 5% !important;
position: relative !important;
bottom: 9px !important;
}
.paragraph1{
Margin-left: 53% !important;
position: relative !important;
bottom: 5px !important;
}
.secure-payment{
Margin-bottom:0 !important;
display:inline !important;
}
.grey-card{
Margin:0 !important;
padding-left:5px !important;
}
.grey-card-text{
bottom: 0px !important;
}
.info{
Margin-top:8% !important;
Margin-bottom:4% !important;
}
.methods{
Margin-left:10px !important;
}
.norisk{
Margin-top:5% !important;
Margin-left:11% !important;
}
.expire-date em{
Margin-top:12px !important;
}
}
@media screen and (min-width:600px){
p br{
display:none !important;
}
}
</style>
</head>
<body style="Margin:0;padding:0;background-color:#f6f9fc;font-size:15px;font-weight:lighter;">
<center class="wrap">
<div class="webkit" style="max-width:600px;background-color:#ffffff;">
<table class="outer" text-align="center" style="Margin:0 auto;width:100%;max-width:600px;border-spacing:0;font-family:sans-serif;clear:black;">
<tr>
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td style="padding:0;background-color: #f7f7f7;padding-top:30px;text-align:start;">
<a href="#"><img src="https://i.ibb.co/WGPbJzr/logo.png" style="Margin-left: 19px;" alt="logo"></a>
<a href="#"><img class="review-image" src="https://i.ibb.co/YhCqw7p/review.png" alt="customer reviews" style="border:0;Margin-left:45%;position:relative;bottom:13px;"></a>
<p class="paragraph1" style="Margin-left:75%;Margin-top:-15px;"><em style="font-weight: bold;font-style: normal;">4.6</em> uit 1006 reviews</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0;">
<p style="padding:20px;padding-left: 40px;">Dear sir, Madam</p>
<p style="padding-left:40px;padding-bottom:20px;line-height: 22px;">We send you this email about one or more certificates that are about to expire. <br>
Below you can find an overview.
</p>
<h4 style="padding-left:40px;padding-bottom:20px;">HWO Module First Aid</h4>
<img src="https://i.ibb.co/31P1YHb/yellow-check.png" style="border:0;padding-left:40px;Margin-bottom:-50px;" alt="Checkmark">
<p class="expire-date" style="padding-left:70px;Margin-top:0;padding-bottom:20px">Joost De haan (03-03-1990) - <br> <br> <em style="font-weight: bold;font-style:normal">expires : 13-08-2021</em></p>
<button style="Margin-left:40px;font-weight:bold;Margin-right:3%;padding:12px 17px;background-color: #289916;color:white; border:none;font-family: Arial, Helvetica, sans-serif;font-size:17px;">Check availability</button>
<p class="norisk" style="display:inline-flex;font-style:italic;color:grey;">No risk: Free cancelation</p>
<h4 style="padding-left:40px;padding-top:10px;padding-bottom:0px;Margin-bottom:2.5%;">Reserve your place now</h4>
<table style="border-spacing:0;padding-left: 40px;padding-bottom: 20px;line-height:30px;">
<tr>
<td style="padding:0;"><img src="https://i.ibb.co/h8KNyXR/check.png" style="border:0;padding-right:10px;" alt="checkmark"></td>
<td style="padding:0;">Do your training when it suits you</td>
</tr>
<tr>
<td style="padding:0;"><img src="https://i.ibb.co/h8KNyXR/check.png" style="border:0;padding-right:10px;" alt="checkmark"></td>
<td style="padding:0;">Our trainings are never cancelled</td>
</tr>
<tr>
<td style="padding:0;"><img src="https://i.ibb.co/h8KNyXR/check.png" style="border:0;padding-right:10px;" alt="checkmark"></td>
<td style="padding:0;">Reserve your training within a few minutes</td>
</tr>
</table>
<h5 class="secure-payment" style="padding-left:40px;padding-bottom:0px;Margin-bottom:0;position:relative;">Secure payment with:</h5>
<img class="grey-card" src="https://i.ibb.co/TKkHwFn/card-type.png" style="border:0;padding-left:40px;Margin-bottom:2.8%;width:25px;height:15px;" alt="payment card"><span class="grey-card-text" style="position:relative;bottom:19px;color:grey;Margin-left:1%;">Prepaid</span>
<img class="methods" src="https://i.ibb.co/pWS0nd7/cards.png" alt="credit/debit cards" style="border:0;">
<p class="info" style="padding-left:40px;padding-bottom:0px;Margin-bottom:1%;Margin-top:3%">If you have any questions regarding this email,please contact us on</p>
<strong style="padding-left:40px;padding-bottom:20px;font-weight:bold">+31 (0)85 130 74 61 <span style="font-weight: lighter;">or </span> info<em style="font-weight: lighter;">@</em>fmtcsafety.com</strong>
</td>
</tr>
<tr>
<td style="padding:0;">
<p style="font-size:11px;padding-left:40px;padding-bottom:20px;padding-top:20px;">Don't want to recieve these notifications in the future? Click <a href="#">here to unsubscribe</a></p>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I'm guessing you're talking about Outlook for desktop on Windows?
This is a simple user security setting where Outlook & Gmail block image downloading by default. You - the user will need to either click the prompt in both email clients to download images for that specific email. Instructions can be found with a simple internet search.
Alternatively you can change your default settings to ensure images are downloaded by default:
Please note: This does not mean your subscribers/customers will receive these emails with images downloaded by default. As mentioned above, this is a security setting for every user and you should not expect them to have this setting changed to suit your needs. You should also not look for ways around these settings.
Another important suggestion is to not rely too heavily on your images conveying important information for these basic reasons (there are more but here are two important ones):
Respect the guidelines, send your email and hope the recipients click the prompt to download the images or already have the settings altered.